Playwright Beginner Tutorial 10 | Slow Motion and Video Recording

T I M E S T A M P S ►
00:00 *Intro*
00:52 *How to run tests in Slow Motion | How to Record Video*
Step 1 - Open config file and add option for slow motion and video recording

const config = {
use: {
video: 'on',
launchOptions:{
slowMo: 1000
}

slowMo slows down Playwright operations by the specified milliseconds

video:
'on' - Record video for each test
'off' - Do not record video
'retain-on-failure' - Record for each test, but remove from successful test runs
'on-first-retry' - Record only when retrying a test for the first time

Step 2 - Save & Run
Step 3 - Check Video files will appear in the test-results folder

Note - SlowMo is a field in Class BrowserType.LaunchOptions

08:23 *Screenshot moment*

09:39 *How to set video recording and slow motion from test (Browser Context)*
In Playwright we can create isolated incognito browser sessions using browser context

10:34 *Create a new test*
// Launch browser
// Create a new incognito browser context
// Create a new page inside context.
// Dispose context once it's no longer needed.

13:49 *Set configurations for slow motion and video recording at test level*
Step 1 - Create a test and create browser context
Step 2 - Add options for Slow Motion in browser
Step 3 - Add options for video recording in new context
Step 4 - Close context

// launch browser
headless: false,
slowMo: 1000
})
// create a context for browser
recordVideo: {
dir: 'videos/',
size: {width:800, height: 600}
}
})
16:42 *Screenshot moment for test*
19:09 *Outro*

#playwright #tutorial
▬▬ RAGHAV PAL ▬▬
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Every LIKE & SUBSCRIPTION gives me great motivation to keep working for you

You can support my mission for education by sharing this knowledge and helping as many people as you can

If my work has helped you, consider helping any animal near you, in any way you can

NEVER STOP LEARNING
Raghav Pal

[hiteshkumarkhatri]

Awesome video series so far on Playwright.
Can you please share insights about upcoming videos on Playwright and by when we can expect the series to be completed ?
Just curious, so that can plan my learning accordingly.

Thankyou for everything.

[ferrys.]

Hi Raghav, there is a typo in 1 quiz question anwser: Question: Where to set slow motion and video recording configuration at global level has an answer pacakge.json. That should be package.json. Also is should prefer that the first answer is: Playwright config file, instead of config file.

[professorjksexperiments]

Thank you Sir! I hope you also start videos regarding data driven tests (CSV or database) with playwright. Thank you again and more power!

[sd-kcqy]

Raghav - I used screenshot in my script but when I tried in our test I am able to capture only on one step. Is there can capture multiple steps? Also perform image to text and compare a text in a test. I have script with 40steps and I want to capture screenshot for total 4 steps and generate tex on those 4 screenshots. So far I watch few video and it used only in one step.
For image to text I used " //convert from image to text
async function convertToText(name) {
let imgText = await Tesseract.recognize(`./screenshots/${name}`, 'eng');
const storetextdata = imgText.data.text;
console.log("Image to Text Data"+storetextdata);
Passed")).toBeTruthy();
In Test step I have added :
//Start capturing screenshot
const name = Date.now();
await page.screenshot({ path: `screenshots/${name}.png`, fullpage: true});
await convertToText(`${name}.png`);

[ferrys.]

Hi Raghav, excellent video. But 1 thing is not clear to me. You make a chromium.launch, but you also have to give project=chromium in the terminal command. I would expect if you initilize chromium in the browser constant, you wouldn't need to specify it in the terminal command? Can you explain please?

[fatimatalan]

Hello, please make a tutorial for doing API calls (for an Outlook token OTP, for example) within Playwright

[cnjbravo]

Hi Raghav. When you configure the video recording and slow motion in the file and run the test using the terminal, do you think is necessary to mention "--project chromium"? because you already mention in line 5 that you will be using chromium. I hope you get my point. Thanks.

[ramutalari]

Hi Raghav, could you please help on how to verify URL's (broken links) in Playwright ?

We have 200 URL's and need to execute it on daily basis and I have written code in Cypress and its working fine but need it on Playwright too.

Kindly help on this through Playwright.

[elenayaryzhko]

Hi, in my config file I don't seem to have the time out setting or const config in general. What shall I do? Thank you

[troydjk]

Thank you so much for the tutorial. I have a question. After recording, and run a test, it used to show timeline of how long it takes to test each line, not it disappeard. How do I get that time showing back? Thank you in advance.

[manojvyavahare]

Hello Sir,
Could you please create videos for:
1) How to pass data-driven from excel files?
2) How to generate the reports in playwright.?
3) How to create POM?

[sharonagwah]

hello,
Thank you for your video.
i followed your steps on how to record test but it was not recorded. Please can you guide me on what to do?

[manzhoska]

hi,
the config at 3:23 wasn't recognized by VS Code. Help me please. I'm using Macbook

[cnjbravo]

Hi Raghav, I have one more question, I used the same code as you have for the slow motion and recording, once the test is completed, I'm having an error related to the timeout: "Test timeout of 10000ms exceeded.".

All the steps are pass, just having that error. 10000ms is the time I have set in my config file "timeout: 10 * 1000, "

What can I do? increase or decrease the time?

Thanks again.

[DIVYANSHU]

Hey Raghav, please can you create a tutorial where if one has to click and check multiple links on a page to find if there is a 404 link on a page, how that can be done ? using Playwright without having to click on them. Similar to how it's done in selenium with HTTP method. I haven't come across a resource which can help that using Playwright.

[devbratsingh]

Hi Raghav in my config.js i dont get any option for const config = {, I'm only getting module.exports = defineConfig({

[cnjbravo]

Your videos are really great, I'm learning a lot.

I'm having this question since previous video...

For your test file login_demo.spec.js, I think you have 3 different test, my question is: is it possible to run a single test without using "test.only"? something like:
npx playwright test login_demo.spec.js/Demo Login Test 3

Thanks in advance

[sirishapochiraju]

Hi Raghav, how to use waits in the playwright. Thanks

[umesh]

I am trying to run the test from github actions, for 2 specific tests I am always getting this error " Error: locator.textContent: Page closed" in github actions while locally its working fine as expected
Based on the error I can understand that page is getting closed before playwright perform some actions on the UI, my question is how to handle such kind of scenario

[maradanaabhi]

When i set the video recorder in config.js file save and run it the project .it was not not recorded can you guide me how to do