1
# 使用 npm
2
npm install playwright
3

4
# 使用 yarn
5
yarn add playwright
6

7
# 使用 pnpm
8
pnpm add playwright

1
npx playwright install

1
# 只安装 Chrome
2
npx playwright install chromium
3

4
# 只安装 Firefox
5
npx playwright install firefox
6

7
# 只安装 Safari
8
npx playwright install webkit

1
{
2
  "compilerOptions": {
3
    "target": "ES2022",
4
    "module": "ESNext",
5
    "moduleResolution": "node",
6
    "allowSyntheticDefaultImports": true,
7
    "esModuleInterop": true,
8
    "forceConsistentCasingInFileNames": true,
9
    "strict": true,
10
    "skipLibCheck": true
11
  }
12
}

1
// 监听对话框
2
page.on('dialog', async (dialog) => {
3
  console.log('对话框消息:', dialog.message());
4

5
  // 接受对话框
6
  await dialog.accept();
7

8
  // 或者拒绝对话框
9
  // await dialog.dismiss();
10

11
  // 对于 prompt 对话框，可以输入内容
12
  // await dialog.accept('输入内容');
13
});
14

15
// 触发对话框
16
await page.evaluate(() => {
17
  alert('测试对话框');
18
});

1
// 选择文件输入框
2
const fileInput = await page.$('input[type="file"]');
3

4
// 上传文件
5
await fileInput.setInputFiles(['path/to/file1.txt', 'path/to/file2.jpg']);
6

7
// 清除文件选择
8
await fileInput.setInputFiles([]);

1
// 拦截所有网络请求
2
await page.route('**/*', async (route, request) => {
3
  console.log('请求 URL:', request.url());
4
  console.log('请求方法:', request.method());
5

6
  // 继续请求
7
  await route.continue();
8

9
  // 或者中止请求
10
  // await route.abort();
11

12
  // 或者修改请求
13
  // await route.continue({
14
  //   url: 'https://example.com',
15
  //   headers: {
16
  //     ...request.headers(),
17
  //     'X-Custom-Header': 'value'
18
  //   }
19
  // });
20
});
21

22
// 访问网站，触发网络请求
23
await page.goto('https://www.xiaohongshu.com/');

1
// 创建浏览器实例
2
const browser = await chromium.launch();
3

4
// 创建第一个上下文
5
const context1 = await browser.newContext();
6
const page1 = await context1.newPage();
7
await page1.goto('https://www.xiaohongshu.com/');
8

9
// 创建第二个上下文
10
const context2 = await browser.newContext();
11
const page2 = await context2.newPage();
12
await page2.goto('https://www.xiaohongshu.com/');
13

14
// 关闭上下文
15
await context1.close();
16
await context2.close();
17

18
// 关闭浏览器
19
await browser.close();

1
// 创建持久化上下文
2
const context = await chromium.launchPersistentContext('./user-data', {
3
  headless: false
4
});
5

6
const page = await context.newPage();
7
await page.goto('https://www.xiaohongshu.com/');
8

9
// 手动登录后，状态会保存在 ./user-data 目录中
10
// 下次启动时会自动保持登录状态
11

12
await context.close();

1
// 创建浏览器上下文
2
const context = await chromium.launch();
3

4
// 创建第一个页面
5
const page1 = await context.newPage();
6
await page1.goto('https://www.xiaohongshu.com/');
7

8
// 创建第二个页面
9
const page2 = await context.newPage();
10
await page2.goto('https://www.baidu.com/');
11

12
// 在页面之间切换
13
await page1.bringToFront();
14
await page1.click('button');
15

16
await page2.bringToFront();
17
await page2.fill('input', 'Playwright');
18

19
// 关闭页面
20
await page1.close();
21
await page2.close();
22

23
// 关闭上下文
24
await context.close();

1
// 执行简单的 JavaScript
2
const title = await page.evaluate(() => {
3
  return document.title;
4
});
5
console.log('页面标题:', title);
6

7
// 传递参数给 evaluate
8
const result = await page.evaluate((value) => {
9
  return value * 2;
10
}, 10);
11
console.log('结果:', result); // 输出 20
12

13
// 操作 DOM
14
await page.evaluate(() => {
15
  document.querySelector('button').click();
16
});

1
try {
2
  await page.goto('https://www.xiaohongshu.com/');
3
  await page.click('button');
4
} catch (error) {
5
  console.error('操作失败:', error);
6
  // 可以在这里添加截图、日志等操作
7
  await page.screenshot({ path: 'error.png' });
8
}