8.4 Playwright安装与配置

---

1. 为什么要学这个?

你做了一个完美的网站，在你的 27 寸 4K 显示器上美得像艺术品。 但你不知道的是：

• 用 iPhone 的用户，因为 Safari 兼容性问题，看到的是一片白屏。
• 用小屏安卓手机的用户，因为按钮被广告挡住了，根本点不到“付款”。

单纯靠你一个人的一双手，就算点断了手指，也测不完这几十种屏幕和浏览器的组合。 你需要一支机器人军团 (Playwright)。只要你一声令下，它们就会在 100 种不同的环境下同时打开你的网站，寻找任何可能的裂缝。

---

2. 核心概念：Playwright (剧作家)

Playwright 是微软开源的自动化测试工具。它不仅是测试工具，更是浏览器操纵者。

为什么它也是“三件套”之一？

1. 快：它直接通过底层协议控制浏览器，而不是像老前辈 Selenium 那样慢吞吞地发指令。
2. 稳 (自动等待)：
   • Selenium: “点按钮！” -> 按钮还没渲染出来 -> 报错崩溃。
   • Playwright: “点按钮” -> 没出来？我等你 5 秒 -> 出来了 -> 点击成功。
3. 全：一个命令，同时控制 Chrome (电脑), WebKit (Safari/iPhone), Firefox。

---

3. 实战配置：初始化军团

第一步：在项目根目录下运行安装命令

pnpm create playwright

(如果问你要不要安装浏览器，选 True)

第二步：认识指挥部文件 (playwright.config.ts) 这个文件决定了机器人怎么工作。不仅是代码，它是你的作战方针。

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests', // 机器人的任务书都在这个文件夹里
  fullyParallel: true, // 全军出击 (并行测试，速度最快)
  
  use: {
    baseURL: 'http://localhost:3000', // 即使你不写 http，机器人也知道去这找网页
    trace: 'on-first-retry', // ⚠️ 关键：如果测试失败了，把录屏和日志存档给我看
  },

  projects: [
    // 这里的每一个 project，就是一个独立的机器人分队
    { name: 'chrome', use: { ...devices['Desktop Chrome'] } }, // 电脑分队
    { name: 'iphone', use: { ...devices['iPhone 12'] } },      // 手机分队
    { name: 'safari', use: { ...devices['Desktop Safari'] } }, // 苹果分队
  ],
});

---

4. 真实案例

---

5. 本章小结

1. 一键安装：pnpm create playwright 初始化所有。
2. 多端并行：在 Config 里配置 projects，一次运行，覆盖电脑、手机、Safari。
3. 自动等待：Playwright 最伟大的发明，也是它比 Selenium 稳的核心原因。