Quickly Generate Playwright Tests with Codegen
In this lesson we introduce the codegen feature of Playwright which can be used to quickly generate automation / test code.
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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!