Node Playwright：前端人的自动化神器，这波必须安利！
最近发现了一个前端自动化测试+爬虫的宝藏工具——Node Playwright。用了一段时间直接封神，跟大家聊聊它的过人之处、能用到的场景，新手也能轻松get～。
Playwright是一个面向现代网页应用的端到端测试框架。它集成了测试运行工具、断言、隔离、并行化和丰富的工具工具。Playwright 支持 Chromium、WebKit 和 Firefox 在 Windows、Linux 和 macOS 上运行，本地或 CI 版本，Headless 或 head，并原生支持 Chrome（Android）和 Mobile Safari 的移动模拟。
官方文档地址：Playwright。
一、Node Playwright的优点
用过Selenium、Puppeteer的朋友，再用Playwright绝对会眼前一亮。它的优点真的很实在：
- 跨浏览器+多端兼容，省心到哭：自带Chrome、Firefox、Safari等主流浏览器的驱动，不用自己手动下载配置，开箱就能用。而且不仅支持桌面端，还能模拟移动端设备（比如iPhone、Android）的浏览效果，做响应式测试的时候直接省一半力。
- 自动等待，告别“睡眠等待”的坑：以前用其他工具写自动化，最头疼的就是元素还没加载出来，代码就已经执行了，只能靠setTimeout硬等。Playwright自带智能等待机制，会自动等待元素可交互再执行操作，不用再写一堆冗余的等待代码，稳定性直接拉满。
- 录制功能yyds，新手友好度拉满：如果不想手动写代码，直接用它的“录制模式”，打开浏览器操作一遍，它会自动生成对应的代码。比如点击按钮、输入文本、跳转页面这些操作，录完复制粘贴就能用，新手也能快速写出自动化脚本。
- 功能全面，不止是测试：除了常规的页面操作，还支持网络拦截（比如mock接口数据）、截图/录屏、处理iframe、文件上传下载等，不管是测试还是爬虫，大部分需求都能满足。
- 稳定性强，少踩坑：Playwright是微软开发维护的，更新迭代很稳定，遇到问题文档也比较全。而且它对现代前端框架（Vue、React、Angular）的兼容性很好，不会出现很多奇奇怪怪的适配问题。
二、场景
- 前端自动化测试：这是它的核心场景之一。比如页面功能测试（登录、表单提交、页面跳转）、响应式测试（模拟不同设备尺寸）、回归测试（每次迭代后自动跑一遍核心流程，避免旧功能出问题）。以前需要手动点一遍的流程，用它写个脚本，一键执行，还能生成测试报告，省了超多重复工作。
- 数据爬虫（合法合规前提下） ：对于那些动态渲染的页面（比如用Vue/React写的页面，数据靠接口加载），普通的爬虫抓不到数据，Playwright就能派上用场。它能模拟真实浏览器的渲染过程，等待数据加载完成后再抓取，比传统爬虫更万能。比如爬取电商平台的商品信息、资讯网站的文章内容等。
- 自动化操作&批量任务：如果有很多重复的浏览器操作，比如批量注册账号、批量上传文件、批量导出数据等，都能用它写脚本自动完成。比如我之前需要每天导出后台的统计数据，写了个Playwright脚本，定时执行，直接解放双手。
- 页面性能监控&问题排查：可以用它模拟用户操作，同时收集页面的加载性能数据（比如首屏加载时间、接口响应时间），还能截图、录屏留存问题现场，方便排查线上问题。
三、几个常用方法实例
下面给大家放几个最常用的方法，都是实际工作中能直接用到的，先确保你已经安装好了依赖：
首先初始化项目，安装依赖：
npm init -y
npm install playwright
# 自动下载浏览器驱动（Chrome、Firefox、Safari）
npx playwright install
1. 基础场景：打开浏览器，访问页面并截图
这个是最入门的操作，比如打开百度，搜索“Node Playwright”，然后截图保存：
// index.js
const { chromium } = require('playwright');
(async () => {
// 1. 启动浏览器（headless: false 表示显示浏览器窗口，默认是true无头模式）
const browser = await chromium.launch({ headless: false });
// 2. 创建一个新页面
const page = await browser.new_page();
// 3. 访问百度
await page.goto('https://www.baidu.com');
// 4. 定位搜索框，输入内容（通过id定位，也可以用css、xpath等）
await page.fill('#kw', 'Node Playwright');
// 5. 定位搜索按钮，点击
await page.click('#su');
// 6. 等待页面加载完成（其实Playwright会自动等待，这里写出来更清晰）
await page.wait_for_load_state('networkidle');
// 7. 截图保存
await page.screenshot({ path: 'baidu-search-result.png', fullPage: true });
// 8. 关闭浏览器
await browser.close();
})();
运行命令：node index.js，就能看到浏览器自动打开操作，最后生成一张完整的搜索结果截图。
2. 录制功能：自动生成代码
如果不想手动写代码，直接用录制命令：
npx playwright codegen https://www.baidu.com
执行后会打开两个窗口：一个是浏览器窗口，一个是代码生成窗口。你在浏览器里做的所有操作（比如输入、点击、跳转），都会自动生成对应的代码，直接复制到项目里就能用，新手必备！
3. 网络拦截：mock接口数据
测试的时候，有时候需要模拟接口返回错误或者特定数据，用Playwright的网络拦截功能就能实现：
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch({ headless: false });
const page = await browser.new_page();
// 拦截指定接口，mock返回数据
await page.route('https://api.example.com/getData', async (route) => {
// 自定义返回数据
const mockData = {
code: 200,
message: 'success',
data: [{ name: 'mock数据', value: 123 }]
};
// 发送mock响应
await route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify(mockData)
});
});
// 访问需要调用该接口的页面
await page.goto('https://example.com');
// 等待接口请求完成
await page.wait_for_request('https://api.example.com/getData');
// 后续操作...
await browser.close();
})();
4. 模拟移动端设备
测试响应式页面的时候，模拟iPhone 14的效果：
const { chromium, devices } = require('playwright');
(async () => {
// 获取iPhone 14的设备配置
const iPhone14 = devices['iPhone 14'];
const browser = await chromium.launch({ headless: false });
// 创建页面时传入设备配置
const context = await browser.new_context({
...iPhone14,
// 模拟深色模式（可选）
colorScheme: 'dark'
});
const page = await context.new_page();
await page.goto('https://example.com');
// 截图查看效果
await page.screenshot({ path: 'mobile-example.png' });
await browser.close();
})();
四、最后
Node Playwright真的是前端人的宝藏工具，不管是做测试还是处理一些重复的浏览器操作，都能大大提高效率。而且它的学习成本不高，录制功能+详细的文档，新手也能快速上手。
如果你们有自动化测试、爬虫相关的需求，或者平时有很多重复的浏览器操作，真的可以试试它！用过之后绝对会跟我一样，再也不想手动点点点了～
如果大家有其他好用的Playwright技巧，也欢迎在评论区交流呀！
