Playwright 第2章：快速上手与第一个脚本

本章将带您快速上手 Playwright，从零开始编写第一个自动化脚本。我们将学习如何启动浏览器、打开网页、执行操作并截图，掌握 Playwright 脚本的基本结构。

第一个脚本

创建一个简单的脚本，打开网页并截图：

import { chromium } from 'playwright';

async function main() {
  // 启动浏览器
  const browser = await chromium.launch();

  // 创建新页面
  const page = await browser.newPage();

  // 导航到目标网址
  await page.goto('https://example.com');

  // 截图保存
  await page.screenshot({ path: 'example.png' });

  // 获取页面标题
  const title = await page.title();
  console.log('页面标题:', title);

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

main();

运行脚本：

node first-script.mjs

启动浏览器详解

launch() 方法

browserType.launch() 是启动浏览器的入口方法：

import { chromium, firefox, webkit } from 'playwright';

// 启动 Chromium
const chromiumBrowser = await chromium.launch();
// 启动 Firefox
const firefoxBrowser = await firefox.launch();
// 启动 WebKit（Safari）
const webkitBrowser = await webkit.launch();

常见启动参数

const browser = await chromium.launch({
  headless: false,        // 有头模式（显示浏览器窗口）
  devtools: true,         // 打开开发者工具
  slowMo: 500,            // 操作间延迟 500ms（便于观察）
  timeout: 30000,         // 启动超时时间
  args: [                 // 浏览器启动参数
    '--window-size=1280,720',
    '--disable-notifications',
    '--disable-geolocation',
  ],
  proxy: {                // 代理配置
    server: 'http://proxy.example.com:8080',
    username: 'user',
    password: 'pass',
  },
  downloadsPath: './downloads',  // 下载路径
});

headless 模式

页面操作基础

导航到网页

// 基本导航
await page.goto('https://example.com');

// 带选项的导航
await page.goto('https://example.com', {
  waitUntil: 'networkidle',  // 等待网络空闲
  timeout: 30000,            // 超时时间
  referer: 'https://google.com', // 来源页
});

waitUntil 选项说明：

截图功能

// 全页面截图
await page.screenshot({ path: 'fullpage.png', fullPage: true });

// 可视区域截图
await page.screenshot({ path: 'viewport.png' });

// 元素截图
await page.locator('.header').screenshot({ path: 'header.png' });

// 指定截图格式和质量
await page.screenshot({
  path: 'page.jpg',
  type: 'jpeg',
  quality: 80,
});

// 截图并转为 base64
const buffer = await page.screenshot();
const base64 = buffer.toString('base64');

PDF 生成

// 生成 PDF（仅 Chromium 支持）
await page.pdf({
  path: 'page.pdf',
  format: 'A4',
  printBackground: true,
  margin: {
    top: '20px',
    bottom: '20px',
    left: '10px',
    right: '10px',
  },
});

浏览器控制

多个浏览器实例

const browser1 = await chromium.launch();
const browser2 = await chromium.launch();

// 浏览器间完全隔离
const page1 = await browser1.newPage();
const page2 = await browser2.newPage();

await page1.goto('https://example.com');
await page2.goto('https://google.com');

// 分别关闭
await browser1.close();
await browser2.close();

获取浏览器信息

const browser = await chromium.launch();

// 浏览器版本
const version = browser.version();
console.log('浏览器版本:', version);

// 获取所有上下文
const contexts = browser.contexts();

// 检测是否已关闭
const isClosed = browser.isConnected();

完整示例：网页信息采集

import { chromium } from 'playwright';

async function scrapePage() {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({
    viewport: { width: 1280, height: 720 },
    locale: 'zh-CN',
  });
  const page = await context.newPage();

  try {
    await page.goto('https://example.com', {
      waitUntil: 'networkidle',
      timeout: 15000,
    });

    // 获取页面信息
    const info = {
      title: await page.title(),
      url: page.url(),
      contentLength: (await page.content()).length,
      screenshot: await page.screenshot({ encoding: 'base64' }),
    };

    console.log('采集结果:', info);
    return info;
  } finally {
    await browser.close();
  }
}

scrapePage();

常见问题

浏览器启动失败

# 确保浏览器已安装
npx playwright install

# 检查系统依赖
npx playwright install --with-deps

# 查看详细日志
DEBUG=pw:browser* node script.mjs

脚本超时

// 增加超时时间
const browser = await chromium.launch({ timeout: 60000 });
await page.goto('https://example.com', { timeout: 60000 });

总结

通过本章学习，您已掌握 Playwright 脚本的基本结构：启动浏览器 → 创建页面 → 执行操作 → 关闭浏览器。headless 模式下适合自动化运行，有头模式便于调试。截图和 PDF 功能为测试结果提供了直观的验证手段。在实际开发中，建议将浏览器启动封装为可复用的辅助函数。