最近帮几个粉丝做模拟面试，发现一个很普遍的问题：
简历上写了 Playwright 项目，但一问细节就卡壳——比如 page.route() 是干啥的？为什么不用 sleep()？怎么处理登录态？”。
工具不难，难的是理解它为什么这么设计，以及怎么用它解决真实问题。
我结合近半年字节、腾讯、美团等大厂的真实校招/初级岗面试题，整理出这份 《Playwright 面试》，按难度分五块：
✅ 基础概念 → ✅ 元素操作 → ✅ 网络控制 → ✅ 工程实践 → ✅ 未来方向每道题都告诉你：
面试官想考什么
新手最容易踩什么坑
该怎么准备
建议收藏，面试前通读一遍，比盲目刷题高效得多。
基础篇（8问）：别被“简单题”淘汰
这些题看似简单，但答不好，直接挂——因为面试官怀疑你根本没写过代码。
Q1：Playwright 的优势是什么？
自动等待：自动等待机制大大减少了显式等待的使用频率，但在复杂业务场景下，显式等待仍然是必要的工具
真正的跨浏览器：同一代码可在 Chromium、Firefox 和 WebKit 上运行
极速：Playwright在执行速度和整体测试效率上通常优于Selenium，特别是在并行执行、网络控制、智能等待等方面有显著优势，但具体提升幅度因项目而异。
无需安装驱动：Playwright内置并管理了驱动
一流的移动模拟：真实设备描述符（iPhone 15、Pixel 8 等）
内置网络拦截、追踪、视频录制、API 测试
业界最佳调试工具（Inspector + Trace Viewer）
Q2：Playwright 的劣势是什么？
初始安装包较大（每个浏览器约 250-300 MB）
生态系统较新（2020 年 vs Selenium 的 2004 年）→ 旧版集成较少
Playwright设计上就不支持IE和旧版Edge
高级功能（如路由模拟或组件测试）的学习曲线略陡
Q3：Playwright 和 Selenium 有啥区别？
❌ 别只说“Playwright 更快”。 ✅ 正确答法：
Playwright：执行操作（如click、fill）前会自动检查元素是否可交互（可见、已启用、稳定、不被遮挡）
Selenium：需要手动添加显式等待（WebDriverWait + ExpectedConditions）
Playwright 一套代码能跑 Chrome/Firefox/Safari，Selenium 要配不同驱动
Playwright 内置录屏、Mock、移动端模拟，Selenium 得靠插件
💡 给新人的建议：哪怕你只用过 Selenium，也要去官网跑一遍 Playwright 官方 demo（10分钟就能跑通），感受“自动等待”的爽。
Q4：怎么打开浏览器窗口（不是黑屏）？
const browser = await chromium.launch({ headless: false });
💡 什么时候用？
调试时看页面怎么点的
录制失败过程（方便截图发群里求助）
给产品演示自动化流程
📌 小技巧：本地开发用 headless: false，CI 里一定用 true（省资源）。
Q5：page.goto('xxx') 会等页面完全加载完吗？
✅ 默认等到 load 事件（所有资源加载完）。
'networkidle'已弃用（v1.25+），现在用'commit'
推荐使用waitForLoadState('networkidle')
但有些页面是“动态加载数据”的（比如商品列表），这时候要用：
await page.goto('/product');
await page.waitForLoadState('networkidle'); // 等待网络空闲
// 或者更精准的等待
await page.waitForSelector('.product-list', { state: 'visible' });
💡 新手误区：以为页面出来就完事了，其实 API 数据还没回来，导致断言失败。
Q6：遇到弹窗（alert）怎么办？
page.on('dialog', async dialog => {
console.log('弹窗内容：', dialog.message());
await dialog.accept(); // 点确定
});
⚠️ 关键点：必须在触发弹窗之前注册监听！否则脚本会卡死。
Q7：怎么截图？能录视频吗？
截图：
await page.screenshot({ path: 'result.png' })
录视频（需在创建 context 时开启）：
const context = await browser.newContext({
recordVideo: { dir: 'videos/' }
});
💡 实战建议：在 CI 失败时自动保存视频，排查效率提升 10 倍！
默认配置中，只有失败的测试才会保留视频
需要在配置文件中明确设置
// playwright.config.ts
export default defineConfig({
use: {
// 所有测试都录屏（CI上会很耗资源）
video: 'on-first-retry', // 推荐：只在第一次重试时录屏
// 或 'retain-on-failure' // 只在失败时保留
},
});
Q8：一定要用 TypeScript 吗？
✅ 不强制，但强烈建议学。 原因：
大厂项目基本都用 TS
IDE 能自动提示方法、参数，少写 bug
类型检查让代码更健壮（尤其多人协作时）
🎯 行动建议：哪怕你只会 JS，也试着把 .js 改成 .ts，装个 VS Code 插件，慢慢适应。
补充：
Playwright的安装和配置:
常见安装问题及解决方案
1. 网络问题导致下载失败
解决方案：设置国内镜像
npm config set registry https://registry.npmmirror.com
PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright npx playwright install
2. 权限问题
在Linux/Mac上可能需要sudo
或使用--user当前用户安装
3. 版本兼容性
确保package.json中的版本一致
第一个Playwright脚本怎么写？
// 给新人的最小可运行示例
import { test, expect } from '@playwright/test';
test('我的第一个测试', async ({ page }) => {
// 1. 导航到页面
await page.goto('https://demo.playwright.dev/todomvc');
// 2. 执行操作
await page.fill('.new-todo', '学习Playwright');
await page.press('.new-todo', 'Enter');
// 3. 验证结果
await expect(page.locator('.todo-list li')).toHaveText('学习Playwright');
// 4. 添加等待（如果需要）
await page.waitForTimeout(1000); // 仅用于调试，生产环境避免使用
});
定位与操作篇（5问）：别再用 XPath 了！
很多新人习惯用 XPath/CSS 选择器，结果页面一改就全崩。
Q9：除了 getByRole，还有哪些推荐的定位方式？
✅ 推荐顺序（越靠前越稳）：
getByRole('button', { name: '提交' }) ← 最推荐！
getByText('忘记密码？')
getByLabel('用户名')
getByPlaceholder('请输入邮箱')
getByTestId('login-btn') ← 需要前端配合
// "尽量避免复杂的XPath，因为：
// 1. 可读性差，维护困难
// 2. 前端改动一点就可能失效
// 3. 容易写出低效的选择器
// 但如果不得不使用CSS/XPath，也要学会正确使用：
// ✅ 相对稳定的CSS选择器
await page.locator('[data-testid="submit-btn"]').click();
await page.locator('form.login-form > button[type="submit"]').click();
// ❌ 避免使用的XPath
// await page.locator('//div[3]/span[2]').click(); // 脆弱！
// await page.locator('//*[@id="app"]/div[2]/button').click(); // 更脆弱！
💡 给新人的忠告：推动前端加 data-testid，这是测开的基本话语权。
Q10：React 页面 class 是随机生成的，怎么定位？
✅ 最佳方案：让前端加 data-testid="submit-btn"
🛠 你可以这么做：
在 PR 评论里写：“建议加 testid，方便自动化覆盖”
或自己提个小 PR 给组件库
次选方案：用文本定位 + 向上找父级
await page.getByText('立即下单').locator('..').click();
Q11：元素在页面底部，点不到怎么办？
await page.getByText('提交订单').scrollIntoViewIfNeeded();
await page.getByText('提交订单').click();
💡 注意：某些框架（如 Vue）需要先确保元素已渲染，可加 waitFor。
Q12：怎么上传文件？
const fileInput = page.locator('input[type="file"]');
await fileInput.setInputFiles('./test.pdf');
✅ 支持传数组：setInputFiles(['a.pdf', 'b.jpg'])
Q13：怎么模拟 Ctrl+C / Cmd+A？
// Windows/Linux
await page.keyboard.press('Control+C');
// macOS
await page.keyboard.press('Meta+A');
网络与 Mock 篇（5问）：测开的核心加分项！
能 Mock API 的测开，工资至少高 30%。
Q14：怎么绕过登录？怎么模拟接口返回？
await page.route('**/api/user/info', route => {
route.fulfill({ json: { name: '测试用户', role: 'admin' } });
});
💡 应用场景：
跳过登录直接进首页
模拟 500 错误，测错误提示
加速测试（不用真调后端）
Q15：page.route() 和 page.waitForResponse() 有啥区别？
✅ 一句话总结：
route：我能控制请求（改、拦、慢、丢）
waitForResponse：我只能等它发生 🧠 类比：
route 像交警，能指挥车流
waitForResponse 像路人，只能等车过去
Q16：怎么验证“点击提交后，接口被调用了”？
const [response] = await Promise.all([
page.waitForResponse(resp => resp.url().includes('/order')),
page.click('text=提交订单')
]);
expect(response.status()).toBe(200);
✅ 这是高频面试题！务必掌握。
Q17：怎么模拟网络卡顿或断网？
await page.route('*/api/', route => {
// 模拟断网
route.abort();
// 或模拟慢速（5秒后返回）
// setTimeout(() => route.continue(), 5000);
});
Q18：怎么分析页面加载慢在哪？
page.on('requestfinished', req => {
const timing = req.timing();
console.log('TTFB:', timing.responseStart - timing.requestStart);
});
💡 建议：把关键页面的 TTFB 加到冒烟测试里，超过阈值就报警。
四、工程实践篇（6问）：让你的代码像“老手”写的
面试官看你的代码结构，就知道你有没有工程思维。
Q19：怎么组织代码？（别把所有逻辑塞在一个文件！）
✅ 推荐结构：
// 更适合新人的目录结构
src/
├── pages/ // 页面对象
│ ├── BasePage.ts // 基础页面类
│ ├── LoginPage.ts
│ ├── HomePage.ts
│ └── components/ // 可复用的组件
│ └── Header.ts
├── tests/
│ ├── specs/ // 测试用例
│ │ ├── login.spec.ts
│ │ └── checkout.spec.ts
│ ├── fixtures/ // 测试夹具
│ │ └── test-data.ts
│ └── utils/ // 工具函数
│ ├── helpers.ts
│ └── assertions.ts
└── playwright.config.ts
// 示例：BasePage.ts - 新人可以从这里开始
export class BasePage {
constructor(protected page: Page) {}
// 常用方法的封装
async waitAndClick(selector: string) {
await this.page.waitForSelector(selector);
await this.page.click(selector);
}
async typeAndEnter(selector: string, text: string) {
await this.page.fill(selector, text);
await this.page.press(selector, 'Enter');
}
}
示例：
// LoginPage.ts
export class LoginPage {
constructor(private page: Page) {}
async login(username: string, password: string) {
await this.page.fill('#user', username);
await this.page.fill('#pwd', password);
await this.page.click('#submit');
}
}
Q20：怎么一次跑多个浏览器？
在 playwright.config.ts 里配置：
projects: [
{ name: 'Chrome', use: { ...devices['Desktop Chrome'] } },
{ name: 'Firefox', use: { ...devices['Desktop Firefox'] } }
]
Q21：多个测试同时跑，账号冲突怎么办？
✅ 三大策略：
每个测试用独立测试账号（如 test001@test.com）
用 storageState 保存/复用登录态
测试前后清理数据库（或用事务回滚）
Q22：怎么集成到 GitHub Actions？
✅ 官方提供 Docker 镜像，一行搞定：
//yaml
container: mcr.microsoft.com/playwright:v1.40.0-focal
💡 加分项：失败时自动上传视频到 artifacts。
Q23：测试数据写死在代码里？NO！
✅ 用 Factory 模式：
function createUser(role: 'admin' | 'user') {
return { email: test_${role}@xx.com, role };
}
好处：易维护、可复用、不泄露真实数据。
Q24：怎么做视觉回归测试？
maxDiffPixelRatio: 0.01,
mask: [page.getByText(new Date().toLocaleDateString())] // 忽略日期
});
⚠️ 前提：固定 viewport、字体、时间等变量！
未来方向篇（5问）：提前布局，弯道超车
这些题不一定考，但你能聊，面试官会觉得你“有潜力”。
Q25：能用 Playwright 测试 AI 聊天机器人吗？
✅ 可以！关键点：
监听 SSE/WebSocket 响应（v1.37+ 支持）
验证回复是否包含关键词
检查 loading 状态是否正常消失
Q26：AI 能帮我写 Playwright 脚本吗？
✅ 可以！试试这样问 GPT：
“根据这个 UI 截图，生成 Playwright 登录测试代码，使用 getByTestId”
🚀 行动建议：用 AI 生成初稿，你负责优化和维护——效率翻倍。
Q27：Playwright 能测手机网页吗？
✅ 可以！模拟 iPhone：
const { devices } = require('@playwright/test');
const context = await browser.newContext(devices['iPhone 14 Pro']);
⚠️ 注意：只能测 H5/PWA，不能测原生 App。
Q28：你遇到最难搞的问题是什么？
💡 建议准备一个真实故事，比如：
“有一次测试总失败，后来发现是 CSP 策略阻止了 route 拦截，最后通过注入 script 解决，并写了文档分享给团队。”
面试官爱听这种：发现问题 → 分析 → 解决 → 复盘。
Q29：为什么选 Playwright，而不是 Cypress？
✅ 高阶答法：
我们要测 Safari（Cypress 不支持）
需要跨语言（我们后端用 Python）
需要深度网络控制（Cypress 限制多）
写在最后
Playwright 是个好工具，但它只是解决问题的手段。真正拉开差距的，是你对业务的理解、对稳定性的追求、对工程化的思考。
如果你正在准备面试，不妨对照这29问，动手写几段代码、跑几个 mock 场景。理解胜过记忆，比起背答案，亲手跑一遍印象更深。
祝你面试顺利，早日拿下心仪 offer！
