我从2023年初开始使用React，当时我的团队还没有任何UI测试。因此，我决定考虑引入Cypress。不过，我们也开始引入Web组件，并计划使用Storybook来记录和测试我们的Web组件。由于Storybook在幕后使用了Playwright，我研究了 Playwright可以提供什么。最初的诉求是：我的团队必须学习一个框架来测试Web组件和UI。

安装Playwright简直是轻而易举：不到一个小时，我就完成了所有测试。

● 编写测试所用的语法

编写Playwright测试就像编写普通的typescript代码一样简单，不需要学习特殊的API。最棒的是，你可以编写普通的async/await代码，因此你可以使用所有普通的typescript支持函数。比如：

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

test.describe('Playwright test with async/await', () => {
  function sleep(milliseconds: number) {
    return new Promise((resolve) => setTimeout(resolve, milliseconds));
  }

  async function asyncFunction(text: string) {
    console.log('started asyncFunction ' + text);
    await sleep(3000);
    console.log('finalized asyncFunction ' + text);
  }

  test('should open storybook and click around', async ({ page }) => {
    await page.goto('http://localhost:6006/');
    await page
      .getByRole('link', {
        name: 'Storybook 7.1.1 is available! Your current version is: 7.0.2 Dismiss notification',
      })
      .click();
    await page.getByRole('link', { name: 'Storybook' }).click();
    await page.locator('#internal-components-overview--docs').click();
  });

  test('should test the async methods used in previous example', async ({
    page,
  }) => {
    await asyncFunction('first');
    await asyncFunction('second');
  });
});

● 测试报告

这真是一个惊喜：我不需要做任何事情！

Playwright生成的开箱即用的报告非常棒。你还可以非常轻松地在多个浏览器上运行测试（只需更改配置，Playwright就会为你安装所需的浏览器）。

我将其配置为仅包含失败测试的跟踪信息、屏幕截图和视频；否则，就像 Cypress 一样，测试运行速度很慢。在下面的示例中，我们的第一次测试失败了。如果我们点击它，我们会得到以下信息：导致失败的异常、测试的哪些步骤失败、测试的视频以及完整的测试跟踪。

Playwright HTML 报告概述

测试失败的Playwright报告摘要

Playwright测试轨迹

● 如何运行head测试

Playwright是微软开发的，所以他们当然提供了VS Code的插件。我自己是IntelliJ的用户，但我发现当我想运行Playwright测试时，我会切换到VS Code。

与Cypress不同的是，你不必启动任何程序就能运行一个或多个测试。只需在VS Code中打开代码，然后点击通常的单元测试绿色三角形，如果过去已经运行过测试，则点击绿勾/红X。你还可以选择打开浏览器或跟踪查看器。

开发人员在这里的体验非常棒。测试打开速度快，反应灵敏。

● 如何在headless运行中访问浏览器控制台日志

与Cypress 一样，Playwright不会在Playwright运行的控制台中显示浏览器日志。为此，你可以扩展Playwright页面对象，将浏览器日志转发到控制台日志（还有其他方法，例如扩展测试对象本身）。

// utils/console.util.ts
export const configureLogForwarding = (page: Page) => {
  page.on('console', (msg) => {
    if (process.env.PLAYWRIGHT_LOG_TO_CONSOLE === 'true') {
      switch (msg.type()) {
        case 'info':
        case 'log': {
          // eslint-disable-next-line no-console
          console.log(`Log: "${msg.text()}"`);
          break;
        }
        case 'warning': {
          // eslint-disable-next-line no-console
          console.log(`Warning: "${msg.text()}"`);
          break;
        }
        case 'assert':
        case 'error': {
          // eslint-disable-next-line no-console
          console.log(`Error: "${msg.text()}"`);
          break;
        }
      }
    }
  });
};

// tests/demo-tests.spec.ts
test.describe('Playwright test with async/await', () => {
  test.beforeEach(async ({ page }) => {
    configureLogForwarding(page);
    hostAppNavigationPo = new HostAppNavigationPo(page);
    genericAssetModalPo = new GenericAssetModalPo(page);
  });
// ...

● 调试测试（Debugging Tests）

这是我最喜欢的功能之一。要调试测试，只需设置一个断点，然后右键单击绿色三角形/绿色滴点/红色x，再单击调试测试。浏览器将打开，运行将在断点处停止。从这里开始，就是开发人员习惯的正常调试会话。

在Playwright中启动调试会话

Playwright正在进行的调试会议

● 测试并行化

Playwright支持开箱即用的并行化（当然，你的被测系统当然必须能够支持并行运行的测试）。鉴于我们的CI/CD工具没有大量资源，因此速度很慢，因此我们在管道中关闭了并行测试。然而，当我编码时，我能够非常快速地在本地运行所有测试。当然，我们使用Playwright只有5个月左右，因此只有约80个测试。以下是一些非科学数据：~80个测试，在CI/CD中运行5分钟（1名工作人员），本地运行2分钟（1名工作人员），本地运行55秒（5名工作人员）。

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  /* other configuration... */
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Run tests in spec files in parallel */
  fullyParallel: true,
});

● 速度

当以headless形式运行等效测试时（就像在CI/CD管道中一样），Playwright比Cypress快约1.5倍。

此外，Playwright能够在不到一秒的时间内在浏览器上启动测试（在我的MacBook Pro上）。这意味着我可以随时以任何规格运行任何测试，而无需启动Playwright服务器等。与Cypress不同的是，你必须先启动Cypress UI，然后导航到你想在该UI中运行的测试。

这为开发者带来了绝佳的体验！

● 测试稳定性

过去5个月，我们一直在编写测试，还没有遇到任何不稳定的情况，也无需在测试中使用任何等待或休眠。由于我已不在原来使用Cypress的公司工作，我很难确定将那些不稳定的测试迁移到Playwright是否会使其稳定。

● 自定义命令

Playwright提供了一种扩展基础测试的方法，这样就可以在测试过程中轻松访问自定义命令和/或页面对象。这种模式简单易用、直观且类型安全。Playwright示例：

// my-test.ts
import { test as base } from '@playwright/test';
import { TodoPage } from './todo-page';

export type Options = { defaultItem: string };

// Extend basic test by providing a "defaultItem" option and a "todoPage" fixture.
export const test = base.extend<Options & { todoPage: TodoPage }>({
  // Define an option and provide a default value.
  // We can later override it in the config.
  defaultItem: ['Do stuff', { option: true }],

  // Define a fixture. Note that it can use built-in fixture "page"
  // and a new option "defaultItem".
  todoPage: async ({ page, defaultItem }, use) => {
    const todoPage = new TodoPage(page);
    await todoPage.goto();
    await todoPage.addToDo(defaultItem);
    await use(todoPage);
    await todoPage.removeAll();
  },
});

// example.spec.ts
import { test } from './my-test';

test('test 1', async ({ todoPage }) => {
  await todoPage.addToDo('my todo');
  // ...
});

● 录制测试

Playwright提供了使用VS Code插件录制UI测试的选项。你所需要做的就是按下Record new按钮，Playwright就会打开一个浏览器。然后输入网络应用程序的URL并开始点击。Playwright录制的最大优点是，如果存在data-testid选择器（await page.getByTestId(‘dialog-title’); ），它就会选择该选择器。

Playwright 还有许多其他优点，我在本文中没有介绍，主要是因为我没有大量使用这些方面，但这里有一些示例：

● iFrames

Playwright可以与iFrames兼容，使用起来非常流畅。在我目前的工作中，我们正在使用iFrames，但在我之前的工作中（当时我在Cypress工作），我们没有使用 iFrames。不过，据我所知，你需要安装Cypress插件才能测试iFrames。

● Web-app服务器

Cypress和Playwright都要求你的应用程序在运行时才能进行测试。对Cypress的一个普遍要求是，该框架能够在运行测试前启动被测系统。我个人在本地和在CI/CD管道中运行测试时，应用程序始终处于运行状态。不过，Playwright也听到了开发人员的愿望：

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  // Run your local dev server before starting the tests.
  webServer: {
    command: 'npm run start',
    url: 'http://127.0.0.1:3000',
    reuseExistingServer: !process.env.CI,
  },
});

● Forbid only关键字

一个常见的用例是，当开发人员想要运行单个测试时，他们将其标记为only. 不幸的是，他们经常忘记在提交之前删除它。Playwright附带了一个配置来检测这一点，而使用Cypress时我们必须添加eslint规则。

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
});

// example.spec.ts
test.describe('Playwright test with async/await', () => {

  test.only('should test the async methods used in previous example', async ({
    page,
  }) => {
    await asyncFunction1();
    await asyncFunction2();
  });

// more tests...

● 多页面

Cypress在其自己的Web应用程序内运行Web应用程序，这会限制Cypress一次只能在一页上运行测试。另一方面，Playwright可在每个浏览器中打开多个BrowserContext和/或多个页面，所有这些页面都有不同的网站/域等，并可在所有这些页面上运行测试。

● 多语言支持

在Cypress中，您可以选择使用JavaScript或TypeScript编写测试。然而，在Playwright中，编写测试的语言选项更加多样化。你可以选择使用JavaScript、TypeScript、Java、Python或 .NET编写测试，从而为开发人员提供了更大的灵活性，让他们可以使用自己喜欢的编程语言来实现测试自动化。

结论

多年来，我一直是Cypress的粉丝，也是UI测试的坚定拥护者，现在要开始使用一个我不确定是否会像Cypress一样优秀的新框架，这并不是一个容易的决定。尽管如此，我还是惊喜地发现Playwright不仅达到了Cypress的预期，而且在我能想到的所有方面都超过了Cypress。

最后，Cypress和Playwright的开发者社区都相当庞大。尽管Cypress仍然更受欢迎，但随着越来越多的开发者发现Playwright的开发者体验是如此令人惊叹，Playwright社区也在快速发展。

截至2023年7月29日的对比数据

建议任何已经在使用Cypress或正在考虑进入UI测试领域的人，将Playwright作为一个值得考虑的选择。

最后感谢每一个认真阅读我文章的人，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走：

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！