我的博客，不一样的自我表达

好的，我花了整篇文章向您展示如何使用 VsCode 运行或调试测试，因为很多时候我看到不知道如何调试的人，他们花了很多时间来查找问题和修复测试。首先，使用测试资源管理器面板右上角的命令，您可以决定是运行还是调试套件中的所有测试。使用测试资源管理器右上角的图标，您可以在调试模式下运行所有​​测试，对于每个带有断点的测试，VsCode 可以停止执行并允许您检查测试的状态。现在，在 VsCode 中，如果您打开测试资源管理器，您可以看到项目中的所有测试并直接从您的编辑器运行或调试它们。现在，是调试测试的时候了。

在 Source 视图中，您可以看到 Playwright 用于运行测试的所有代码，如果您单击其中一个操作，Playwright 会突出显示运行该操作的代码行。您可以通过单击这些操作之一在历史记录中导航，每次单击该操作时，右侧的面板都会显示该特定时刻的视图。最后但同样重要的是，Playwright 会不断将您的代码库与 Playwright UI Runner 同步，因此您可以通过这种方式更改和修复错误并立即重试测试.现在，如果您单击右侧部分中的一个测试，您可以看到在其执行期间发生了什么。

在我看来，这两种方式都很好，但是使用 csv 文件，您对代码和测试的控制较少，并且很容易面临不依赖于测试或代码但因为有人更改了文件的错误错误的方法。所以请注意谁动了文件😊。回到 Tic Tac Toe 应用程序，一个真实的例子可能是模拟不同的回合，并且对于每一回合，指示移动的顺序以及谁必须是赢家。在某些情况下，我们想要测试相同的行为但具有不同的值，因此在这些情况下，通常会为测试创建一个结构并使用不同的参数重用它。您可以创建一个包含不同案例的数组，并使用该for子句，您可以使用不同的参数调用测试 N 次。

如您所见，在这个示例中，我创建了一个身份验证流程，然后如果一切正常，测试将转移到获胜者的发布请求。（如果您的套件仅用于 API 测试，您可以只在一个浏览器上运行该套件，在这种情况下，我像之前的文章一样保留了该套件）看起来有点奇怪，但是正如你所看到的，通过这种方式，我为每个测试文件模拟了一个新的数据库，因此每个测试都有自己的数据库，并且不依赖于其他测试。通常，一个简单的 API 测试有这个流程，可能在你可以有一个登录请求之前，因为你的 API 正在认证中，但登录请求只是之前的另一个请求。

有时，您必须连续运行同一文件中的测试。这样，Playwright 会依次执行所有测试，但如果其中一个链失败，则后面的测试将不会执行，因此会被跳过。你必须把你的测试放在一个帮助文件中，然后你必须创建一个导入所有帮助程序的新文件，你必须将每个帮助程序包装在一个test.describe.配置文件的解决方案在测试套件的每个文件中启用并行性，而不是test.describe.configure()仅在单个文件中启用它。现在，我想您已经了解 Playwright 中的并行性是如何工作的，并且拥有处理它的所有概念。

重要的是要记住，默认情况下，Playwright 是严格的并检查每个像素的差异，但您可以使用阈值对其进行配置。您可以想象，Playwright 会尝试运行您的测试，但找不到可与您的结果进行比较的快照，因此它会针对每个平台（Chrome、Firefox 和 WebKit）引发错误。如果您运行命令npm run test-ct，现在测试套件已经通过，正如您可以想象的那样，Playwright 已经使用 maxDiffPixels 配置测试了您的新快照。完美，现在您已准备好创建您的第一个测试来检查视觉比较。

因此，正如您所注意到的，该page.route方法接受两个参数：第一个是您的 API 的 URL，第二个是用于处理您的请求的函数。很简单，如你所见，重要的是要记住请求的所有方法都返回一个 Promise，你必须使用 await 关键字来获取值。完美，您拥有模拟请求的所有工具。正如您所注意到的，您也可以expect在page.route. 因此，您可以检查请求是否以正确的方式被调用。现在，当您想要模拟 API 时，另一个重要的特性是返回自定义响应。现在是时候从您的请求中获取信息了，例如请求的方法和正文。

在选项卡 Actions 中，您可以找到正在运行的 CI，如果单击它，您可以看到正在运行的两个作业。'路径.github/workflows用于保存 GitHub 操作的文件，文件名对于 GitHub 并不重要，因为它的值在文件内部。首先，您必须创建一个playwright.yml在此路径中调用的文件.github/workflows。好，这就是所有的人，我认为您拥有将 Playwright 集成到您的 CI 中的所有信息，没有任何问题。当 CI 结束时，您确定您的测试如预期的那样正常。

在此示例中，您会将测试文件放在与组件相同的文件夹中。了解测试在不同的浏览器中运行很重要，因此您还可以在不同的视口中测试您的组件。正如您所注意到的，Playwright 默认在三种不同的浏览器中运行测试。使用该mount方法，您可以在 DOM 中呈现组件，然后您可以使用 Playwright API 检查结果。安装结束后，您的项目中将有一个名为：playwright-ct.config.ts. 该文件包含组件测试的配置。使用这些测试，您可以检查组件的正确逻辑或正确表示，并保证在不同浏览器中的正确呈现。

在这个函数中，您可以创建一个代表您的灯具的对象。例如，您可以覆盖页面对象，而不是创建一个beforeEach钩子来导航到主页，您可以覆盖页面并将此步骤添加到固定装置中，这样每个测试在执行之前都会运行导航到的步骤主页。固定装置是按需提供的——您可以根据需要定义任意数量的固定装置，Playwright Test 将仅设置您的测试所需的固定装置，而不会设置其他任何固定装置。太好了，我希望你能理解这个特性的不可思议的力量，以及它如何帮助你使你的测试更具可读性，或者将一些在许多测试中有用的数据汇集在一起​​。

让我们首先将测试名称从更改为，test并将should win the player "X"转到值从更改http://localhost:5173/为/，因为我们的基本根目录对应于主页。首先，您必须运行该应用程序，因此请输入您的终端npm run dev，然后您的应用程序将在该地址启动并运行http://localhost:5173。在本文中，您学习了如何记录您的步骤并将它们转换为测试代码。如您所见，生成的代码不错但并不完美，所以请把头放在肩膀上使用此工具，并每次检查结果以确保您的测试价值。

如您所见，现在您可以使用getByRolefrom the square 元素，该方法会尝试找到该元素的图像子元素。之后，使用toHaveAttribute断言，您检查此图像是否具有带“X”值的标题以及源是否包含值“x.png”。如您所见，使用这八个命令，您可以找到页面上的所有元素。查看前面的示例，您可以了解如何使用该getByRole方法获取 DOM 中的段落，然后检查您想要的任何内容。好的，快速回顾一下什么是定位器：定位器是帮助您在 DOM 中搜索元素的方法。正如您所注意到的，有一些新的东西。

使用 Playwright，此函数始终是异步函数，因为您在这些情况下的测试始终是异步的。好的，很酷，但现在是您使用 Playwright 编写第一个测试的时候了。现在，第一个，最重要的。在其中，您可以找到有关测试文件夹的配置、expect 函数使用的超时时间、Playwright 用于运行测试的浏览器的配置等等。现在，是时候检查测试是否在 Playwright 中运行了，但在此之前，您可以通过在 package.json 中添加一个新脚本来简化与 Playwright 的交互，如下所示。