Playwright 与 Cypress：选择最佳测试框架 [2023]

构建应用程序时，测试是软件开发周期的一个重要阶段。测试使开发人员能够确定软件满足需求的程度，识别和解决软件中的错误和漏洞，并总体上改进和确认软件的质量。

如果没有适当的测试，您最终可能会发布低质量的软件，这些软件不能满足所有用户的要求，并且包含可能被恶意行为者利用的错误和漏洞。

软件测试很重要，但执行起来并不容易。手动测试软件，尤其是 Web 应用程序，可能是一个复杂、昂贵、耗时且痛苦的过程。

测试 Web 应用程序时，您需要模拟目标用户会执行的操作。因此，您必须执行用户可以执行的所有操作，从创建帐户到登录，再到与 Web 应用程序的各个元素进行交互。

手动执行此操作可能非常乏味、耗时且效率极低，因为错误可能会被忽视，或者测试可能不全面。这需要像 Playwright 和 Cypress 这样的工具来自动化在现代 Web 浏览器中测试 Web 应用程序的过程。

剧作家简介

Playwright是一个用于 Web 应用程序自动化和端到端测试的开源跨浏览器框架。自动化是指使用软件自动执行常见的 Web 操作，例如帐户创建、登录、填写表单和单击按钮。自动化允许软件以与人类用户相同的方式体验应用程序。

端到端测试是一种彻底且全面的测试策略，可评估和验证应用程序从开始到结束的完整流程。

Playwright 由 Microsoft 开发和维护，使用单一 API 跨 Chromium、Firefox 和基于 WebKit 的 Web 浏览器进行自动化和测试。

Chromium 是一个开源代码库和免费浏览器，用于构建其他浏览器。 Chrome、Microsoft Edge、Opera 和 Samsung Internet 等浏览器均基于 Chromium 代码。另一方面，WebKit 是 Safari Web 浏览器使用的浏览器引擎。 Playwright 允许您使用单个 API 在所有这些不同的浏览器上进行测试和自动化。

Playwright 允许您跨多个来源、选项卡和用户测试场景。您还可以为不同用户创建具有不同上下文的场景，并针对服务器运行它们。 Playwright 还具有帮助您避免不稳定测试的功能。这意味着您的测试将给出失败和通过的结果，而无需对测试或代码进行任何更改。

最重要的是，Playwright 配备了强大的工具，例如 Trace Viewer，它可以捕获 DOM 快照和测试执行截屏等信息，使您能够调查测试失败。

它还配备了 Codegen（允许您通过记录操作来生成测试）和 Playwright Inspector（允许您进一步检查测试执行情况）。

赛普拉斯简介

Cypress是一款与技术堆栈无关的开源工具，用于可靠地测试在 Web 浏览器上运行的任何内容。 Cypress 允许您设置、编写、运行和调试测试。

此外，您可以创建所有类型的测试，包括端到端测试、单元测试、集成测试和组件测试。无论您使用哪种编程语言来创建 Web 应用程序，Cypress 都可以可靠地测试可以在浏览器中运行的任何内容。

Cypress 在测试运行时拍摄快照，让您能够在测试中进行时间旅行。这使您可以看到每一步发生了什么。此外，当从公共线路接口运行时，赛普拉斯会自动拍摄整个测试套件的故障屏幕截图和视频。

除了在运行测试时控制和存根网络流量之外，Cypress 还允许您验证和控制服务器响应和功能行为。此外，赛普拉斯提供一致的测试结果并创建可读的错误和堆栈跟踪，使您可以轻松调试应用程序。

测试自动化工具：优点

使用 Playwright 和 Cypress 等网络测试和自动化工具的好处包括：

全面的测试覆盖率

Playwright 和 Cypress 等工具允许您对 Web 应用程序运行非常全面的测试。自动化测试工具允许您跨不同场景、上下文、配置、浏览器和条件对应用程序运行大量测试。

与人类手动测试（测试覆盖率通常非常低）不同，自动化和测试工具可以为您的应用程序提供更高的测试覆盖率。此外，您将能够对您的应用程序运行各种测试。结果是经过更好测试、更高质量的 Web 应用程序。

测试 Web 应用程序变得更加容易

Web 测试和自动化工具的主要卖点是它们使测试成为一种更轻松、更愉快的体验。手动测试非常困难，尤其是在不同浏览器和条件下彻底测试应用程序时。 Playwright 和 Cypress 等工具使测试 Web 应用程序的过程变得更加容易。

及早发现错误

自动化工具非常擅长查找 Web 应用程序中的错误。测试工具可以捕获开发人员可能错过的错误和错误。此外，它还通过生成可读的堆栈跟踪和错误消息来捕获 Web 应用程序中发生错误的位置的快照，从而简化了调试过程。

更快、更准确的测试

为了正确测试您的应用程序，您需要执行应用程序的目标用户可以执行的所有操作，并在不同的 Web 浏览器之间复制它们。手动执行此操作可能是一个非常耗时的过程。但是，Playwright 和 Cypress 等工具可让您更快、更准确地测试应用程序，从而减少部署应用程序所需的时间。

