在playwright for Node.js中要避免的陷阱
#node #playwright

自动化测试已成为Web开发的基本组成部分，并且剧作家已成为最强大的端到端测试工具之一。得益于其强大的API和多浏览器支持，可以轻松测试网站和Web应用程序。

同时，如果未正确接近，剧作家可以提出一些挑战。几个陷阱会损害您的测试的有效性和性能，可能导致结果不准确。

在本文中，我们将涵盖开发人员在与剧作家打交道时应避免的七个最常见错误，以确保您的测试过程面向质量，高效且可靠。

是时候成为剧作家忍者！

在节点的剧作家中避免的7个常见错误。

让我们看一下在使用剧作家进行浏览器自动化时应避免的主要陷阱。

如果您想在潜水之前快速概述剧作家，请查看我们的帖子An Introduction to Playwright for Node.js。

1.为node.js配置剧作家

错误的剧作家配置可以导致失败，误报和不可靠的结果。为了避免这种情况，您必须正确设置该工具。剧作家支持几个configuration options，您应该特别注意：

  • 环境变量：测试可以在运行时访问ENV变量，从而避免脚本中的硬编码字符串和参数。环境变量是定义测试所需配置的好方法。例如，您可以使用它们来指定浏览器类型，页面超时，视口大小等。始终添加一些后备值，以避免END定义。
  • CLI参数：剧作家提供多个CLI（命令行接口）选项，以配置如何运行测试。熟悉所有可用的CLI options并学习其效果。例如，--headed或--headless标志控制是否应分别使用UI或无头模式启动浏览器。
  • playwright.config.ts：这是您可以在其中为所有测试定义设置的主要配置文件。例如，在这里，您可以启用跨浏览器测试，并强迫剧作家在指定的浏览器上运行测试。这对于确保跨浏览器兼容性并查看脚本在铬，firefox和/或webkit上的表现至关重要。

2.没有真正的理由编写简短测试

将每个断言分为单个测试以使测试简短是您不应该犯的错误。这种做法没有明显的好处，只会减慢测试执行。简短且集中的测试非常适合单位测试，但是在端到端的测试方案中，进行长时间的测试可以重现整个用户旅程。

目标是涵盖完整的应用程序。测试最终是否很长并涉及多个断言都没关系。当用户与您的应用程序进行交互时，他们会执行多个操作。

还请记住，如果测试失败，剧作家将为您提供特定的消息，以帮助您了解出了什么问题以及在脚本的哪个部分。只要它们易于阅读和维护，您就不必担心编写长脚本。

3.测试第三方应用程序

测试应用程序流程时，您可能会很想与第三方服务（例如，无头CMS）测试集成，但这是一个陷阱！

如Playwright official documentation中所述，您应该避免测试第三方应用程序和依赖项。这些不在您的控制之下，它们的行为或UI可能会改变而无需通知。与他们打交道可能会导致虚假负面因素，而您不想要。

相反，您应仅专注于应用程序中的测试元素和功能。如果您需要与外部服务互动，请利用Playwright Network API来模拟API响应，如下示例：

await page.route("https://api.your-cms.com/articles", (route) => {
  route.fulfill({
    status: 200,
    contentType: "application/json",
    body: JSON.stringify({
      articles: [
        {
          title: "An Introduction to Async Stack Traces in Node.js",
          description:
            "Let's dive into how async stack traces work and how they can be used to debug code.",
          url: "https://blog.appsignal.com/2023/05/17/an-introduction-to-async-stack-traces-in-nodejs.html",
        },
        // omitted for brevity...
      ],
    }),
  });
});

使用koude3功能，您可以模拟第三方服务的行为。当网页向https://api.your-cms.com/articles提出请求时，剧作家拦截了它并以模拟的JSON响应做出响应。这使您的测试更加孤立和可靠，即使没有第三方依赖性，也可以成功。

4.不使用适当的选择器

选择器在剧作家测试中起关键作用，因为它们使您能够识别和与HTML元素进行互动。
无法使用适当的选择器会导致片状结果，维护工作增加并降低了测试稳定性。

最常见的错误之一是使用过于通用的差选择器。正在测试的网页可能具有单个<span>元素，但是使用page.locator('span')选择它可能会导致对未来不正确元素的意外操作。那是因为<span>是一个非常通用的标签！

