Common Playwright Commands

In this example we will explore different type of commands used in playwright to run tests. Thanks to Microsoft's Playwright, running end-to-end tests with real browsers is quickly done. Initialize a new Playwright project, install all the dependencies, and off you go! 

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 init playwright@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.

npm install -D @playwright/test@latest

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 test

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 install webkit

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 --ui

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 --project=chromium -headed

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 --debug

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

npx playwright test --trace on

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

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 codegen <https://www.saucedemo.com/> --save-storage=auth.json

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 show-report

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 open

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 -retries=3

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

npx playwright test --grep @fast

Run the test with the title

npx playwright test -g "add a todo item"

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 test --workers 4

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 -h

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

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

This is all about use playwright command used in day to day automation activities.