Playwright

七崽爱吃小饼干2026/05/08阅读 2

在前端开发、自动化测试、网页爬虫等场景中，一款高效、稳定、跨浏览器的自动化工具能极大提升开发效率。Playwright 是微软推出的开源自动化工具，专为现代网页应用设计，支持 Node.js、Python、Java、.NET 等多种语言，凭借跨浏览器兼容、自动等待、强大的元素定位、极简API等特性，成为自动化领域的首选工具。

本文将基于 Node.js 环境，全面介绍 Playwright 的核心优势、安装流程、基础使用、实战示例及高级特性，帮你快速上手这款现代化工具。

一、Playwright 是什么？

Playwright 是一款用于Web 自动化测试和网页爬虫的框架，支持所有主流浏览器：

浏览器：Chrome/Edge（Chromium内核）、Firefox、Safari（WebKit内核）
平台：Windows、macOS、Linux
模式：无头模式（默认，无界面）、有头模式（可视化调试）

它的核心设计理念是解决传统自动化工具（如 Puppeteer、Selenium）的痛点：自动处理元素等待、避免手动延时、支持移动端模拟、一键多浏览器测试，API 简洁易懂，零基础也能快速上手。

二、核心优势

跨浏览器一站式支持：一套代码运行在 Chromium/Firefox/WebKit，无需修改适配
自动等待机制：自动等待元素加载、可点击、可见，告别 setTimeout 等不稳定延时
强大的元素定位：支持 CSS、XPath、文本、角色、标签等多种定位方式
移动端模拟：一键模拟手机/平板设备，测试响应式页面
网络拦截与Mock：拦截请求、修改响应、模拟接口数据，无需依赖后端
截图/录屏/追踪：自动生成测试截图、视频、执行日志，方便问题排查
无依赖环境：安装时自动下载对应浏览器，无需手动配置浏览器驱动

三、Node.js 环境安装与初始化

1. 环境准备

确保你的电脑已安装 Node.js 16+ 版本（官网：https://nodejs.org/）

2. 初始化项目

创建项目文件夹并初始化：

bash

mkdir playwright-demo && cd playwright-demo
npm init -y

3. 安装 Playwright

bash

# 安装核心库 + 自动下载所有浏览器（Chromium/Firefox/WebKit）
npm init playwright@latest

安装过程中会提示：

选择语言：TypeScript/JavaScript（本文用 JavaScript）
是否生成示例代码：Yes
是否安装浏览器：Yes

安装完成后，项目结构如下：

playwright-demo/
├── tests/           # 测试用例目录
├── playwright.config.js  # 配置文件
└── package.json

四、基础使用：5分钟快速入门

我们通过打开百度、搜索关键词、截图保存三个基础操作，演示 Playwright 的核心用法。

示例1：基础自动化脚本

在项目根目录创建 demo.js：

javascript

// 1. 导入 playwright 核心库
const { chromium } = require('playwright');

// 异步函数（Playwright 所有API都是异步的，必须用 async/await）
(async () => {
  // 2. 启动浏览器：headless: false 为有头模式（可视化），true 为无头模式
  const browser = await chromium.launch({ headless: false, slowMo: 500 });
  // slowMo: 500 表示每个操作延时500ms，方便调试观察

  // 3. 创建浏览器上下文（相当于独立的浏览器窗口，无缓存污染）
  const context = await browser.newContext();

  // 4. 打开新页面
  const page = await context.newPage();

  // 5. 访问网页
  await page.goto('https://www.baidu.com');

  // 6. 定位搜索框，输入关键词（自动等待元素加载）
  await page.locator('#kw').fill('Playwright Node.js');

  // 7. 点击搜索按钮
  await page.locator('#su').click();

  // 8. 等待搜索结果加载完成
  await page.waitForSelector('div.result');

  // 9. 截图保存到本地
  await page.screenshot({ path: 'baidu-search.png', fullPage: true });

  // 10. 关闭浏览器
  await browser.close();
})();

运行脚本

bash

node demo.js

执行后会自动打开浏览器，完成搜索并生成全屏截图，全程无需手动等待元素加载。

五、核心API详解（Node.js版）

1. 浏览器启动与上下文

chromium.launch()：启动 Chromium 浏览器（也可替换为 firefox/webkit）
browser.newContext()：创建独立上下文，适合多账号登录、隔离缓存
browser.close()：关闭浏览器

2. 页面操作核心方法

javascript

// 访问页面
await page.goto('https://xxx.com');

// 输入文本
await page.locator('选择器').fill('内容');

// 点击元素
await page.locator('选择器').click();

