Rayrun
← Back to videos

Generating Playwright Tests in VS Code

Let’s take a look at how to generate a test based on your user actions and then write some assertions. Then we can use the pick locator option in VS Code to pick the locator we want and the record at cursor option to record a test from a specific place in our code.

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.

Related Videos

Playwright Tutorial: Output Console logs as step traces to UI watch Mode & Traceviewer
Playwright Tutorial: Output Console logs as step traces to UI watch Mode & Traceviewer
#16 - ARIA and how Playwright is making use of it to identify UI controls?
#16 - ARIA and how Playwright is making use of it to identify UI controls?
Playwright VsCode Extension
Playwright VsCode Extension
Playwright Version 1.14 | Playwright Tutorial - Part 45
Playwright Version 1.14 | Playwright Tutorial - Part 45
TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.