playwright的基本使用

# 快速入门

# 安装

yarn add -D playwright

1
2

# 使用

// [chromium、firefox、webkit]
const { chromium } = require("playwright");

(async () => {
  // 启动浏览器,默认是无痕浏览的
  const browser = await chromium.launch();
  // 新建页面
  const page = await browser.newPage();
  // 页面跳转地址
  await page.goto("http://whatsmyuseragent.org/");
  // 截图
  await page.screenshot({ path: `example.png` });
  // 关闭浏览器
  await browser.close();
})();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 基本操作

// 启动浏览器,默认是无痕浏览的
const browser = await chromium.launch({
    headless: false
});
// 新建页面
const context = await browser.newContext();
// 新建页面
const page = await context.newPage();
// 跳转地址
await page.goto('http://example.com');
// 等待1秒
await page.waitForTimeout(1000)
// 等待元素加载完成
await page.waitForSelector('#username')
// 输入用户名
await page.locator('#username').fill('mrcdh')
// 点击操作
await page.locator('#username').getByRole('img').click();
// 截图
await page.screenshot({ path: 'example.png' });
// 生成 PDF（仅 Chromium 支持）
await page.pdf({
    path: 'example.pdf',           // 保存路径
    format: 'A4',                  // 纸张格式：A4、Letter 等
    margin: { top: '1cm', right: '1cm', bottom: '1cm', left: '1cm' }, // 页边距
    printBackground: true,         // 打印背景颜色和图像
    landscape: false,              // 是否横向
    waitUntil: 'networkidle',      // 等待页面在家完成
    timeout： 60000,            // 超时时间
});
// 关闭上下文
await context.close();
// 关闭浏览器
await browser.close();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 常用功能

# 定位元素

getByRole:通过元素的 ARIA 角色（role）、名称（name）和其他属性定位元素。适用场景：当元素具有明确的语义角色时（如按钮、链接、输入框、菜单等）。
getByText:通过元素的可见文本内容定位元素。当元素的文本是唯一标识时（如按钮文本、标题、标签等）。
locator:通过 CSS 选择器、XPath 或其他 Playwright 特有的选择器语法定位元素。当元素没有明确的文本、角色或其他语义特征时，使用 CSS 或 XPath 进行精确匹配。

// 最佳：通过角色和名称定位
await page.getByRole('button', { name: 'Login' }).click();

// 其次：通过文本定位
await page.getByText('Login').click();

// 最后：通过 CSS 定位
await page.locator('button.login-button').click();

1
2
3
4
5
6
7
8

# 关闭无痕浏览模式

// @ts-check
const { chromium } = require("playwright");
const path = require("path");

(async () => {
  // 使用 launchPersistentContext 即可，需提供一个文件夹存放 cookie 等数据
  const browser = await chromium.launchPersistentContext(
    path.resolve("./userData"),
    {
      headless: false,
    }
  );
  const [page] = browser.pages();
})();

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 保存用户信息启动

const userDataDir = path.join(__dirname, 'userData');
browser = await chromium.launchPersistentContext(userDataDir, {
    executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
    channel: 'msedge',
    headless: false,
    // 忽略自动化检测
    ignoreDefaultArgs: ['--enable-automation'],
});

1
2
3
4
5
6
7
8

# 页面执行脚本

page.evaluate(pageFunction[, arg])

# 鼠标操作

# 页面滚动到指定位置

page.mouse.wheel(x, y); // 页面滚动到x(横坐标), y(垂直坐标)位置

# 调试

# 无头模式
chromium.launch(headless=False, slow_mo=100)

# 打开开发工具
chromium.launch(devtools=True)

1
2
3
4
5

# 终端命令使用

# 安装浏览器
playwright install

# 生成代码
playwright codegen wikipedia.org

# 保存认证状态
playwright codegen --save-storage=auth.json
playwright open --load-storage=auth.json my.web.app

1
2
3
4
5
6
7
8
9

#playwright

上次更新: 2025/07/15, 10:52:11

← ApiCloud-AWM开发常见问题 puppeteer的基本使用技巧→