aacb45156b
- Install Jest for unit testing with React Testing Library - Install Playwright for end-to-end testing - Configure Jest with proper TypeScript support and module mapping - Create test setup files and utilities for both unit and e2e tests Components: * Jest configuration with coverage thresholds * Playwright configuration with browser automation * Unit tests for LoginForm, AuthContext, and useSocketIO hook * E2E tests for authentication, dashboard, and agents workflows * GitHub Actions workflow for automated testing * Mock data and API utilities for consistent testing * Test documentation with best practices Testing features: - Unit tests with 70% coverage threshold - E2E tests with API mocking and user journey testing - CI/CD integration for automated test runs - Cross-browser testing support with Playwright - Authentication system testing end-to-end 🚀 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
169 lines
7.9 KiB
Markdown
169 lines
7.9 KiB
Markdown
# 🎭 Playwright
|
|
|
|
[](https://www.npmjs.com/package/playwright) <!-- GEN:chromium-version-badge -->[](https://www.chromium.org/Home)<!-- GEN:stop --> <!-- GEN:firefox-version-badge -->[](https://www.mozilla.org/en-US/firefox/new/)<!-- GEN:stop --> <!-- GEN:webkit-version-badge -->[](https://webkit.org/)<!-- GEN:stop --> [](https://aka.ms/playwright/discord)
|
|
|
|
## [Documentation](https://playwright.dev) | [API reference](https://playwright.dev/docs/api/class-playwright)
|
|
|
|
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**.
|
|
|
|
| | Linux | macOS | Windows |
|
|
| :--- | :---: | :---: | :---: |
|
|
| Chromium <!-- GEN:chromium-version -->139.0.7258.5<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
|
|
| WebKit <!-- GEN:webkit-version -->26.0<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
|
|
| Firefox <!-- GEN:firefox-version -->140.0.2<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
|
|
|
|
Headless execution is supported for all browsers on all platforms. Check out [system requirements](https://playwright.dev/docs/intro#system-requirements) for details.
|
|
|
|
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)?
|
|
|
|
## Installation
|
|
|
|
Playwright has its own test runner for end-to-end tests, we call it Playwright Test.
|
|
|
|
### Using init command
|
|
|
|
The easiest way to get started with Playwright Test is to run the init command.
|
|
|
|
```Shell
|
|
# Run from your project's root directory
|
|
npm init playwright@latest
|
|
# Or create a new project
|
|
npm init playwright@latest new-project
|
|
```
|
|
|
|
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.
|
|
|
|
### Manually
|
|
|
|
Add dependency and install browsers.
|
|
|
|
```Shell
|
|
npm i -D @playwright/test
|
|
# install supported browsers
|
|
npx playwright install
|
|
```
|
|
|
|
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).
|
|
|
|
* [Getting started](https://playwright.dev/docs/intro)
|
|
* [API reference](https://playwright.dev/docs/api/class-playwright)
|
|
|
|
## Capabilities
|
|
|
|
### Resilient • No flaky tests
|
|
|
|
**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.
|
|
|
|
**Web-first assertions**. Playwright assertions are created specifically for the dynamic web. Checks are automatically retried until the necessary conditions are met.
|
|
|
|
**Tracing**. Configure test retry strategy, capture execution trace, videos and screenshots to eliminate flakes.
|
|
|
|
### No trade-offs • No limits
|
|
|
|
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.
|
|
|
|
**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.
|
|
|
|
**Trusted events**. Hover elements, interact with dynamic controls and produce trusted events. Playwright uses real browser input pipeline indistinguishable from the real user.
|
|
|
|
Test frames, pierce Shadow DOM. Playwright selectors pierce shadow DOM and allow entering frames seamlessly.
|
|
|
|
### Full isolation • Fast execution
|
|
|
|
**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.
|
|
|
|
**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.
|
|
|
|
### Powerful Tooling
|
|
|
|
**[Codegen](https://playwright.dev/docs/codegen)**. Generate tests by recording your actions. Save them into any language.
|
|
|
|
**[Playwright inspector](https://playwright.dev/docs/inspector)**. Inspect page, generate selectors, step through the test execution, see click points and explore execution logs.
|
|
|
|
**[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.
|
|
|
|
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)?
|
|
|
|
## Examples
|
|
|
|
To learn how to run these Playwright Test examples, check out our [getting started docs](https://playwright.dev/docs/intro).
|
|
|
|
#### Page screenshot
|
|
|
|
This code snippet navigates to Playwright homepage and saves a screenshot.
|
|
|
|
```TypeScript
|
|
import { test } from '@playwright/test';
|
|
|
|
test('Page Screenshot', async ({ page }) => {
|
|
await page.goto('https://playwright.dev/');
|
|
await page.screenshot({ path: `example.png` });
|
|
});
|
|
```
|
|
|
|
#### Mobile and geolocation
|
|
|
|
This snippet emulates Mobile Safari on a device at given geolocation, navigates to maps.google.com, performs the action and takes a screenshot.
|
|
|
|
```TypeScript
|
|
import { test, devices } from '@playwright/test';
|
|
|
|
test.use({
|
|
...devices['iPhone 13 Pro'],
|
|
locale: 'en-US',
|
|
geolocation: { longitude: 12.492507, latitude: 41.889938 },
|
|
permissions: ['geolocation'],
|
|
})
|
|
|
|
test('Mobile and geolocation', async ({ page }) => {
|
|
await page.goto('https://maps.google.com');
|
|
await page.getByText('Your location').click();
|
|
await page.waitForRequest(/.*preview\/pwa/);
|
|
await page.screenshot({ path: 'colosseum-iphone.png' });
|
|
});
|
|
```
|
|
|
|
#### Evaluate in browser context
|
|
|
|
This code snippet navigates to example.com, and executes a script in the page context.
|
|
|
|
```TypeScript
|
|
import { test } from '@playwright/test';
|
|
|
|
test('Evaluate in browser context', async ({ page }) => {
|
|
await page.goto('https://www.example.com/');
|
|
const dimensions = await page.evaluate(() => {
|
|
return {
|
|
width: document.documentElement.clientWidth,
|
|
height: document.documentElement.clientHeight,
|
|
deviceScaleFactor: window.devicePixelRatio
|
|
}
|
|
});
|
|
console.log(dimensions);
|
|
});
|
|
```
|
|
|
|
#### Intercept network requests
|
|
|
|
This code snippet sets up request routing for a page to log all network requests.
|
|
|
|
```TypeScript
|
|
import { test } from '@playwright/test';
|
|
|
|
test('Intercept network requests', async ({ page }) => {
|
|
// Log and continue all network requests
|
|
await page.route('**', route => {
|
|
console.log(route.request().url());
|
|
route.continue();
|
|
});
|
|
await page.goto('http://todomvc.com');
|
|
});
|
|
```
|
|
|
|
## Resources
|
|
|
|
* [Documentation](https://playwright.dev)
|
|
* [API reference](https://playwright.dev/docs/api/class-playwright/)
|
|
* [Contribution guide](CONTRIBUTING.md)
|
|
* [Changelog](https://github.com/microsoft/playwright/releases)
|