DEV Community

Kayode
Kayode

Posted on • Originally published at blog.zt4ff.dev on

2 1 1 1 1

Playwright Tutorial For Beginners 7 - Videos

Playwright can record videos for all pages in a browser context.

A BrowserContext is an isolated incognito-alike session within a browser. Just like when you open an incognito window of your browser, the browser state (cache, cookies etc.) is isolated between test.

Using the page provide by Playwright test runner, @playwright/test, the page provided in the tests callback opens in a new context out of the box.

To record a video, we will:

  • create a new context from a browser with some options in place
  • create a new page with from the context
  • open a web app in the page
  • make sure to close the context (the video is generated after this

We will create a test scripts in demo.spec.js and run to generate a video:

// demo.spec.js
const { test } = require('@playwright/test');

test('Demo video', async ({ browser }) => {
  const context = await browser.newContext({ recordVideo: { dir: 'videos' } });
  const page = await context.newPage();
  await page.goto('https://google.com');

  await page.type('input', 'playwright');
  await page.press('input', 'Enter');
  await page.waitForTimeout(1000);

  await context.close();
});

Enter fullscreen mode Exit fullscreen mode

The test will generate a video in a /videos folder.

generated video

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay