大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

高级前端进阶

前言

浏览器自动化并不是一项新技术， Selenium 自 2004 年以来一直存在，并且很长一段时间以来，它都是该类别的首选工具。 虽然 Selenium 的主要场景是为网站实施测试套件，但当网站不提供 API 时，程序员也可以将它用于屏幕截图或自动执行任务等。

然而，Selenium 有时候并不可靠， Selenium 测试通常不稳定，比如：难以重现的原因导致间歇性失败。 Selenium 也相当占用资源，原因它通常用于运行完整的浏览器

。

因此，程序员在某些情况下开始使用无头浏览器。 这些浏览器完成了完整浏览器的大部分工作，但并不渲染 UI，比如 l 。无头浏览器可以很好地测试简单的网站，但要充分测试网站，需要支持各种网络标准来尽可能地模拟完整的浏览器。

2017 年 PhantomJS 的作者弃用了它，原因是谷歌宣布推出 Headless Chrome，该浏览器首次在 Chrome 59 中可用。Firefox 在同一年晚些时候也推出了无头模式， 这些发展使得针对人们实际使用的相同浏览器编写高效的测试和脚本成为可能。

1 什么是 Playwright

Playwright 是一个用于 Web 测试和自动化的框架。它允许使用单个 API 测试 Chromium、Firefox 和 WebKit。

目前 playwright 在 Github 上有 48.9k 的 star、2.4k 的 fork、超过 24.5k 的项目依赖它，代码贡献者人数超过 380+。从 NPM 的使用数据来看，最近周下载量也达到了 1316k 左右，而且基本维持稳定。

Playwright 是 puppeteer 的可行替代方案，同时 Playwright 具有以下显著特征：

任何浏览器 • 任何平台 • 一个 API

• 跨浏览器：Playwright 支持所有现代渲染引擎，包括 Chromium、WebKit 、 Firefox。
• 跨平台：在 Windows、Linux 和 macOS 上进行本地测试或在 CI 上进行无/有头测试。
• 跨语言：在 TypeScript、JavaScript、Python、.NET、Java 中使用 Playwright API。
• 测试移动网络：适用于 Android 和 Mobile Safari 的 Google Chrome 浏览器的本机移动仿真， 相同的渲染引擎适用于桌面和云端。

弹性 • 保持测试稳定

• 自动等待：Playwright 在执行动作之前等待元素可操作， 同时还具有一组丰富的内置事件。 两者的结合消除了人为超时的可能性，这是不稳定测试的主要原因。
• Web 优先断言： Playwright 断言是专门为动态网络创建的，检查会自动重试，直到满足必要的条件。
• 追踪： 配置测试重试策略，捕获执行跟踪、视频、屏幕截图以消除薄片。

没有权衡 • 没有限制

• 浏览器在不同进程中运行属于不同来源的 Web 内容：Playwright 与现代浏览器架构保持一致，并在进程外运行测试。 这使得 Playwright 摆脱了典型的进程内测试运行器的限制。
• Multiple everything： 跨多个选项卡、多个来源和多个用户的测试场景。 为不同的用户创建具有不同上下文的场景，并在服务器上运行它们，所有这些都在一次测试中完成。
• 可信事件：悬停元素，与动态控件交互，产生可信事件。 Playwright 使用与真实用户无法区分的真实浏览器输入管道。
• 测试框架，穿透 Shadow DOM： Playwright 选择器穿透影子 DOM 并允许无缝地输入帧。

完全隔离 • 快速执行

• 浏览器上下文： Playwright 为每个测试创建一个浏览器上下文， 浏览器上下文相当于一个全新的浏览器配置文件。 这提供了零开销的完全测试隔离，创建一个新的浏览器上下文只需要几毫秒。
• 登录一次： 保存上下文的身份验证状态并在所有测试中重用它， 这绕过了每个测试中的重复登录操作，但提供了独立测试的完全隔离。

强大的工具

• 代码生成器： 通过记录操作来生成测试， 允许将测试结果保存为任何语言。
• Playwright 检测： 检查页面、生成选择器、逐步执行测试、查看点击、探索执行日志。
• 跟踪查看器： 捕获所有信息以调查测试失败原因， Playwright 跟踪包含测试执行截屏、实时 DOM 快照、动作资源管理器、测试源等等。

2.如何使用 Playwright

下面代码片段导航到 whatsmyuseragent.org 并保存屏幕截图。

import { test } from '@playwright/test';
test('Page Screenshot', async ({ page }) => {
  await page.goto('http://whatsmyuseragent.org/');
  await page.screenshot({ path: `example.png` });
});

下面代码段在给定地理位置的设备上模拟 Mobile Safari，导航到 maps.google.com，执行操作并截取屏幕截图。

import { test, devices } from '@playwright/test';

test.use({
  ...devices['iPhone 13 Pro'],
  locale: 'en-US',
  geolocation: { longitude: 12.492507, latitude: 41.889938 },
  permissions: ['geolocation'],
});

test('Mobile and geolocation', async ({ page }) => {
  await page.goto('https://maps.google.com');
  await page.locator('text="Your location"').click();
  await page.waitForRequest(/.*preview/pwa/);
  await page.screenshot({ path: 'colosseum-iphone.png' });
});

下面代码片段导航到 example.com，并在页面上下文中执行脚本。

import { test } from '@playwright/test';

test('Evaluate in browser context', async ({ page }) => {
  await page.goto('https://www.example.com/');
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio,
    };
  });
  console.log(dimensions);
});

下面代码片段为页面设置请求路由以记录所有网络请求。

import { test } from '@playwright/test';

