Common Playwright Commands

Photo by Markus Spiske on Unsplash

npm init playwright@latest

To create a new Playwright project with the latest @playwright/test framework, use the command npm init playwright@latest. This command sets up the project and configurations needed to write and run tests with Playwright. npm init initializes a new Node.js project and creates a package.json file, prompting you with questions to set up project details. playwright@latest specifies the latest Playwright package with the @playwright/test framework. To speed up the installation process, choose "false" for the browser installation question. Use npx playwright install to install a specific browser later.

npm install -D @playwright/test@latest

Install the latest version of the @playwright/test package as a development dependency in your current project. Afterwards, run npx playwright install — with-deps to download new browser binaries and their dependencies.

npx playwright test

Once Playwright is installed, running the above command will allow Playwright to discover and execute all tests in the project using the test runner. You can view the test results in the terminal or command prompt.

npx playwright install webkit

Playwright simplifies browser installation and running. It installs default browsers, but you can also install specific ones using an argument. This lets you customize your browser installation to meet your needs.

npx playwright test --ui

Use this command to run tests with a graphical user interface. This allows you to see and interact with the test results quickly. You can customize the test runner with browser settings or test environment specifications.

npx playwright test --project=chromium -headed

To run a test with Playwright, use the “npx playwright test” command and specify options. “ — project” selects the browser (Chromium or Firefox). “ — headed” toggles headless mode. Use other options like “ — timeout” or “ — grep” for customization.

npx playwright test --debug

View actionability logs and live-edit locators by stepping through your test. The browser window highlights matching locators and displays the total number. For specific test debugging, add the test file name, line number, and debug flag.

npx playwright test --trace on

To enable detailed tracing in Playwright tests, use the command “npx playwright test — trace on”.

npx playwright codegen

To generate code snippets for interacting with a webpage using Playwright, run the command npx playwright codegen. This command launches a browser (Chromium, WebKit, or Firefox) and records your actions, generating code snippets that can be used in test scripts. Optionally, you can include the webpage link in the command to directly launch a browser with the webpage, instead of navigating to it.

npx playwright codegen <https://www.saucedemo.com/> --save-storage=auth.json

To save cookies and localStorage after a session, use codegen with save-storage. This records an authentication step for later reuse, which is handy for testing a website's functionality over multiple sessions or for resuming testing later without losing progress.

npx playwright show-report

To generate a Playwright report, use the command npx playwright show-report. This provides a summary of test results, including any errors or warnings encountered. Customize the report by specifying the output format, level of detail, and report file location.

npx playwright open

The command launches the Playwright Inspector, simplifying the process of generating code snippets and identifying elements for automation. This graphical tool provides a user-friendly interface for interacting with web pages and recording interactions, making it easy to inspect and debug scripts.

npx playwright test -retries=3

Use this command to automatically retry your tests up to three times if they fail. By default, the tests are not retried. Useful for testing in unstable networks or error-prone environments.

npx playwright test --grep @fast

This command searches for all tests that have the “@fast” tag and executes them.

npx playwright test --workers 4

This command runs multiple tests simultaneously, utilizing multiple workers to take advantage of your machine’s processing power and execute tests more efficiently.

npx playwright -h

The help command is used to obtain assistance on the Playwright CLI. It shows a list of all available commands and their options. For more information on a particular command, use the h option after the command.

npx playwright pdf https://en.wikipedia.org/wiki/Helsinki Helsinki.pdf

While Playwright doesn’t directly support generating PDFs from webpages, you can accomplish this by using Playwright in conjunction with a headless browser, such as Chromium. This allows you to capture the webpage as a screenshot and then convert it into a PDF.

npx playwright screenshot --device="iPhone 13" https://en.wikipedia.org/wiki/Main_Page wiki.png

The playwright will launch a headless browser, emulate the iPhone 13 device, capture the Wikipedia main page, and save it as “wiki.Main_Page.png”.

npx playwright open --viewport-size=800,600 --color-scheme=dark twitter.com

Use Playwright to open Twitter.com in a headless browser, setting a specific viewport size and color scheme.

My recent publication compiled a comprehensive collection of 100 similar typescript programs. Each program not only elucidates essential Typescript concepts and expounds upon the significance of test automation but also provides practical guidance on its implementation using Playwright. This resource will undoubtedly be valuable if you look deeper into similar topics.

Playwright's Cookbook: Recipes with Typescript