大家好，我是阿萨。Playwright Test是专门为适应端到端测试的需要而创建的。Playwright支持所有现代渲染引擎，包括Chromium、WebKit和Firefox。在Windows、Linux和macOS上测试，在本地或CI上测试，无头或有头的Google Chrome for Android和Mobile Safari的本地移动仿真。
通过安装 Playwright 并生成一个测试来查看它的运行情况，即可开始。另外，你也可以使用CLI开始并运行你的测试。
安装
从组件市场上或从VS Code的扩展标签中安装VS Code扩展。
用于Playwright的VS Code扩展
安装完毕后，打开命令面板并输入。
安装 Playwright
安装 Playwright
选择测试：安装 Playwright 并选择你想运行测试的浏览器。这些可以在以后的playwright.config文件中进行配置。你还可以选择是否要设置GitHub Actions来在CI上运行你的测试。
选择浏览器
运行测试
你可以通过点击你的测试块旁边的绿色三角形来运行单个测试。Playwright将运行测试的每一行，当它完成时，你会看到你的测试块旁边有一个绿色的勾，以及运行测试的时间。
运行单个测试
运行测试并显示浏览器
你也可以通过选择测试侧边栏中的显示浏览器选项来运行你的测试并显示浏览器。然后，当你点击绿色三角形来运行你的测试时，浏览器会打开，你会直观地看到它在你的测试中运行。如果你想在所有的测试中打开浏览器，请保留这个选项；如果你想让你的测试在无头模式下运行，不打开浏览器，请取消选择。
运行测试时显示浏览器
使用关闭所有浏览器按钮来关闭所有浏览器。
查看和运行所有测试
在测试侧边栏中查看所有测试，通过点击每个测试来扩展测试。没有运行过的测试，旁边不会有绿色的复选。当你在测试侧边栏的测试上悬停时，点击白色三角形来运行所有测试。
运行文件中的所有测试
在特定的浏览器上运行测试
VS Code测试运行器在默认的Chrome浏览器上运行你的测试。要在其他/多个浏览器上运行，请点击播放按钮的下拉菜单，选择另一个配置文件，或通过点击选择默认配置文件来修改默认配置文件，并选择你希望运行测试的浏览器。
选择浏览器
选择各种或所有配置文件，在多个配置文件上运行测试。这些配置文件从playwright.config文件中读取。要添加更多的配置文件，如移动配置文件，首先要把它添加到你的配置文件中，然后它将在这里可用。
选择默认配置文件
调试测试
通过VS Code扩展，你可以在VS Code中调试你的测试，查看错误信息，创建断点和实时调试你的测试。
错误信息
如果你的测试失败了，VS Code会在编辑器中显示错误信息，显示预期的内容，收到的内容，以及完整的调用日志。
VS Code中的错误信息
在调试模式下运行
要设置一个断点，请点击你想设置断点的行号旁边，直到出现一个红点。在调试模式下运行测试，右击你想运行的测试旁边的行。一个浏览器窗口将打开，测试将运行并在设置断点的地方暂停。
设置调试测试模式
实时调试
你可以在调试时在VS Code中修改你的测试，Playwright会在浏览器中突出显示选择器。这是一个很好的方法，可以看到选择器是否退出或是否有多个结果。你可以在VS Code中的菜单中逐步进行测试，暂停测试并重新运行测试。
在VS Code中进行实时调试
在不同的浏览器上调试
通过从下拉菜单中选择一个配置文件，在特定的浏览器上调试你的测试。设置默认的配置文件或选择一个以上的配置文件来调试各种配置文件。Playwright将启动第一个配置文件，一旦完成调试，它将启动下一个配置文件。
对特定的配置文件进行调试
要了解更多关于调试的信息，请看Visual Studio Code中的调试。
生成测试
当你在浏览器中执行操作时，CodeGen会自动为你生成测试，这是一个快速入门的好方法。浏览器窗口的视口被设置为一个特定的宽度和高度。参见配置指南以改变视口或模拟不同的环境。
记录一个新的测试
要记录一个测试，请点击测试侧边栏的 "记录新测试 "按钮。这将创建一个test-1.spec.ts文件，并打开一个浏览器窗口。在浏览器中，进入你想测试的URL，开始点击。Playwright将记录你的操作并为你生成一个测试。一旦你完成了记录，点击取消按钮或关闭浏览器窗口。然后你可以检查你的test-1.spec.ts文件，看到你生成的测试。
开始录制脚本记录一个新的测试片断。这将创建一个新的空测试文件，但记录是从上一个测试的当前浏览器状态开始，而不是启动一个新的浏览器。然后，这个片段可以粘贴到以前的测试文件中，这样它就可以正常运行。注意在下面的例子中，测试从先前测试的最后一个状态开始，因此没有page.goto()动作。从一个特定的浏览器状态记录一个测试挑选一个选择器挑选一个选择器，并通过点击测试侧边栏中的挑选选择器按钮将其复制到测试文件中。然后在浏览器中点击你需要的选择器，现在它将显示在VS Code的选择器框中。按键盘上的'enter'键，将选择器复制到剪贴板上，然后粘贴到代码的任何地方。如果你想取消，也可以按'escape'。
如果觉得阿萨的内容对你有帮助，欢迎围观点赞。
