Playwright is a cross browser automation framework for end to end testing created by the Microsoft team and has been steadily gaining popularity. It is a NodeJS library to automate Chromium, Firefox, and WebKit with a single API. Test on Windows, Linux, and macOS, locally or on CI, headless or headed with native mobile emulation of Google Chrome for Android and Mobile Safari.
System requirements
- Latest version of Node.js 18, 20 or 22.
- Windows 10+, Windows Server 2016+ or Windows Subsystem for Linux (WSL).
- macOS 13 Ventura, or later.
- Debian 12, Ubuntu 22.04, Ubuntu 24.04, on x86-64 and arm64 architecture.
Install Node.js
Make sure you have Node.js installed on your machine. You can download and install it from the official website: Node.js
Installing Playwright
Get started by installing Playwright using npm. Alternatively you can also get started and run your tests using the VS Code Extension.
npm init playwright@latest
Run the install command and select the following to get started:
- Choose between TypeScript or JavaScript (default is TypeScript)
- Name of your Tests folder (default is tests or e2e if you already have a tests folder in your project)
- Add a GitHub Actions workflow to easily run tests on CI
- Install Playwright browsers (default is true)
Playwright installation console logs :
D:\playwright Project\Playwright-tutorial>npm init playwright@latest Need to install the following packages: create-playwright@1.17.135 Ok to proceed? (y) y > npx > create-playwright Getting started with writing end-to-end tests with Playwright: Initializing project in '.' √ Do you want to use TypeScript or JavaScript? · JavaScript √ Where to put your end-to-end tests? · tests √ Add a GitHub Actions workflow? (y/N) · false √ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true Initializing NPM project (npm init -y)… Wrote to D:\playwright Project\Playwright-tutorial\package.json: { "name": "playwright-tutorial", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "description": "" } Installing Playwright Test (npm install --save-dev @playwright/test)… added 3 packages, and audited 4 packages in 6s found 0 vulnerabilities Installing Types (npm install --save-dev @types/node)… added 2 packages, and audited 6 packages in 3s found 0 vulnerabilities Writing playwright.config.js. Writing tests\example.spec.js. Writing tests-examples\demo-todo-app.spec.js. Writing package.json. Downloading browsers (npx playwright install)… Downloading Chromium 134.0.6998.35 (playwright build v1161) from https://cdn.playwright.dev/dbazure/download/playwright/builds/chromium/1161/chromium-win64.zip 141.8 MiB [=== ] 16% 116.3sError: Request to https://cdn.playwright.dev/dbazure/download/playwright/builds/chromium/1161/chromium-win64.zip timed out after 30000ms at ClientRequest.rejectOnTimeout (D:\playwright Project\Playwright-tutorial\node_modules\playwright-core\lib\server\utils\network.js:76:15) at Object.onceWrapper (node:events:638:28) at ClientRequest.emit (node:events:524:28) at TLSSocket.emitRequestTimeout (node:_http_client:857:9) at Object.onceWrapper (node:events:638:28) at TLSSocket.emit (node:events:536:35) at Socket._onTimeout (node:net:602:8) at listOnTimeout (node:internal/timers:594:17) at process.processTimers (node:internal/timers:529:7) Downloading Chromium 134.0.6998.35 (playwright build v1161) from https://playwright.download.prss.microsoft.com/dbazure/download/playwright/builds/chromium/1161/chromium-win64.zip 141.8 MiB [====================] 100% 0.0s Chromium 134.0.6998.35 (playwright build v1161) downloaded to C:\Users\sumit\AppData\Local\ms-playwright\chromium-1161 Downloading Chromium Headless Shell 134.0.6998.35 (playwright build v1161) from https://cdn.playwright.dev/dbazure/download/playwright/builds/chromium/1161/chromium-headless-shell-win64.zip 87.8 MiB [====================] 100% 0.0s Chromium Headless Shell 134.0.6998.35 (playwright build v1161) downloaded to C:\Users\sumit\AppData\Local\ms-playwright\chromium_headless_shell-1161 Downloading Firefox 135.0 (playwright build v1475) from https://cdn.playwright.dev/dbazure/download/playwright/builds/firefox/1475/firefox-win64.zip 91.5 MiB [====================] 100% 0.0s Firefox 135.0 (playwright build v1475) downloaded to C:\Users\sumit\AppData\Local\ms-playwright\firefox-1475 Downloading Webkit 18.4 (playwright build v2140) from https://cdn.playwright.dev/dbazure/download/playwright/builds/webkit/2140/webkit-win64.zip 52.8 MiB [====================] 100% 0.0s Webkit 18.4 (playwright build v2140) downloaded to C:\Users\sumit\AppData\Local\ms-playwright\webkit-2140 Downloading FFMPEG playwright build v1011 from https://cdn.playwright.dev/dbazure/download/playwright/builds/ffmpeg/1011/ffmpeg-win64.zip 1.3 MiB [====================] 100% 0.0s FFMPEG playwright build v1011 downloaded to C:\Users\sumit\AppData\Local\ms-playwright\ffmpeg-1011 Downloading Winldd playwright build v1007 from https://cdn.playwright.dev/dbazure/download/playwright/builds/winldd/1007/winldd-win64.zip 0.1 MiB [====================] 100% 0.0s Winldd playwright build v1007 downloaded to C:\Users\sumit\AppData\Local\ms-playwright\winldd-1007 ✔ Success! Created a Playwright Test project at D:\playwright Project\Playwright-tutorial Inside that directory, you can run several commands: npx playwright test Runs the end-to-end tests. npx playwright test --ui Starts the interactive UI mode. npx playwright test --project=chromium Runs the tests only on Desktop Chrome. npx playwright test example Runs the tests in a specific file. npx playwright test --debug Runs the tests in debug mode. npx playwright codegen Auto generate tests with Codegen. We suggest that you begin by typing: npx playwright test And check out the following files: - .\tests\example.spec.js - Example end-to-end test - .\tests-examples\demo-todo-app.spec.js - Demo Todo App end-to-end tests - .\playwright.config.js - Playwright Test configuration Visit https://playwright.dev/docs/intro for more information. ✨ Happy hacking! 🎭 npm notice npm notice New major version of npm available! 10.9.0 -> 11.2.0 npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.2.0 npm notice To update run: npm install -g npm@11.2.0 npm notice
What's Installed
Playwright will download the browsers needed as well as create the following files.
The playwright.config is where you can add configuration for Playwright including modifying which browsers you would like to run Playwright on. If you are running tests inside an already existing project then dependencies will be added directly to your package.json.
The tests folder contains a basic example test to help you get started with testing. For a more detailed example check out the tests-examples folder which contains tests written to test a todo app.
Running the Example Test
By default tests will be run on all 3 browsers, Chromium, Firefox and WebKit using 3 workers. This can be configured in the playwright.config file. Tests are run in headless mode meaning no browser will open up when running the tests. Results of the tests and test logs will be shown in the terminal.
npx playwright test
you can learn more about running tests in headed mode, running multiple tests, running specific tests etc. by using above commands.
HTML Test Reports
After your test completes, an HTML Reporter will be generated, which shows you a full report of your tests allowing you to filter the report by browsers, passed tests, failed tests, skipped tests and flaky tests. You can click on each test and explore the test's errors as well as each step of the test. By default, the HTML report is opened automatically if some of the tests failed.
npx playwright show-report
Updating Playwright
To update Playwright to the latest version run the following command:
npm install -D @playwright/test@latest # Also download new browser binaries and their dependencies: npx playwright install --with-deps
Check Playwright version
npx playwright --version
No comments:
Post a Comment