更好的测试报告和分析

自动化测试工具生成详细的测试报告。这使得开发和测试团队可以轻松跟踪测试过程，了解应用程序在不同场景中的行为，识别模式并获取支持决策过程的报告。此类报告和分析还可用于识别应用程序中需要改进的领域。

剧作家和赛普拉斯如何工作

Playwright 和 Cypress 是 Web 测试和自动化框架，它们模拟用户与 Web 应用程序的交互，以验证应用程序的行为是否符合预期、显示正确的信息并满足用户的要求。

为此，开发人员和测试人员使用工具创建脚本来模拟用户与 Web 应用程序的交互并自动执行用户可以执行的操作。例如，可以创建允许您打开浏览器、导航到特定 URL、登录应用程序、填写表单、单击按钮以及执行 Web 应用程序中可用的各种操作的脚本。

您创建的脚本决定了您在应用程序上运行的测试类型。 Cypress 等工具允许您执行各种测试，包括端到端测试、单元测试、组件测试和集成测试。

赛普拉斯测试脚本示例如下所示。

 describe('Example Test Suite', () => {
  it('Should visit example.com and interact with the page', () => {
    cy.visit('https://example.com');

    // Interact with elements on the page
    cy.get('input[type="text"]').type('Hello World!');
    cy.get('button[type="submit"]').click();

    // Verify behaviour is as expected
    cy.title().should('eq', 'Example Domain');
  });
});

下面显示了 Playwright 测试脚本示例。

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

(async () => {
  // Open the chromium browser
  const browser = await chromium.launch();

  // Create a page
  const page = await browser.newPage();

  // Open and access a URL
  await page.goto('https://example.com');

  // Work with elements on the page
  await page.fill('input[type="text"]', 'Hello World!');
  await page.click('button[type="submit"]');

  // Confirm if behaviours is as expected
  const title = await page.title();
  expect(title).toBe('Example Domain');

  // Close the browser
  await browser.close();
})();

为了操作 Web 应用程序上的元素，测试工具提供了选择器，可让您描述如何搜索 Web 应用程序上的特定元素，例如按钮、链接和输入字段。

一旦您确定了这些元素，测试工具就会提供允许您做出断言并确定 Web 应用程序的各个组件是否按预期工作的工具。

Playwright 和 Cypress 还能够记录测试并拍摄快照。这使您可以进行时间旅行并准确了解测试每个阶段发生的情况。

最后，测试和自动化工具提供详细的测试结果、日志和报告，以帮助识别问题、调试和跟踪被测应用程序中的测试覆盖率。

剧作家 vs. 赛普拉斯

Playwright 和 Cypress 都是非常强大的测试自动化工具。然而，它们在提供的功能方面略有不同。以下是每个工具提供的功能的比较：

使用 Playwright 和 Cypress 的示例

测试是任何软件开发周期的重要组成部分，这就是许多公司依赖 Cypress 和 Playwright 的原因。

例如，物流公司DHL需要一种方法来加快软件解决方案的部署，同时又不影响解决方案的质量。为了实现这一目标，他们使用了赛普拉斯。这提高了测试执行和覆盖率，改进了前端测试文化，并将测试执行时间缩短了 65%。

欧洲在线房屋预订服务Spotahome也在测试中使用了 Cypress。这使我们能够测试超过 160 个场景，每周管理 250 个部署，每周运行超过 130 个测试，并利用并行性节省 70% 的测试时间。

Gatsby是一个用于构建网站和应用程序的开源站点生成器，通过使用 Cypress 进行测试，能够接受更多开源贡献。借助 Cypress，Gatsby 更早、更频繁地发布更多功能，将公开 PR 的累积持续时间减少了 54%，并提高了可靠性和可信度。

Playwright 在企业、初创公司和开源项目中也很受欢迎。 Visual Studio Code、Bing、Outlook 和 Disney Hotstars 等应用程序都使用 Playwright 来测试其应用程序并确保高质量的应用程序发布。

Material UI、Adobe Spectrum Web Components、Lion 和 React Navigation 等开源项目都使用 Playwright 进行 Web 测试和自动化。

结论

测试是软件开发中的重要一步，如果您想发布满足用户需求的高质量软件，测试绝对不应该被忽视。正如您从突出显示的用例中看到的那样，测试对于公司或软件的整体性能有很多好处。

在选择测试工具时，Cypress 和 Playwright 都是非常强大且强大的网络测试和自动化工具。

这些工具允许您轻松地跨多个选项卡并行运行测试、用不同的编程语言编写测试、在所有流行的浏览器中运行测试以及访问高级功能如果您需要一个工具，Playwright 就是适合您的工具。

如果您的测试重点是前端测试，特别是那些使用 Angular、Vue 或 React 等 JavaScript 框架开发的测试，那么 Cypress 应该是您的首选工具。

如果您需要非常快的性能、测试驱动开发、本地开发、调试以及适合中小型项目的可靠工具，它也是一个很棒的测试工具。