Name: Quickly Generate Playwright Tests with Codegen
Uploaded: 2022-03-06T23:53:07-06:00
Description: In this lesson we introduce the codegen feature of Playwright which can be used to quickly generate automation / test code.

Playwright Tests API Basics

Setting up Microsoft Playwright

Adding Playwright to your Web App

Playwright VSCode Extension

Visual Regression Testing with Playwright

Generate Playwright Snapshots on your CI Server

Debugging Playwright Tests with Inspector

Quickly Generate Playwright Tests with Codegen

Postmortem Debugging Failed Tests with the Playwright Trace Viewer

Capture Failed Test Videos and Screenshots with Playwright

Playwright Selectors

Page Object Model Pattern with Playwright

Playwright Test Fixtures, Browser Context and Page

Playwright Library for Browser Automation

Use Playwright to Test and Automate Web Applications

In this lesson we introduce the codegen feature of Playwright which can be used to quickly generate automation / test code.

https://app.egghead.io/api/v1/lessons/egghead-quickly-generate-playwright-tests-with-codegen/subtitles

Instructor: [0:00] Playwright also ships with a code generator that can generate the tests for you. To get started, run npx playwright codegen. Then, we provide an output path for our file name. We're just going to write it to demo.spec.ts under the tests folder.

[0:16] Now, you get to see the code that is being generated within the Playwright Inspector. The browser is running in headed mode. You interact with the browser like you normally would. For example, navigate to a particular URL.

[0:28] For every action that you carry out, the code generator will generate some code, and you can see that within the Playwright Inspector's sources panel. Just as an example, we've gone to a particular URL within the browser, added some text to an input field, and then press the Enter key.

[0:43] Once you've carried out the actions that you need for your test, you can exit the browser, and now Playwright will commit this code to file. Now, you can continue with the normal workflow that you might have. For example, open this folder up within your IDE, go to the particular test, and now we can use the VS Code extension to debug this test further.

[1:03] Once we are happy, we click Resume, and now you would probably use your deeper knowledge about the web application that has been tested to clean up the code a bit further. For example, clean up the selectors.

[1:14] Irrespective of the code quality, npx playwright codegen is a great way for you to generate some quick code.

Quickly Generate Playwright Tests with Codegen

Share this video with your friends

Course

Use Playwright to Test and Automate Web Applications