另一方面，过于特定的选择器可以将测试紧密地与页面结构。在这种情况下，目标页面的HTML的小更改可能会破坏您的测试。这可能导致经常进行测试失败，并且需要一致的维护。另外，长而复杂的选择器降低了代码可读性。

让我们考虑一个例子。假设您想以形式检索以下按钮：

<button class="form-button login-button" type="submit">Login</button>

此选择器太通用了：

page.locator("button");

这个太具体了：

page.locator("form > button.form-button.login-button");

虽然该元素对DOM的变化有弹性，并且足够限制以选择所需的元素：

page.getByRole("form > button", { type: "submit" });

设计合适的选择器是一门艺术。但是，请记住Playwright can generate test code在浏览器中采取操作时。多亏了此高级功能，该工具将分析目标页面的DOM并为您找出最佳选择器。

5.忽略剧作家的调试功能

不要忘记测试不仅会失败，这不仅是因为要测试的功能问题，而且还因为测试代码本身中的错误。这就是为什么调试脚本如此重要的原因。剧作家以几个高级，强大的内置debugging tools进行了救援。这些包括：

  • 调试模式：使用--debug选项进行测试打开Playwright Inspector。此GUI工具使您可以逐步浏览运行的脚本，实时编辑定位器，并查看可操作性日志。这是在剧作家（使用IDE的调试器）中调试测试的推荐方法的内置替代方法。如果您使用的是Visual Studio代码，请查看Playwright Test for VSCode extension。
  • logs ：如果您直接在脚本中使用console.log()，它将无法使用。要利用该功能，您需要用koude10方法包装它，如下： 
await page.evaluate(() => {
  console.log("Page title:", document.title);
});

控制台中的打印值将帮助您识别错误并了解代码的行为。

  • 断点：您可以使用koude11函数在测试中定义断点。遇到此指令时，剧作家将停止执行脚本，并等待用户单击页面覆盖中的“简历”按钮，或在DevTools Console中调用playwright.resume()。

6.无法处理错误

您的测试可能会引发错误和异常。忽略它们会导致误报或负面因素，从而破坏整个测试过程的有效性。为了避免这个问题，优雅处理异常和错误至关重要。

在剧作家中，您可以使用try-catch语句实现错误处理：

test("example test", async () => {
  // test logic...

  try {
    // specific test operation
  } catch (error) {
    // handle error here
  }

  // test continues...
});

在此示例中，try块包含可能会出现错误的测试代码。这将被catch块捕获，该块可能会记录一些数据，重试操作或根据特定情况采取其他操作。

因此，区分Node.js应用程序中的问题和测试中的错误很重要。实施适当的错误处理将帮助您识别和隔离后者。

7.依靠硬等待

硬等待（也称为静态等待等）涉及在特定时间暂停测试执行。
剧作家支持通过koude16功能的艰苦等待：

// wait for 2 second
page.waitForTimeout(2000);

官方文档将此功能标记为“灰心”，清楚地表明您绝对不应依靠它在生产中。原因是，在大多数情况下，几乎不可能知道保留的正确超时。同一测试可能会成功一次，然后由于网络放缓而失败。此外，硬等待会引入不必要的延迟。如果待处理的操作在指定的持续时间之前完成。

尤其如此。

因此，剧作家还提供内置的智能等待功能。这些使您能够等待特定事件发生，然后再进行测试执行。一些最受欢迎的是：

  • page.waitForSelector() ：等待直到匹配指定选择器的元素中存在。
  • page.waitForNavigation() ：等待导航事件发生，例如单击链接或提交表格，然后继续进行测试。
  • page.waitForFunction() ：等到提供的JavaScript谓词函数返回真实的值。

这些功能旨在等待动态元素，页面导航，网络请求和其他异步操作。多亏了他们，有可能在满足所需条件后立即确保测试的进度。

总结：不要让普通的剧作家错误慢慢您！

在这篇博客文章中，我们探索了您在剧作家中可能犯的最常见错误，它们对您的测试的影响以及如何避免它们。

您现在知道：

  • 配置剧作家并使用其所有功能的重要性
  • 从测试逻辑中排除哪些元素
  • 避免的功能和方法

感谢您的阅读！

P.S。如果您喜欢这篇文章，subscribe to our JavaScript Sorcery list每月深入研究更神奇的JavaScript技巧和技巧。

P.P.S。如果您需要node.js应用程序的APM，则GO和check out the AppSignal APM for Node.js。