Summary

The provided content outlines essential Playwright commands for initializing projects, installing dependencies, running tests, debugging, and generating code snippets for web automation.

Abstract

The web content details the use of Playwright, a Node.js-based automation library, by providing a list of command-line instructions for various tasks. It begins with initializing a new Playwright project using npm init playwright@latest and installing the @playwright/test package as a development dependency with npm install -D @playwright/test@latest. The article explains how to run tests using npx playwright test, install specific browsers with npx playwright install, and execute tests with a graphical user interface via npx playwright test --ui. It also covers how to run tests in headed mode, debug tests, enable detailed tracing, and generate code snippets using npx playwright codegen. The content further describes how to save session data, generate Playwright reports, open the Playwright Inspector, retry failed tests, filter tests using tags, run tests in parallel with multiple workers, access help for Playwright CLI, and capture screenshots or generate PDFs of webpages.

Opinions

The use of npx playwright install --with-deps is recommended to ensure all necessary browser binaries and their dependencies are downloaded.
The --headed option is suggested for users who prefer to visually observe the test execution in a browser window.
The --debug flag is highlighted as a valuable tool for stepping through tests and live-editing locators, enhancing the debugging process.
The --trace on command is emphasized for its ability to provide detailed tracing during test execution, which aids in understanding test behavior.
The npx playwright codegen command is presented as a convenient feature for automating interactions with web pages and for creating reusable code snippets.
Saving session data with npx playwright codegen <URL> --save-storage=auth.json is noted as particularly useful for maintaining state across multiple test sessions, such as when testing authenticated user sessions.
The npx playwright show-report command is mentioned as a way to generate a summary of test results, which can be customized to suit the user's needs.
The Playwright Inspector, launched with npx playwright open, is described as a user-friendly tool for generating code snippets and identifying elements for automation.
The use of npx playwright test -retries=3 is advised for environments where tests may fail due to instability, allowing for test retries.
The --grep flag is useful for running a subset of tests that match a specific tag, such as @fast for quicker test execution.
Running tests with multiple workers using npx playwright test --workers 4 is suggested to leverage machine processing power and increase test efficiency.
The npx playwright -h command is provided for users seeking assistance with Playwright's command-line interface, offering a list of available commands and options.
While Playwright does not natively support PDF generation, the content suggests a workaround using a headless browser to capture screenshots and convert them to PDF format.
The npx playwright screenshot command is showcased for its ability to take screenshots of webpages in various device emulations, such as the iPhone 13.
The ability to open a webpage with specific viewport sizes and color schemes using npx playwright open is noted as a feature that aids in responsive design testing and accessibility checks.

Common Playwright Commands

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.