完全跑通1.0版本
This commit is contained in:
318
frontend/node_modules/playwright/README.md
generated
vendored
Normal file
318
frontend/node_modules/playwright/README.md
generated
vendored
Normal file
@@ -0,0 +1,318 @@
|
||||
# 🎭 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 automation and testing. It drives Chromium, Firefox, and WebKit with a single API — in your tests, in your scripts, and as a tool for AI agents.
|
||||
|
||||
## Get Started
|
||||
|
||||
Choose the path that fits your workflow:
|
||||
|
||||
| | Best for | Install |
|
||||
|---|---|---|
|
||||
| **[Playwright Test](#playwright-test)** | End-to-end testing | `npm init playwright@latest` |
|
||||
| **[Playwright CLI](#playwright-cli)** | Coding agents (Claude Code, Copilot) | `npm i -g @playwright/cli@latest` |
|
||||
| **[Playwright MCP](#playwright-mcp)** | AI agents and LLM-driven automation | `npx @playwright/mcp@latest` |
|
||||
| **[Playwright Library](#playwright-library)** | Browser automation scripts | `npm i playwright` |
|
||||
| **[VS Code Extension](#vs-code-extension)** | Test authoring and debugging in VS Code | [Install from Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) |
|
||||
|
||||
---
|
||||
|
||||
## Playwright Test
|
||||
|
||||
Playwright Test is a full-featured test runner built for end-to-end testing. It runs tests across Chromium, Firefox, and WebKit with full browser isolation, auto-waiting, and web-first assertions.
|
||||
|
||||
### Install
|
||||
|
||||
```bash
|
||||
npm init playwright@latest
|
||||
```
|
||||
|
||||
Or add manually:
|
||||
|
||||
```bash
|
||||
npm i -D @playwright/test
|
||||
npx playwright install
|
||||
```
|
||||
|
||||
### Write a test
|
||||
|
||||
```TypeScript
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test('has title', async ({ page }) => {
|
||||
await page.goto('https://playwright.dev/');
|
||||
await expect(page).toHaveTitle(/Playwright/);
|
||||
});
|
||||
|
||||
test('get started link', async ({ page }) => {
|
||||
await page.goto('https://playwright.dev/');
|
||||
await page.getByRole('link', { name: 'Get started' }).click();
|
||||
await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
|
||||
});
|
||||
```
|
||||
|
||||
### Run tests
|
||||
|
||||
```bash
|
||||
npx playwright test
|
||||
```
|
||||
|
||||
Tests run in parallel across all configured browsers, in headless mode by default. Each test gets a fresh browser context — full isolation with near-zero overhead.
|
||||
|
||||
### Key capabilities
|
||||
|
||||
**Auto-wait and web-first assertions.** No artificial timeouts. Playwright waits for elements to be actionable, and assertions automatically retry until conditions are met.
|
||||
|
||||
**Locators.** Find elements with resilient locators that mirror how users see the page:
|
||||
|
||||
```TypeScript
|
||||
page.getByRole('button', { name: 'Submit' })
|
||||
page.getByLabel('Email')
|
||||
page.getByPlaceholder('Search...')
|
||||
page.getByTestId('login-form')
|
||||
```
|
||||
|
||||
**Test isolation.** Each test runs in its own browser context — equivalent to a fresh browser profile. Save authentication state once and reuse it across tests:
|
||||
|
||||
```TypeScript
|
||||
// Save state after login
|
||||
await page.context().storageState({ path: 'auth.json' });
|
||||
|
||||
// Reuse in other tests
|
||||
test.use({ storageState: 'auth.json' });
|
||||
```
|
||||
|
||||
**Tracing.** Capture execution traces, screenshots, and videos on failure. Inspect every action, DOM snapshot, network request, and console message in the [Trace Viewer](https://playwright.dev/docs/trace-viewer):
|
||||
|
||||
```TypeScript
|
||||
// playwright.config.ts
|
||||
export default defineConfig({
|
||||
use: {
|
||||
trace: 'on-first-retry',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
```bash
|
||||
npx playwright show-trace trace.zip
|
||||
```
|
||||
|
||||
<!-- TODO: screenshot of trace viewer -->
|
||||
|
||||
**Parallelism.** Tests run in parallel by default across all configured browsers.
|
||||
|
||||
[Full testing documentation](https://playwright.dev/docs/intro)
|
||||
|
||||
---
|
||||
|
||||
## Playwright CLI
|
||||
|
||||
[Playwright CLI](https://github.com/microsoft/playwright-cli) is a command-line interface for browser automation designed for coding agents. It's more token-efficient than MCP — commands avoid loading large tool schemas and accessibility trees into the model context.
|
||||
|
||||
### Install
|
||||
|
||||
```bash
|
||||
npm install -g @playwright/cli@latest
|
||||
```
|
||||
|
||||
Optionally install skills for richer agent integration:
|
||||
|
||||
```bash
|
||||
playwright-cli install --skills
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
Point your coding agent at a task:
|
||||
|
||||
```
|
||||
Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
|
||||
Take screenshots for all successful and failing scenarios.
|
||||
```
|
||||
|
||||
Or run commands directly:
|
||||
|
||||
```bash
|
||||
playwright-cli open https://demo.playwright.dev/todomvc/ --headed
|
||||
playwright-cli type "Buy groceries"
|
||||
playwright-cli press Enter
|
||||
playwright-cli screenshot
|
||||
```
|
||||
|
||||
### Session monitoring
|
||||
|
||||
Use `playwright-cli show` to open a visual dashboard with live screencast previews of all running browser sessions. Click any session to zoom in and take remote control.
|
||||
|
||||
```bash
|
||||
playwright-cli show
|
||||
```
|
||||
|
||||
<!-- TODO: screenshot of playwright-cli show dashboard -->
|
||||
|
||||
[Full CLI documentation](https://playwright.dev/docs/cli-agent) | [GitHub](https://github.com/microsoft/playwright-cli)
|
||||
|
||||
---
|
||||
|
||||
## Playwright MCP
|
||||
|
||||
The [Playwright MCP server](https://github.com/microsoft/playwright-mcp) gives AI agents full browser control through the [Model Context Protocol](https://modelcontextprotocol.io). Agents interact with pages using structured accessibility snapshots — no vision models or screenshots required.
|
||||
|
||||
### Setup
|
||||
|
||||
Add to your MCP client (VS Code, Cursor, Claude Desktop, Windsurf, etc.):
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"playwright": {
|
||||
"command": "npx",
|
||||
"args": ["@playwright/mcp@latest"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**One-click install for VS Code:**
|
||||
|
||||
[<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20MCP%20Server&color=0098FF" alt="Install in VS Code" />](https://insiders.vscode.dev/redirect?url=vscode%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D)
|
||||
|
||||
**For Claude Code:**
|
||||
|
||||
```bash
|
||||
claude mcp add playwright npx @playwright/mcp@latest
|
||||
```
|
||||
|
||||
### How it works
|
||||
|
||||
Ask your AI assistant to interact with any web page:
|
||||
|
||||
```
|
||||
Navigate to https://demo.playwright.dev/todomvc and add a few todo items.
|
||||
```
|
||||
|
||||
The agent sees the page as a structured accessibility tree:
|
||||
|
||||
```
|
||||
- heading "todos" [level=1]
|
||||
- textbox "What needs to be done?" [ref=e5]
|
||||
- listitem:
|
||||
- checkbox "Toggle Todo" [ref=e10]
|
||||
- text: "Buy groceries"
|
||||
```
|
||||
|
||||
It uses element refs like `e5` and `e10` to click, type, and interact — deterministically and without visual ambiguity. Tools cover navigation, form filling, screenshots, network mocking, storage management, and more.
|
||||
|
||||
[Full MCP documentation](https://playwright.dev/docs/mcp) | [GitHub](https://github.com/microsoft/playwright-mcp)
|
||||
|
||||
---
|
||||
|
||||
## Playwright Library
|
||||
|
||||
Use `playwright` as a library for browser automation scripts — web scraping, PDF generation, screenshot capture, and any workflow that needs programmatic browser control without a test runner.
|
||||
|
||||
### Install
|
||||
|
||||
```bash
|
||||
npm i playwright
|
||||
```
|
||||
|
||||
### Examples
|
||||
|
||||
**Take a screenshot:**
|
||||
|
||||
```TypeScript
|
||||
import { chromium } from 'playwright';
|
||||
|
||||
const browser = await chromium.launch();
|
||||
const page = await browser.newPage();
|
||||
await page.goto('https://playwright.dev/');
|
||||
await page.screenshot({ path: 'screenshot.png' });
|
||||
await browser.close();
|
||||
```
|
||||
|
||||
**Generate a PDF:**
|
||||
|
||||
```TypeScript
|
||||
import { chromium } from 'playwright';
|
||||
|
||||
const browser = await chromium.launch();
|
||||
const page = await browser.newPage();
|
||||
await page.goto('https://playwright.dev/');
|
||||
await page.pdf({ path: 'page.pdf', format: 'A4' });
|
||||
await browser.close();
|
||||
```
|
||||
|
||||
**Emulate a mobile device:**
|
||||
|
||||
```TypeScript
|
||||
import { chromium, devices } from 'playwright';
|
||||
|
||||
const browser = await chromium.launch();
|
||||
const context = await browser.newContext(devices['iPhone 15']);
|
||||
const page = await context.newPage();
|
||||
await page.goto('https://playwright.dev/');
|
||||
await page.screenshot({ path: 'mobile.png' });
|
||||
await browser.close();
|
||||
```
|
||||
|
||||
**Intercept network requests:**
|
||||
|
||||
```TypeScript
|
||||
import { chromium } from 'playwright';
|
||||
|
||||
const browser = await chromium.launch();
|
||||
const page = await browser.newPage();
|
||||
await page.route('**/*.{png,jpg,jpeg}', route => route.abort());
|
||||
await page.goto('https://playwright.dev/');
|
||||
await browser.close();
|
||||
```
|
||||
|
||||
[Library documentation](https://playwright.dev/docs/library) | [API reference](https://playwright.dev/docs/api/class-playwright)
|
||||
|
||||
---
|
||||
|
||||
## VS Code Extension
|
||||
|
||||
The [Playwright VS Code extension](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) brings test running, debugging, and code generation directly into your editor.
|
||||
|
||||
<!-- TODO: hero screenshot of VS Code with Playwright sidebar -->
|
||||
|
||||
**Run and debug tests** from the editor with a single click. Set breakpoints, inspect variables, and step through test execution with a live browser view.
|
||||
|
||||
**Generate tests with CodeGen.** Click "Record new" to open a browser — navigate and interact with your app while Playwright writes the test code for you.
|
||||
|
||||
**Pick locators.** Hover over any element in the browser to see the best available locator, then click to copy it to your clipboard.
|
||||
|
||||
**Trace Viewer integration.** Enable "Show Trace Viewer" in the sidebar to get a full execution trace after each test run — DOM snapshots, network requests, console logs, and screenshots at every step.
|
||||
|
||||
[Install the extension](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) | [VS Code guide](https://playwright.dev/docs/getting-started-vscode)
|
||||
|
||||
---
|
||||
|
||||
## Cross-Browser Support
|
||||
|
||||
| | Linux | macOS | Windows |
|
||||
| :--- | :---: | :---: | :---: |
|
||||
| Chromium<sup>1</sup> <!-- GEN:chromium-version -->148.0.7778.96<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
|
||||
| WebKit <!-- GEN:webkit-version -->26.4<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
|
||||
| Firefox <!-- GEN:firefox-version -->150.0.2<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
|
||||
|
||||
Headless and headed execution on all platforms. <sup>1</sup> Uses [Chrome for Testing](https://developer.chrome.com/blog/chrome-for-testing) by default.
|
||||
|
||||
## Other Languages
|
||||
|
||||
Playwright is also available for [Python](https://playwright.dev/python/docs/intro), [.NET](https://playwright.dev/dotnet/docs/intro), and [Java](https://playwright.dev/java/docs/intro).
|
||||
|
||||
## Resources
|
||||
|
||||
* [Documentation](https://playwright.dev)
|
||||
* [API reference](https://playwright.dev/docs/api/class-playwright)
|
||||
* [MCP server](https://github.com/microsoft/playwright-mcp)
|
||||
* [CLI for coding agents](https://github.com/microsoft/playwright-cli)
|
||||
* [VS Code extension](https://github.com/microsoft/playwright-vscode)
|
||||
* [Contribution guide](CONTRIBUTING.md)
|
||||
* [Changelog](https://github.com/microsoft/playwright/releases)
|
||||
* [Discord](https://aka.ms/playwright/discord)
|
||||
Reference in New Issue
Block a user