// 获取元素文本
const text = await page.locator('选择器').textContent();

// 获取页面标题
const title = await page.title();

// 等待元素出现
await page.waitForSelector('选择器');

3. 强大的元素定位方式

Playwright 支持智能定位，比传统 CSS/XPath 更稳定：

javascript

// 1. ID 选择器
await page.locator('#kw').fill('测试');

// 2. 类名选择器
await page.locator('.className').click();

// 3. 文本定位（推荐，无视HTML结构）
await page.locator('text=登录').click();

// 4. 角色定位（无障碍标准，最稳定）
await page.locator('role=button[name="搜索"]').click();

六、进阶实战示例

示例2：模拟移动端 + 拦截网络请求

javascript

const { chromium, devices } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  // 模拟 iPhone 14 设备
  const iphone14 = devices['iPhone 14'];
  const context = await browser.newContext({ ...iphone14 });

  const page = await context.newPage();

  // 拦截网络请求，过滤广告请求
  await page.route('**/*{.jpg,.png,.gif}', async (route) => {
    await route.abort(); // 拦截图片请求
  });

  await page.goto('https://www.baidu.com');
  await page.locator('text=新闻').click();
  
  await page.screenshot({ path: 'mobile-baidu.png' });
  await browser.close();
})();

示例3：自动化测试用例（官方测试模式）

Playwright 内置测试 runner，直接编写测试用例，自动生成测试报告：在 tests/ 目录创建 first-test.js：

javascript

const { test, expect } = require('@playwright/test');

test('百度搜索测试', async ({ page }) => {
  // 访问页面
  await page.goto('https://www.baidu.com');

  // 断言：页面标题包含“百度”
  await expect(page).toHaveTitle(/百度/);

  // 搜索操作
  await page.locator('#kw').fill('Playwright');
  await page.locator('#su').click();

  // 断言：结果包含关键词
  await expect(page.locator('div.result')).toContainText('Playwright');
});

运行测试：

bash

npx playwright test

查看测试报告：

bash

npx playwright show-report

七、常用配置与调试技巧

1. 配置文件（playwright.config.js）

修改默认浏览器、测试目录、超时时间、视口大小
配置截图/录屏：测试失败自动截图、录屏

javascript

// @ts-check
const { defineConfig, devices } = require('@playwright/test');

/**
 * 官方配置文档：
 * https://playwright.dev/docs/test-configuration
 */
module.exports = defineConfig({
  // 测试目录：你的测试用例放在哪个文件夹
  testDir: './tests',

  // 全局超时时间：每个测试最大运行时间（毫秒）
  timeout: 30 * 1000,

  // 测试失败是否立即停止（false = 跑完所有用例再停）
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,

  // 测试报告
  reporter: 'html',

  // 所有用例共享的配置
  use: {
    // 每个操作的超时（点击、输入等）
    actionTimeout: 5000,

    // 浏览器视口大小
    viewport: { width: 1920, height: 1080 },

    // 浏览器语言
    locale: 'zh-CN',

    // ========== 核心：自动截图 + 自动录屏 ==========
    // 测试失败时自动截图
    screenshot: { 
      mode: 'only-on-failure', 
      fullPage: true 
    },

    // 测试失败时自动录屏
    video: 'retain-on-failure',

    // 追踪（失败时保留执行日志）
    trace: 'retain-on-failure',
  },

  // 配置要运行的浏览器项目
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],

  // 运行测试前启动本地服务（可选）
  // webServer: {
  //   command: 'npm run start',
  //   url: 'http://127.0.0.1:3000',
  // },
});

2. 调试神器

javascript

// 暂停页面，打开调试器
await page.pause();

// 打印页面HTML
console.log(await page.content());

3. 无头模式与有头模式

javascript

// 生产环境：无头模式（更快）
await chromium.launch({ headless: true });

// 调试环境：有头模式
await chromium.launch({ headless: false });

八、总结

Playwright 是Node.js 生态中最现代化的Web自动化工具，完美替代传统工具，具备跨浏览器、自动等待、API简洁、功能强大四大核心优势。

无论是前端自动化测试、网页数据爬虫、UI自动化，还是响应式页面测试，Playwright 都能轻松胜任。通过本文的示例，你已经掌握了基础用法，结合官方文档，可快速实现复杂的自动化场景。

关键点回顾

安装：npm init playwright@latest 一键安装
核心：async/await + 自动等待，告别不稳定延时
定位：优先用 text/role 定位，稳定性拉满
场景：测试、爬虫、移动端模拟、网络拦截全覆盖
运行：普通脚本用 node xxx.js，测试用例用 npx playwright test