1. 目标
学习结束后，至少要做到这 4 件事：
- 能独立安装并运行 Playwright
- 能写简单的登录、查询、提交流程脚本
- 能看懂失败原因和测试报告
- 能自己新增一个基础测试用例
2. Playwright 是什么
Playwright 可以理解成一个“帮你操作浏览器的人”。
它能做这些事：
- 打开网页
- 输入内容
- 点击按钮
- 切换页面
- 校验结果
- 输出报告、截图
适合用来做：
- Web 功能回归测试
- 登录、下单、审批、查询这类业务流程测试
- 替代重复性的手工操作
一句话记住：
人工怎么点页面，Playwright 就能怎么帮你点。
3. 环境准备
先安装：
- Node.js 18+
- VS Code
检查是否安装成功：
node -v
npm -v
4. 10 分钟跑起来
新建项目并初始化：
mkdir pw-demo
cd pw-demo
npm init playwright@latest
安装时建议这样选：
- 语言：JavaScript
- 测试目录：默认 tests
- GitHub Actions：No
- 安装浏览器：Yes
安装完成后，先跑默认用例：
npx playwright test
打开测试报告：
npx playwright show-report
这一段不要讲太多原理，先让新人把环境跑通。
5. 第一个测试用例
新建文件：tests/login.spec.js
const { test, expect } = require('@playwright/test');
test('登录成功', async ({ page }) => {
await page.goto('https://www.saucedemo.com/');
await page.getByPlaceholder('Username').fill('standard_user');
await page.getByPlaceholder('Password').fill('secret_sauce');
await page.getByRole('button', { name: 'Login' }).click();
await expect(page).toHaveURL(/inventory/);
await expect(page.getByText('Products')).toBeVisible();
});
运行单个文件：
npx playwright test tests/login.spec.js
如果想看到浏览器操作过程：
npx playwright test tests/login.spec.js –headed
新人先理解这 5 个最基础动作：
- test：定义一个测试用例
- page.goto()：打开页面
- fill()：输入内容
- click()：点击按钮
- expect()：校验结果
6. 最常用的基础写法
最常见动作如下：
await page.goto('https://xxx.com');
await page.fill('#username', 'admin');
await page.click('text=登录');
await expect(page.getByText('成功')).toBeVisible();
更推荐的定位方式：
page.getByRole()
page.getByText()
page.getByPlaceholder()
page.getByLabel()
page.locator()
建议优先级：
不要一上来就写很长的 xpath。
7. 最快上手方式：录制脚本
不会写没关系，先录：
npx playwright codegen https://www.saucedemo.com/
你在浏览器里的操作，右侧会自动生成代码。
要提醒新人 3 件事：
- 录制代码只是起点，不是最终成品
- 录完后要自己整理
- 选择器尽量换成稳定的写法
8. 断言怎么写
常见断言：
await expect(page).toHaveURL(/inventory/);
await expect(page.getByText('Products')).toBeVisible();
await expect(page.locator('.cart_item')).toHaveCount(1);
写自动化时，不能只做操作，不做校验。
每个测试用例至少要回答一个问题：
这个操作做完以后，页面结果到底对不对？
9. 一个更像业务场景的例子
const { test, expect } = require('@playwright/test');
test('加入购物车成功', async ({ page }) => {
await page.goto('https://www.saucedemo.com/');
await page.getByPlaceholder('Username').fill('standard_user');
await page.getByPlaceholder('Password').fill('secret_sauce');
await page.getByRole('button', { name: 'Login' }).click();
await page.getByRole('button', { name: 'Add to cart' }).first().click();
await page.locator('.shopping_cart_link').click();
await expect(page.getByText('Your Cart')).toBeVisible();
await expect(page.locator('.cart_item')).toHaveCount(1);
});
这个脚本对应真实业务里的基本思路：
- 先进入系统
- 再操作业务
- 最后校验结果
10. 调试和排查
常用命令：
npx playwright test
npx playwright test –headed
npx playwright test –debug
npx playwright show-report
含义如下：
- npx playwright test：运行全部用例
- –headed：有界面运行，方便观察
- –debug：进入调试模式，方便一步一步看
- show-report：打开报告，查看失败截图和日志
排查问题时，优先看：
- 报错信息
- 定位器是否失效
- 页面是否真的加载完成
- 断言内容是否写对
11. 新手最容易踩的坑
11.1 不要乱写固定等待
下面这种写法只建议临时调试时使用：
await page.waitForTimeout(3000);
正式脚本里尽量少用。优先使用 Playwright 自带等待和断言。
11.2 不要用脆弱的选择器
不建议：
await page.locator('div > div > div:nth-child(3) > span').click();
建议：
await page.getByRole('button', { name: '保存' }).click();
11.3 一个用例不要测太多事情
不建议把登录、下单、退款、审批全写在一个用例里。 一个用例尽量只验证一个核心场景。
11.4 每个用例都要有断言
脚本能跑完，不代表功能正确。 没有断言，自动化价值会大打折扣。
12. 建议的培训流程
如果是现场培训，建议按下面的节奏来：
13. 现场练习题
建议新人现场完成这 3 个练习：
只要能独立完成这 3 个，基本就算入门了。
14. 最小 Demo 项目结构
建议一开始先保持简单：
pw-demo/
├─ tests/
│ ├─ login.spec.js
│ ├─ cart.spec.js
├─ playwright.config.js
├─ package.json
后面如果项目变大，再逐步拆分：
pw-demo/
├─ tests/
├─ pages/
├─ utils/
├─ test-data/
├─ playwright.config.js
├─ package.json
15. 团队落地建议
如果后续要在项目里推广，建议统一下面几件事：
- 测试文件统一放在 tests/
- 公共登录流程单独封装
- 测试账号和测试环境固定
- 每次提测前先跑核心冒烟用例
- 用例命名尽量直接表达业务含义
16. 培训结束标准
新人如果能做到下面这些，就算已经具备基础上手能力：
- 会新建测试文件
- 会运行单个测试
- 会看测试报告
- 会调整简单定位器
- 会补基础断言
17. 一句话总结
Playwright 入门先别追求高级技巧，先把下面 4 件事练熟：
- 会安装
- 会录制
- 会定位元素
- 会写断言
