Playwright Record Script using Codegen

Profile picture for user devraj

If you want to get started with testing quickly or you are new to automation, the Playwright gives you the ability to generate tests using the code generator feature.

Table of Content

  1. Running Codegen
  2. How to record test
  3. Record Directly to File
  4. Video Tutorial

1. Running Codegen

Using the codegen tool, Playwright automatically generates the code based on the actions we perform on the webpage. 

npx playwright codegen

Here, https and www are optional depending on how redirect works on your website.

Once you type this command, it will open two windows, a browser window where you can interact with the website and a Playwright inspector window where you can record your test.

2. How to record test

Start performing actions in the browser; Playwright CLI will generate code automatically. If you want to stop in between and do not want to record anything, click on the record button. To resume again, click on the record button again.

Playwright Record Script

You can also switch to the language of your choice from the target dropdown. The code will be converted into the selected language.

You can copy code using the copy button and paste it into the class or script file. After pasting it to the file, you can run your code or use the debugging feature to test the code.

3. Record Directly to File

Instead of manually copying and pasting code after creating the file, you can create the file and generate code inside it using the command line feature.

npx playwright codegen --target javascript -o tests/example.js
  • --target: To specify language like java, javascript, python, python-async, csharp
  • -o: Output filename with directory. 

Video Tutorial: Playwright Record Script using Codegen