How to RECORD and PLAY reliable tests with Playwright

• 02:01 Installing Playwright Test extension in VS Code
• 03:14 Installing Playwright using VS Code
• 05:07 Running and recording a test using VS Code extension
• 07:00 Recording a test from a specific point in an existing test
• 08:28 Using CLI for Playwright Code Generation
• 09:42 Using the Playwright Inspector with CLI

In this video, we learn how to use the Playwright Code Generation feature, a powerful tool for generating code snippets for browser automation. Playwright is an open-source cross-browser testing library developed by Microsoft, which allows us to write automated tests in multiple programming languages.

There are two approaches to using this feature: using the Playwright Test extension in Visual Studio Code (VS Code) or using the Command Line Interface (CLI).

Using Playwright Test extension in Visual Studio Code

1. Install the Playwright Test extension in VS Code by searching for it in the Extensions tab and clicking on Install.
2. Create a new folder for your project in VS Code.
3. Install Playwright using the command palette by typing install playwright, then choosing the browsers you want to use in test execution.
4. A tests folder will be generated containing default test files.
5. Click on the Record New button in the extension, and Playwright will generate a new test file with an empty test scenario, awaiting manual input.
6. Perform your desired test scenario in the opened browser, and Playwright will record each step, resulting in a ready-to-execute test.

You also have the ability to record tests from a specific point in an existing test, by moving your cursor to where you want to record more actions and clicking on the "record at cursor" button.

Using the CLI for Playwright Code Generation

1. Navigate to your project folder using a terminal.
2. Run the command npx playwright codegen to open a browser waiting for manual input.
3. Perform your desired test scenario in the opened browser, and the Playwright Inspector will generate the code for you in real-time.
4. Copy the generated code, and paste it into your project test files.

The code generation command also comes with additional features for emulating different viewports, devices, color schemes and geolocations, language and time zones, as well as loading authenticated states and recording using custom setups.

By utilizing code generation in Playwright, we can efficiently create automated end-to-end tests for our projects.