MCP 服务器

Playwright

microsoft

浏览器自动化

README

🎭 Playwright

文档 | API 参考

Playwright 是一个 Web 测试和自动化的框架。它允许使用单个 API 测试 Chromium、Firefox 和 WebKit。 Playwright 旨在实现常青、强大、可靠和快速的跨浏览器 Web 自动化。

	Linux	macOS	Windows
Chromium <!-- GEN:chromium-version -->136.0.7103.17<!-- GEN:stop -->	:white_check_mark:	:white_check_mark:	:white_check_mark:
WebKit <!-- GEN:webkit-version -->18.4<!-- GEN:stop -->	:white_check_mark:	:white_check_mark:	:white_check_mark:
Firefox <!-- GEN:firefox-version -->137.0<!-- GEN:stop -->	:white_check_mark:	:white_check_mark:	:white_check_mark:

所有平台上的所有浏览器都支持无头执行。有关详细信息，请查看系统要求。

正在寻找适用于 Python、.NET 或 Java 的 Playwright 吗？

安装

Playwright 拥有自己的端到端测试运行器，我们称之为 Playwright Test。

使用 init 命令

开始使用 Playwright Test 的最简单方法是运行 init 命令。

# 从项目的根目录运行
npm init playwright@latest
# 或创建一个新项目
npm init playwright@latest new-project

这将创建一个配置文件，可以选择添加示例、GitHub Action 工作流程和第一个测试 example.spec.ts。现在您可以直接跳转到编写断言部分。

手动

添加依赖项并安装浏览器。

npm i -D @playwright/test
# 安装支持的浏览器
npx playwright install

您可以选择仅安装选定的浏览器，有关更多详细信息，请参见安装浏览器。或者您可以完全不安装任何浏览器，并使用现有的浏览器通道。

功能

弹性 • 没有不稳定的测试

自动等待。 Playwright 在执行操作之前等待元素变为可操作。它还具有丰富的自省事件集。两者的结合消除了对人为超时的需求 - 这是导致测试不稳定的主要原因。

Web 优先断言。 Playwright 断言是专门为动态 Web 创建的。自动重试检查，直到满足必要条件。

追踪。配置测试重试策略，捕获执行跟踪、视频和屏幕截图，以消除不稳定性。

没有权衡 • 没有限制

浏览器在不同的进程中运行属于不同来源的 Web 内容。 Playwright 与现代浏览器的架构保持一致，并在进程外运行测试。这使得 Playwright 免受典型的进程内测试运行器限制。

多重一切。测试跨越多个选项卡、多个来源和多个用户的场景。为不同的用户创建具有不同上下文的场景，并在一个测试中针对您的服务器运行它们。

受信任的事件。悬停元素、与动态控件交互并生成受信任的事件。 Playwright 使用与真实用户无法区分的真实浏览器输入管道。

测试框架，穿透 Shadow DOM。 Playwright 选择器穿透 shadow DOM 并允许无缝进入框架。

完全隔离 • 快速执行

浏览器上下文。 Playwright 为每个测试创建一个浏览器上下文。浏览器上下文相当于一个全新的浏览器配置文件。这提供了完全的测试隔离，且零开销。创建新的浏览器上下文仅需几毫秒。

一次登录。保存上下文的身份验证状态，并在所有测试中重复使用它。这绕过了每个测试中重复的登录操作，但仍提供了独立测试的完全隔离。

强大的工具

Codegen。通过记录您的操作来生成测试。将它们保存为任何语言。

Playwright inspector。检查页面、生成选择器、逐步执行测试、查看点击点并浏览执行日志。

Trace Viewer。捕获所有信息以调查测试失败。 Playwright 跟踪包含测试执行截屏视频、实时 DOM 快照、操作浏览器、测试源等等。

正在寻找适用于 TypeScript, JavaScript, Python, .NET, 或 Java 的 Playwright 吗？

示例

要了解如何运行这些 Playwright Test 示例，请查看我们的入门文档。

页面截图

此代码段导航到 Playwright 主页并保存屏幕截图。

import { test } from '@playwright/test';

test('Page Screenshot', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.screenshot({ path: `example.png` });
});

移动设备和地理位置

此代码段在给定地理位置的设备上模拟 Mobile Safari，导航到 maps.google.com，执行操作并截取屏幕截图。

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' });
});

在浏览器上下文中评估

此代码段导航到 example.com，并在页面上下文中执行脚本。

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);
});

拦截网络请求

此代码段为页面设置请求路由以记录所有网络请求。

import { test } from '@playwright/test';

test('Intercept network requests', async ({ page }) => {
  // 记录并继续所有网络请求
  await page.route('**', route => {
    console.log(route.request().url());
    route.continue();
  });
  await page.goto('http://todomvc.com');
});