Skip to main content

命令行工具

Playwright 附带了命令行工具。

用法​

npx playwright --help
# 从 `package.json` 脚本运行
{
  "scripts": {
    "help": "playwright --help"
  }
}

安装浏览器​

Playwright 可以安装支持的浏览器。

# 不带参数运行将安装默认浏览器
npx playwright install

您还可以通过提供参数来安装特定的浏览器：

# 安装 WebKit
npx playwright install webkit

查看所有支持的浏览器：

npx playwright install --help

安装系统依赖项​

系统依赖项可以自动安装。这对于 CI 环境很有用。

# 查看命令帮助
npx playwright install-deps

您还可以通过将其作为参数传递来仅安装单个浏览器的依赖项：

npx playwright install-deps chromium

还可以将 install-deps 与 install 结合使用，并通过单个命令安装浏览器和操作系统依赖项。这将为 Chromium 执行这两项操作，但您也可以省略它。

npx playwright install --with-deps chromium

生成代码​

npx playwright codegen wikipedia.org

运行 codegen 并在浏览器中执行操作。Playwright CLI 将为用户交互生成 JavaScript 代码。codegen 将尝试生成弹性的基于文本的选择器。

保留身份验证状态​

运行 codegen 并带有 --save-storage 以在最后保存 cookies 和 localStorage。这对于单独记录身份验证步骤并在以后重用它很有用。

npx playwright codegen --save-storage=auth.json
# 执行身份验证并退出。
# auth.json 将包含存储状态。

使用 --load-storage 运行以使用以前加载的存储。这样，所有 cookies 和 localStorage 都将恢复，使大多数 Web 应用程序处于已验证状态。

npx playwright open --load-storage=auth.json my.web.app
npx playwright codegen --load-storage=auth.json my.web.app
# 在已验证状态下执行操作。

使用自定义设置进行 Codegen​

如果您想在某些非标准设置中使用 codegen（例如，使用 browserContext.route(url, handler[, options])），可以调用 page.pause()，这将打开一个带有 codegen 控件的单独窗口。

const { chromium } = require('playwright');

(async () => {
  // 确保运行有头模式。
  const browser = await chromium.launch({ headless: false });

  // 随心所欲地设置上下文。
  const context = await browser.newContext({ /* 传递任何选项 */ });
  await context.route('**/*', route => route.continue());

  // 暂停页面，并手动开始录制。
  const page = await context.newPage();
  await page.pause();
})();

打开页面​

使用 open，您可以使用 Playwright 捆绑的浏览器浏览网页。Playwright 提供跨平台 WebKit 构建，可用于在 Windows、Linux 和 macOS 上重现 Safari 渲染。

# 在 Chromium 中打开页面
npx playwright open example.com
# 在 WebKit 中打开页面
npx playwright wk example.com

模拟设备​

open 可以从 playwright.devices 列表中模拟移动和平板设备。

# 模拟 iPhone 11。
npx playwright open --device="iPhone 11" wikipedia.org

模拟配色方案和视口大小​

# 模拟屏幕尺寸和配色方案。
npx playwright open --viewport-size=800,600 --color-scheme=dark twitter.com

模拟地理位置、语言和时区​

# 模拟时区、语言和位置
# 页面打开后，点击“我的位置”按钮查看地理位置的实际效果
npx playwright open --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com

检查选择器​

在 open 或 codegen 期间，您可以在任何浏览器的开发者工具控制台中使用以下 API。

playwright.$(selector)​

查询 Playwright 选择器，使用实际的 Playwright 查询引擎，例如：

> playwright.$('.auth-form >> text=Log in');

<button>Log in</button>

playwright.$$(selector)​

与 playwright.$ 相同，但返回所有匹配的元素。

> playwright.$$('li >> text=John')

> [<li>, <li>, <li>, <li>]

playwright.inspect(selector)​

在 Elements 面板中显示元素（如果相应浏览器的 DevTools 支持）。

> playwright.inspect('text=Log in')

playwright.locator(selector)​

使用实际的 Playwright 查询引擎查询 Playwright 元素，例如：

> playwright.locator('.auth-form', { hasText: 'Log in' });

> Locator ()
>   - element: button
>   - elements: [button]

playwright.selector(element)​

为给定元素生成选择器。

> playwright.selector($0)

"div[id="glow-ingress-block"] >> text=/.*Hello.*/"

截图​

# 查看命令帮助
npx playwright screenshot --help
# 页面加载后（'load' 事件触发）等待 3 秒再截图
npx playwright screenshot \
    --device="iPhone 11" \
    --color-scheme=dark \
    --wait-for-timeout=3000 \
    twitter.com twitter-iphone.png
# 捕获全页截图
npx playwright screenshot --full-page en.wikipedia.org wiki-full.png

生成 PDF​

PDF 生成仅在 Headless Chromium 中有效。

# 查看命令帮助
npx playwright pdf https://en.wikipedia.org/wiki/PDF wiki.pdf