Back to Details

testing-ui

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Testing

UI测试

Browser-based UI testing with Playwright, Puppeteer, Cypress, and accessibility tools.
使用Playwright、Puppeteer、Cypress和可访问性工具开展基于浏览器的UI测试。

Install Playwright

安装Playwright

bash
undefined
bash
undefined

Install Playwright and browsers

Install Playwright and browsers

npm init playwright@latest npx playwright install --with-deps
npm init playwright@latest npx playwright install --with-deps

Install specific browser only

Install specific browser only

npx playwright install chromium
undefined
npx playwright install chromium
undefined

Run Playwright tests

运行Playwright测试

bash
undefined
bash
undefined

Run all tests

Run all tests

npx playwright test
npx playwright test

Run specific test file

Run specific test file

npx playwright test tests/login.spec.ts
npx playwright test tests/login.spec.ts

Run in headed mode (visible browser)

Run in headed mode (visible browser)

npx playwright test --headed
npx playwright test --headed

Run in specific browser

Run in specific browser

npx playwright test --project=chromium npx playwright test --project=firefox npx playwright test --project=webkit
npx playwright test --project=chromium npx playwright test --project=firefox npx playwright test --project=webkit

Run with debug inspector

Run with debug inspector

npx playwright test --debug
undefined
npx playwright test --debug
undefined

Generate tests from URL

从URL生成测试用例

bash
undefined
bash
undefined

Open codegen to record interactions

Open codegen to record interactions

npx playwright codegen https://example.com
npx playwright codegen https://example.com

Save generated test to a file

Save generated test to a file

npx playwright codegen --output tests/generated.spec.ts https://example.com
npx playwright codegen --output tests/generated.spec.ts https://example.com

Codegen with specific viewport

Codegen with specific viewport

npx playwright codegen --viewport-size=1280,720 https://example.com
undefined
npx playwright codegen --viewport-size=1280,720 https://example.com
undefined

Screenshot page

页面截图

bash
undefined
bash
undefined

Take a screenshot of a URL

Take a screenshot of a URL

npx playwright screenshot --full-page https://example.com screenshot.png
npx playwright screenshot --full-page https://example.com screenshot.png

Screenshot with specific viewport

Screenshot with specific viewport

npx playwright screenshot --viewport-size=1280,720 https://example.com screenshot.png
undefined
npx playwright screenshot --viewport-size=1280,720 https://example.com screenshot.png
undefined

Visual regression

视觉回归测试

bash
undefined
bash
undefined

Run Playwright tests with snapshot comparison

Run Playwright tests with snapshot comparison

npx playwright test --update-snapshots
npx playwright test --update-snapshots

Compare screenshots (expects toHaveScreenshot in tests)

Compare screenshots (expects toHaveScreenshot in tests)

npx playwright test tests/visual.spec.ts
npx playwright test tests/visual.spec.ts

Show visual diff report

Show visual diff report

npx playwright show-report
undefined
npx playwright show-report
undefined

Run Cypress tests

运行Cypress测试

bash
undefined
bash
undefined

Open Cypress interactive runner

Open Cypress interactive runner

npx cypress open
npx cypress open

Run Cypress headless

Run Cypress headless

npx cypress run
npx cypress run

Run specific spec

Run specific spec

npx cypress run --spec cypress/e2e/login.cy.ts
npx cypress run --spec cypress/e2e/login.cy.ts

Run in specific browser

Run in specific browser

npx cypress run --browser chrome
undefined
npx cypress run --browser chrome
undefined

Accessibility audit with axe-core

使用axe-core进行可访问性审计

bash
undefined
bash
undefined

Install axe-core CLI

Install axe-core CLI

npm install -g @axe-core/cli
npm install -g @axe-core/cli

Run accessibility audit on a URL

Run accessibility audit on a URL

npx @axe-core/cli https://example.com
npx @axe-core/cli https://example.com

Audit with specific rules

Audit with specific rules

npx @axe-core/cli https://example.com --rules wcag2a,wcag2aa
npx @axe-core/cli https://example.com --rules wcag2a,wcag2aa

Playwright + axe-core (requires @axe-core/playwright)

Playwright + axe-core (requires @axe-core/playwright)

npx playwright test tests/accessibility.spec.ts
undefined
npx playwright test tests/accessibility.spec.ts
undefined