ScuttleBot

scuttlebot / tests / e2e / node_modules / @playwright / test / README.md
Source Blame History 168 lines
f7eb47b… lmata 1 # 🎭 Playwright
f7eb47b… lmata 2
f7eb47b… lmata 3 [![npm version](https://img.shields.io/npm/v/playwright.svg)](https://www.npmjs.com/package/playwright) <!-- GEN:chromium-version-badge -->[![Chromium version](https://img.shields.io/badge/chromium-145.0.7632.6-blue.svg?logo=google-chrome)](https://www.chromium.org/Home)<!-- GEN:stop --> <!-- GEN:firefox-version-badge -->[![Firefox version](https://img.shields.io/badge/firefox-146.0.1-blue.svg?logo=firefoxbrowser)](https://www.mozilla.org/en-US/firefox/new/)<!-- GEN:stop --> <!-- GEN:webkit-version-badge -->[![WebKit version](https://img.shields.io/badge/webkit-26.0-blue.svg?logo=safari)](https://webkit.org/)<!-- GEN:stop --> [![Join Discord](https://img.shields.io/badge/join-discord-informational)](https://aka.ms/playwright/discord)
f7eb47b… lmata 4
f7eb47b… lmata 5 ## [Documentation](https://playwright.dev) | [API reference](https://playwright.dev/docs/api/class-playwright)
f7eb47b… lmata 6
f7eb47b… lmata 7 Playwright is a framework for Web Testing and Automation. It allows testing [Chromium](https://www.chromium.org/Home), [Firefox](https://www.mozilla.org/en-US/firefox/new/) and [WebKit](https://webkit.org/) with a single API. Playwright is built to enable cross-browser web automation that is **ever-green**, **capable**, **reliable**, and **fast**.
f7eb47b… lmata 8
f7eb47b… lmata 9 | | Linux | macOS | Windows |
f7eb47b… lmata 10 | :--- | :---: | :---: | :---: |
f7eb47b… lmata 11 | Chromium <!-- GEN:chromium-version -->145.0.7632.6<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
f7eb47b… lmata 12 | WebKit <!-- GEN:webkit-version -->26.0<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
f7eb47b… lmata 13 | Firefox <!-- GEN:firefox-version -->146.0.1<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
f7eb47b… lmata 14
f7eb47b… lmata 15 Headless execution is supported for all browsers on all platforms. Check out [system requirements](https://playwright.dev/docs/intro#system-requirements) for details.
f7eb47b… lmata 16
f7eb47b… lmata 17 Looking for Playwright for [Python](https://playwright.dev/python/docs/intro), [.NET](https://playwright.dev/dotnet/docs/intro), or [Java](https://playwright.dev/java/docs/intro)?
f7eb47b… lmata 18
f7eb47b… lmata 19 ## Installation
f7eb47b… lmata 20
f7eb47b… lmata 21 Playwright has its own test runner for end-to-end tests, we call it Playwright Test.
f7eb47b… lmata 22
f7eb47b… lmata 23 ### Using init command
f7eb47b… lmata 24
f7eb47b… lmata 25 The easiest way to get started with Playwright Test is to run the init command.
f7eb47b… lmata 26
f7eb47b… lmata 27 ```Shell
f7eb47b… lmata 28 # Run from your project's root directory
f7eb47b… lmata 29 npm init playwright@latest
f7eb47b… lmata 30 # Or create a new project
f7eb47b… lmata 31 npm init playwright@latest new-project
f7eb47b… lmata 32 ```
f7eb47b… lmata 33
f7eb47b… lmata 34 This will create a configuration file, optionally add examples, a GitHub Action workflow and a first test example.spec.ts. You can now jump directly to writing assertions section.
f7eb47b… lmata 35
f7eb47b… lmata 36 ### Manually
f7eb47b… lmata 37
f7eb47b… lmata 38 Add dependency and install browsers.
f7eb47b… lmata 39
f7eb47b… lmata 40 ```Shell
f7eb47b… lmata 41 npm i -D @playwright/test
f7eb47b… lmata 42 # install supported browsers
f7eb47b… lmata 43 npx playwright install
f7eb47b… lmata 44 ```
f7eb47b… lmata 45
f7eb47b… lmata 46 You can optionally install only selected browsers, see [install browsers](https://playwright.dev/docs/cli#install-browsers) for more details. Or you can install no browsers at all and use existing [browser channels](https://playwright.dev/docs/browsers).
f7eb47b… lmata 47
f7eb47b… lmata 48 * [Getting started](https://playwright.dev/docs/intro)
f7eb47b… lmata 49 * [API reference](https://playwright.dev/docs/api/class-playwright)
f7eb47b… lmata 50
f7eb47b… lmata 51 ## Capabilities
f7eb47b… lmata 52
f7eb47b… lmata 53 ### Resilient • No flaky tests
f7eb47b… lmata 54
f7eb47b… lmata 55 **Auto-wait**. Playwright waits for elements to be actionable prior to performing actions. It also has a rich set of introspection events. The combination of the two eliminates the need for artificial timeouts - a primary cause of flaky tests.
f7eb47b… lmata 56
f7eb47b… lmata 57 **Web-first assertions**. Playwright assertions are created specifically for the dynamic web. Checks are automatically retried until the necessary conditions are met.
f7eb47b… lmata 58
f7eb47b… lmata 59 **Tracing**. Configure test retry strategy, capture execution trace, videos and screenshots to eliminate flakes.
f7eb47b… lmata 60
f7eb47b… lmata 61 ### No trade-offs • No limits
f7eb47b… lmata 62
f7eb47b… lmata 63 Browsers run web content belonging to different origins in different processes. Playwright is aligned with the architecture of the modern browsers and runs tests out-of-process. This makes Playwright free of the typical in-process test runner limitations.
f7eb47b… lmata 64
f7eb47b… lmata 65 **Multiple everything**. Test scenarios that span multiple tabs, multiple origins and multiple users. Create scenarios with different contexts for different users and run them against your server, all in one test.
f7eb47b… lmata 66
f7eb47b… lmata 67 **Trusted events**. Hover elements, interact with dynamic controls and produce trusted events. Playwright uses real browser input pipeline indistinguishable from the real user.
f7eb47b… lmata 68
f7eb47b… lmata 69 Test frames, pierce Shadow DOM. Playwright selectors pierce shadow DOM and allow entering frames seamlessly.
f7eb47b… lmata 70
f7eb47b… lmata 71 ### Full isolation • Fast execution
f7eb47b… lmata 72
f7eb47b… lmata 73 **Browser contexts**. Playwright creates a browser context for each test. Browser context is equivalent to a brand new browser profile. This delivers full test isolation with zero overhead. Creating a new browser context only takes a handful of milliseconds.
f7eb47b… lmata 74
f7eb47b… lmata 75 **Log in once**. Save the authentication state of the context and reuse it in all the tests. This bypasses repetitive log-in operations in each test, yet delivers full isolation of independent tests.
f7eb47b… lmata 76
f7eb47b… lmata 77 ### Powerful Tooling
f7eb47b… lmata 78
f7eb47b… lmata 79 **[Codegen](https://playwright.dev/docs/codegen)**. Generate tests by recording your actions. Save them into any language.
f7eb47b… lmata 80
f7eb47b… lmata 81 **[Playwright inspector](https://playwright.dev/docs/inspector)**. Inspect page, generate selectors, step through the test execution, see click points and explore execution logs.
f7eb47b… lmata 82
f7eb47b… lmata 83 **[Trace Viewer](https://playwright.dev/docs/trace-viewer)**. Capture all the information to investigate the test failure. Playwright trace contains test execution screencast, live DOM snapshots, action explorer, test source and many more.
f7eb47b… lmata 84
f7eb47b… lmata 85 Looking for Playwright for [TypeScript](https://playwright.dev/docs/intro), [JavaScript](https://playwright.dev/docs/intro), [Python](https://playwright.dev/python/docs/intro), [.NET](https://playwright.dev/dotnet/docs/intro), or [Java](https://playwright.dev/java/docs/intro)?
f7eb47b… lmata 86
f7eb47b… lmata 87 ## Examples
f7eb47b… lmata 88
f7eb47b… lmata 89 To learn how to run these Playwright Test examples, check out our [getting started docs](https://playwright.dev/docs/intro).
f7eb47b… lmata 90
f7eb47b… lmata 91 #### Page screenshot
f7eb47b… lmata 92
f7eb47b… lmata 93 This code snippet navigates to Playwright homepage and saves a screenshot.
f7eb47b… lmata 94
f7eb47b… lmata 95 ```TypeScript
f7eb47b… lmata 96 import { test } from '@playwright/test';
f7eb47b… lmata 97
f7eb47b… lmata 98 test('Page Screenshot', async ({ page }) => {
f7eb47b… lmata 99 await page.goto('https://playwright.dev/');
f7eb47b… lmata 100 await page.screenshot({ path: `example.png` });
f7eb47b… lmata 101 });
f7eb47b… lmata 102 ```
f7eb47b… lmata 103
f7eb47b… lmata 104 #### Mobile and geolocation
f7eb47b… lmata 105
f7eb47b… lmata 106 This snippet emulates Mobile Safari on a device at given geolocation, navigates to maps.google.com, performs the action and takes a screenshot.
f7eb47b… lmata 107
f7eb47b… lmata 108 ```TypeScript
f7eb47b… lmata 109 import { test, devices } from '@playwright/test';
f7eb47b… lmata 110
f7eb47b… lmata 111 test.use({
f7eb47b… lmata 112 ...devices['iPhone 13 Pro'],
f7eb47b… lmata 113 locale: 'en-US',
f7eb47b… lmata 114 geolocation: { longitude: 12.492507, latitude: 41.889938 },
f7eb47b… lmata 115 permissions: ['geolocation'],
f7eb47b… lmata 116 })
f7eb47b… lmata 117
f7eb47b… lmata 118 test('Mobile and geolocation', async ({ page }) => {
f7eb47b… lmata 119 await page.goto('https://maps.google.com');
f7eb47b… lmata 120 await page.getByText('Your location').click();
f7eb47b… lmata 121 await page.waitForRequest(/.*preview\/pwa/);
f7eb47b… lmata 122 await page.screenshot({ path: 'colosseum-iphone.png' });
f7eb47b… lmata 123 });
f7eb47b… lmata 124 ```
f7eb47b… lmata 125
f7eb47b… lmata 126 #### Evaluate in browser context
f7eb47b… lmata 127
f7eb47b… lmata 128 This code snippet navigates to example.com, and executes a script in the page context.
f7eb47b… lmata 129
f7eb47b… lmata 130 ```TypeScript
f7eb47b… lmata 131 import { test } from '@playwright/test';
f7eb47b… lmata 132
f7eb47b… lmata 133 test('Evaluate in browser context', async ({ page }) => {
f7eb47b… lmata 134 await page.goto('https://www.example.com/');
f7eb47b… lmata 135 const dimensions = await page.evaluate(() => {
f7eb47b… lmata 136 return {
f7eb47b… lmata 137 width: document.documentElement.clientWidth,
f7eb47b… lmata 138 height: document.documentElement.clientHeight,
f7eb47b… lmata 139 deviceScaleFactor: window.devicePixelRatio
f7eb47b… lmata 140 }
f7eb47b… lmata 141 });
f7eb47b… lmata 142 console.log(dimensions);
f7eb47b… lmata 143 });
f7eb47b… lmata 144 ```
f7eb47b… lmata 145
f7eb47b… lmata 146 #### Intercept network requests
f7eb47b… lmata 147
f7eb47b… lmata 148 This code snippet sets up request routing for a page to log all network requests.
f7eb47b… lmata 149
f7eb47b… lmata 150 ```TypeScript
f7eb47b… lmata 151 import { test } from '@playwright/test';
f7eb47b… lmata 152
f7eb47b… lmata 153 test('Intercept network requests', async ({ page }) => {
f7eb47b… lmata 154 // Log and continue all network requests
f7eb47b… lmata 155 await page.route('**', route => {
f7eb47b… lmata 156 console.log(route.request().url());
f7eb47b… lmata 157 route.continue();
f7eb47b… lmata 158 });
f7eb47b… lmata 159 await page.goto('http://todomvc.com');
f7eb47b… lmata 160 });
f7eb47b… lmata 161 ```
f7eb47b… lmata 162
f7eb47b… lmata 163 ## Resources
f7eb47b… lmata 164
f7eb47b… lmata 165 * [Documentation](https://playwright.dev)
f7eb47b… lmata 166 * [API reference](https://playwright.dev/docs/api/class-playwright/)
f7eb47b… lmata 167 * [Contribution guide](CONTRIBUTING.md)
f7eb47b… lmata 168 * [Changelog](https://github.com/microsoft/playwright/releases)

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button