Generating Playwright Tests in VS Code

• 00:30 Recording a new test
• 00:55 Generating the test
• 02:03 Writing assertions
• 02:42 Using Pick Locator
• 04:07 Recording at a specific point
• 05:17 Running and verifying the test

In this video, we explore how to generate tests based on user actions using Playwright's Code gen feature. We'll walk through the steps of creating a simple test and writing assertions in the test.

1. Opening the testing toolbar: In your project, click on the testing icon to open up the testing toolbar.

2. Recording a new test: Click on 'Record new', which opens up a browser window and creates a test file called test1spect.ts. It imports 'test' and 'expect' from 'playwright test' and sets up the first test with the page fixture.

3. Generating the test: You can use the test generator to generate your test based on user actions. Go to a demo URL like playwright.dev and start performing actions like adding to-do items, marking them as completed, and filtering by active or completed tasks.

4. Writing assertions: After recording user actions, write assertions to test specific conditions. You can use the 'Pick Locator' feature to easily select a locator by hovering and clicking the desired element on the page.

5. Recording at a specific point: You can add more actions to your test by clicking the 'Record at cursor' button. This allows you to record new actions at a specific point in the test.

6. Running and verifying the test: Finally, run the test and see if it passes or fails based on the assertions written. Adjust the assertions as needed and re-run the tests.

In conclusion, the Code gen feature in Playwright provides a convenient way to create tests based on user actions and write meaningful assertions. The Pick Locator and Record at cursor functionalities make it easier for you to interact with elements on the page and tailor your tests as needed, resulting in more efficient and accurate testing.