test('Intercept network requests', async ({ page }) => {
  // Log and continue all network requests
  await page.route('**', (route) => {
    console.log(route.request().url());
    route.continue();
  });
  await page.goto('http://todomvc.com');
});

值得注意的是，Playwright 具有强大的浏览器上下文功能，可让开发者使用单个浏览器实例模拟多个设备。

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

(async () => {
  const browser = await chromium.launch();
  for (const deviceName of ['iPhone 11', 'iPad Pro 11']) {
    const context = await browser.newContext({
      ...devices[deviceName],
    });
    const page = await context.newPage();
    await page.goto('http://github.com');
    await page.screenshot({
      path: `github-${deviceName.replace(/ /g, '-')}.png`,
    });
  }
  await browser.close();
})();

每个浏览器上下文在 cookie、本地存储等方面都与其他上下文隔离，每个上下文也可以在其下有多个页面。

3. Playwright 和 Puppeteer 优劣势

3.1 Playwright 优与劣势

Playwright 具有以下显著优势：

• 通过单个 API，Playwright 允许开发者使用 Chromium、Firefox 或 WebKit 进行测试。 除此之外，跨平台框架在 Windows、Linux 和 MacOS 中运行速度很快。
• Playwright 支持 Python、Golang、Java、JavaScript 和 C#。
• Playwright 比大多数测试框架（如 Cypress）运行得更快。

同时 Playwright 还支持通过 Headless（这决定了是否在测试期间看到浏览器）、SlowMo（缓慢的移动降低了页面上动作之间的切换速度）、DevTools（在启动目标页面时打开 Chrome Dev Tools） 三种浏览器选项和页面方法控制测试环境。

await playwright.chromium.launch({ devtools: true });

当然，除了以上的优势外，Playwright 也有自己的一些劣势，比如：

• Playwright 缺乏对 Ruby 和 Java 的支持。
• Playwright 使用桌面浏览器来模拟移动设备，而不是真实的设备。

3.2 Puppeteer 优与劣势

Puppeteer 是 JavaScript (Node.js) 的自动化库，与 Playwright 不同，Puppeteer 默认下载并使用 Chromium。它更侧重于 Chrome DevTools，使其成为网络抓取的首选库之一。

Puppeteer 的主要优势包括：

• Puppeteer 简化了浏览器自动化的入门，它使用非标准的 DevTools 协议控制 Chrome。

当然 Puppeteer 也有其自身的一些不足。比如： Puppeteer 仅支持 JavaScript (Node.js)， 虽然对 Firefox 支持的开发正在进行中，但 Puppeteer 目前仅支持 Chromium。

大多数 Playwright 的浏览器选项（如：headless、slowMo 和 devtools）都可以在 Puppeteer 中直接使用。

await puppeteer.launch({ headless: false, slowMo: 500, devtools: true });

4.Playwright vs. Puppeteer 对比

4.1 Playwright 的开发者数据对比

从 Github 数据来看，两者都是非常优秀的库，虽然目前 puppeteer（82.4k）的 star 领先于 playwright(49k)，但是考虑到 playwright 的项目周期比 puppeteer 要短，两者的差距也在明显缩小。

从 NPM 的下载数据来看，playwright 的周下载量 1388k，而 puppeteer 为 3431k，考虑到 playwright 支持了多语言，NPM 统计数据可能只是一方面。

4.2 Playwright 和 Puppeteer 差异

4.2.1 Playwright 语言和浏览器支持更广泛

Puppeteer 和 Playwright 都是无头浏览器，最初设计用于 Web 应用程序的端到端自动化测试。 它们也可以被用于其他目的，例如网页抓取。 尽管具有相似的用例，但两种自动化工具之间存在一些关键差异，其中包括：

• Playwright 支持 Python、Golang、Java、JavaScript 和 C#，而 Puppeteer 仅支持 JavaScript，尽管有 Python 的非官方端口。
• Playwright 支持三种浏览器：Chromium、Firefox 或 WebKit， 而 Puppeteer 仅支持 Chromium。

4.2.2 Playwright 比 Puppeteer 更好么

对于 Puppeteer 与 Playwright 之间哪个选项更好，没有直接的答案，因为它取决于多种因素，例如：长期库支持、跨浏览器支持以及对浏览器自动化的特定需求。

以下是 Playwright 和 Puppeteer 的一些显著特征：

Web 爬虫的一个常见问题是，某些网站检测到机器人会阻止无头浏览，尤其是当单击按钮并快速发送多个流量时，一种可行的解决方案是在后续操作之前引入计时器。

例如，可以对 Puppeteer 进行编程以模仿（人类）用户，方法是在登录表单中输入详细信息后等待 0.1 秒再单击按钮。 然而，多个计时器的缺点是它们会减慢浏览速度，而且大多数网站甚至可以检测到它们。

ZenRows API 完美地解决了这个问题，它可以为开发者处理所有的反机器人和验证码绕过，而这只是它的一小部分能力，关于 ZenRows 可以参考文末资料。

5.本文总结

本文主要和大家介绍 PhantomJS 的替代品 Playwright，同时和 Puppeteer 进行了简单对比，比如两者的优缺点。因为篇幅有限，文章并没有过多展开，如果有兴趣，文末的参考资料提供了优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://www.zenrows.com/

https://www.zenrows.com/blog/playwright-vs-puppeteer#puppeteer

https://blog.logrocket.com/playwright-vs-puppeteer/

https://github.com/microsoft/playwright

https://www.zenrows.com/blog/playwright-vs-puppeteer#is-playwright-better-than-puppeteer

https://github.com/puppeteer/puppeteer