Day 01 - Getting Started with Playwright

今日目标

理解 Playwright 解决什么问题。
完成第一个项目初始化。
能运行官方示例测试。

学习时间安排（60–120 分钟）

时间	模块	做什么
0-20 分钟	核心概念与词汇	读概念表和术语，重点记当天安装、运行时会直接出现的高频词。
20-45 分钟	官方文档阅读	按学习材料清单阅读，不逐字翻译，只抓安装、配置、运行的主流程。
45-75 分钟	实操练习	完成实操步骤，跑通 `npm init playwright@latest` 和第一个测试。
75-105 分钟	示例代码改写	把生成的 example 测试改写成自己的页面，补充注释。
105-120 分钟	复盘与作业	完成今日问题和自检清单，标记卡住的命令。

核心概念与词汇

English	中文	场景用法
Playwright	Playwright 自动化测试框架	Use it when you describe the framework you use for browser automation and E2E testing.
Playwright Test	Playwright 官方测试运行器	Use it when you explain how tests are organized, filtered, and executed.
browser binaries	浏览器二进制文件	Use it when you explain why `npx playwright install` downloads browsers separately.
headless	无头模式	Use it when you describe running tests without a visible browser window, usually in CI.
headed	有头模式	Use it when you need to watch the browser window while debugging.
test runner	测试运行器	Use it when you compare Playwright Test with Jest, Mocha, or Selenium.
`playwright.config.ts`	项目配置文件	Use it when you explain where browsers, timeouts, retries, and reporters are configured.
`@playwright/test`	Playwright 测试 npm 包	Use it when you explain the package that provides `test`, `expect`, and the CLI.
CLI	命令行接口	Use it when you describe commands like `npx playwright test` and `codegen`.
Chromium / Firefox / WebKit	三大浏览器内核	Use it when you explain cross-browser coverage and why WebKit matters for Safari users.
HTML report	HTML 测试报告	Use it when you explain how to share test results with the team.
trace	测试执行轨迹	Use it when you explain how to debug failures step by step after a run.

学习材料

必读：[Installation](https://playwright.dev/docs/intro)（Installation 与 Getting started 部分）
必读：[Running and debugging tests](https://playwright.dev/docs/running-tests) 的基础部分
选读：[Playwright 是什么](https://playwright.dev/) 首页的能力介绍

重点理解

Playwright Test 是官方测试运行器，tests 目录存放测试用例。
playwright.config.ts 是项目配置入口。
Playwright 支持 Chromium、Firefox、WebKit 三种浏览器。
测试默认 headless 运行，也可以 headed 运行。
浏览器二进制是独立安装的，与 npm 包分开管理。
Playwright 的核心优势：auto-waiting、web-first assertions、语义化 locator、测试隔离、强可调试性、CI 友好。

实操步骤

mkdir playwright-learning
cd playwright-learning
npm init playwright@latest

初始化时建议选择：

TypeScript：Yes
tests folder：tests
GitHub Actions：Yes
Install browsers：Yes

运行测试：

npx playwright test

运行指定浏览器：

npx playwright test --project=chromium

打开 HTML report：

npx playwright show-report

示例代码

初始化后 tests/example.spec.ts 会生成官方示例，把它改写成自己的版本：

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

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  // 断言页面标题包含 Playwright
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  // 用语义化 locator 找到链接并点击
  await page.getByRole('link', { name: 'Get started' }).click();
  // 断言跳转到文档页
  await expect(page).toHaveURL(/.*intro/);
});

常见坑

直接 npm install playwright 而不是 @playwright/test，缺少测试运行器和 CLI。
忘记运行 npx playwright install，导致报错 Executable doesn't exist。
Node.js 版本过旧，Playwright 要求较新的 LTS 版本。
在 Windows 上忽略防火墙/杀毒软件拦截浏览器二进制。
混淆 npx playwright test（运行测试）和 npx playwright（CLI 入口）。

今日产出

一个可以运行的 Playwright 项目。
成功执行官方 example test。
截图保存第一次 HTML report。

今日问题

Playwright 和 Selenium/Cypress 的主要区别是什么？
@playwright/test 是什么？
npx playwright test 做了什么？
Playwright 为什么要安装 browser binaries？
playwright.config.ts 的作用是什么？

复盘要点

你今天装好的项目，就是未来 30 天所有练习的载体，理解目录和命令比背下来更重要。
记下第一次运行失败时的报错和你解决它的方法，这比一次通过更有价值。
确认 npx playwright test、--project=chromium、show-report 三个命令不再需要查文档。

AI 时代扩展：AI 辅助 Playwright 测试

新增概念

English	中文
AI-assisted testing	AI 辅助测试
test generation	测试用例生成
code scaffolding	代码脚手架
prompt engineering	提示词工程
human review	人工审查
hallucination	幻觉

适用场景

初始化项目时，可以让 AI 帮你解释 playwright.config.ts 里每个字段的作用，或者让 AI 生成一个针对指定页面的冒烟测试草稿。但第一天先不要依赖 AI 写完整测试——先理解示例代码每一行在做什么。

可复用表达 / 提示词

请解释这个 playwright.config.ts 中每个字段的作用，并用一句话总结它的影响范围。
请为 https://example.com 首页生成 3 条冒烟测试草稿，只使用推荐的 locator，并说明每条断言验证什么业务。

追问加练

AI 生成的测试代码，哪些部分最容易出错？
如何判断 AI 解释配置字段时是否在编造？
哪些环节必须由你自己手动验证？

今日作业

运行 3 次 npx playwright test，记录每次执行时间。
把 example 测试的 URL 换成任意一个你能访问的网站，改成 1 条自己的测试。
截图保存 HTML report 的概览页。
用 AI 解释一遍你的 playwright.config.ts，再对照官方文档核对。

自检清单

我能说出 Playwright 和 Playwright Test 的关系。
我的项目能完整跑通官方示例测试。
我知道 headless 和 headed 的区别。
我能打开并看懂 HTML report 的基本信息。
我知道明天要学的测试文件结构依赖哪些文件。