Playwright教程。开始使用Playwright框架

{ "@context":"schema.org", "@type":"FAQPage", "mainEntity":[{ "@类型":"问题", "名称":"Playwright比selenium好吗？", "acceptedAnswer":{ "@type":"答案", "文本":"Selenium从网络开始就已经存在了，并且有广泛的浏览器支持。Playwright是一个后起之秀。然而，Playwright支持所有主要的浏览器，我不认为如果某些东西在它支持的浏览器中可以使用，在其他浏览器中就会成为问题。" } },{ "@type":"问题", "名称":"Playwright和selenium相似吗？", "acceptedAnswer":{ "@type":"答案", "文本":"在浏览器测试领域，Playwright和selenium似乎不相上下。Playwright在GitHub上有39.3K颗星，1.8K个GitHub分叉。Selenium比Playwright创建得更早，在GitHub上有23.9K颗星和7K个GitHub分叉。看起来Selenium比Playwright更受欢迎。" } },{ "@type":"问题", "名称":"Playwright有一个用户界面吗？", "acceptedAnswer":{ "@type":"答案", "文本":"Playwright默认会启动无头浏览器。它们不显示浏览器的GUI。相反，你将不得不通过命令行运行你的脚本。然而，你可以配置 Playwright 来启动完整的网络驱动浏览器。" } }] }

{ "@context":"schema.org/", "@type":"BreadcrumbList", "itemListElement":[{ "@type":"ListItem", "position":1, "名称":"首页", "项目":"www.lambdatest.com/blog/" },{ "@type":"ListItem", "position":2, "name":"博客", "项目":"www.lambdatest.com/blog/" },{ "@type":"ListItem", "position":3, "name":"Playwright教程。开始使用Playwright框架", "项目":"www.lambdatest.com/blog/playwr…" }] }

Playwright是一个我一直听说过的框架，但直到今年早些时候才有机会拿起来。从那时起，它已经成为我在建立新的自动化项目时最喜欢使用的测试自动化框架之一。 它很容易设置，功能丰富，是我使用过的最快、最可靠的框架之一。

我将指导你完成对Playwright框架的设置，这将使你能够为你未来的项目编写端到端的测试。我们还将挖掘它所提供的广泛功能，我们如何准备在LambdaTest云网格上执行的测试，以及对其他流行的集成的概述。

在这个Playwright 测试教程中，我将逐步介绍这个过程的每一个部分，这样你就可以跟上，从最初安装 Playwright 框架到全面执行一个测试套件。

那么，让我们开始吧!

目录

• 什么是 Playwright 框架？

• 为什么使用 Playwright 框架？

• 架构。Playwright框架

• 开始使用 Playwright 框架

• 创建你的第一个Playright项目

• 运行你的第一个Playwright测试

• VS Code 对 Playwright 的扩展

• 常见问题(FAQ)

什么是 Playwright 框架？

Playwright由微软团队建立，是一个用于端到端测试和自动化的框架，它已经慢慢建立起了知名度。你会看到它在大多数人最喜欢使用的框架中名列前茅。

2020年开发人员中的JavaScript状态调查显示，虽然Cypress的采用处于上升阶段，但Playwrights的采用仍然处于非常早期的发展阶段。然而，目前GitHub上Playwright的趋势表明，Playwright框架越来越受欢迎**（39.3k Star, 1.8k Fork, 和12.2k Active Users**）。

它不仅用途广泛，易于操作，而且具有快如闪电的执行速度和一些伟大的功能，如Trace Viewer和Test Generator，这些都是Playright框架所特有的。

• 痕迹查看器是一个GUI工具，可以用来在测试执行后查看Playwright的痕迹。如果你想试验一下，你可以在你的playwright.config.js中把 "trace "设置为 "on"。

测试执行完毕后，在你的test-results文件夹中会有trace.zip文件生成。

有几种不同的方式可以查看这些报告。

• 在你的网络浏览器中通过trace.playwright.dev/，在那里你可以拖放跟踪文件。
• 通过在你的CLI中执行以下命令。

npx playwright show-trace trace.zip

在执行上述任一过程后，你将看到Playwright Trace Viewer。在这里，你可以深入了解所执行的动作，执行的时间，传递的参数，进行的网络调用，以及执行过程中产生的任何日志。

你还可以将鼠标悬停在页面顶部的跟踪影片条上，查看执行过程中每个阶段的放大图像。

• 测试生成器是Playwright提供的一个浏览器工具，它可以记录在浏览器中执行的动作，并生成相应的代码。如果你想快速起草一些测试，或者提高团队中不太熟悉写代码的成员的技能，这很有用。

让我们通过一个快速的例子。我们将执行以下命令，用LambdaTest的Selenium Playground启动Playwright codegen。

npx playwright codegen lambdatest.com/selenium-playground

当这个命令被执行时，将启动两个窗口。第一个是你的网站，我们可以与之互动，进行点击、导航和输入数据。第二个是Playwright检查器，我们的代码将在这里被动态生成。

在第一次启动时，你会看到用于导航网站的基本Goto方法已经生成。

page.goto("https://www.lambdatest.com/selenium-playground/")

如果我们通过选择checkbox-demo例子中的一些复选框与页面互动，你会看到代码被动态生成。

最后值得一提的是，在Playwright检查器的右上方有一个 "目标 "下拉菜单。你可以从不同的语言列表中选择，并以你需要的语言导出代码。

为什么使用 Playwright 框架？

这是一个开源框架，在市场上相对较新，但正在快速建立人气。微软对其进行维护，因此，定期得到更新和改进。如果我们看一下在市场上已经存在了一段时间的类似框架的下载量，你可以看到Playwright已经爆红。

发布

除了标准的发布说明外，Playwright团队还以视频演练的形式提供他们的发布说明。这是我在其他主要框架中没有见过的，对于了解产品团队的情况来说，这是一个很好的方法。

这里是他们最近发布的一个小快照，他们讨论了他们对组件测试的新实现。

竞争者

你可能正试图决定从一个成熟的框架（如Selenium）迁移到Cypress测试自动化框架上，后者在社区中也越来越受欢迎。

我选择Playwright而不是其他的主要原因是它的直观性，以及它可以在多个页面和领域与浏览器互动的灵活性。最后，执行速度。速度就是一切。如果你不能快速运行你的测试，加快你的测试周期，你就不能快速交付你的产品。如果你不能快速交付你的产品，你会有很多不高兴的利益相关者和客户。

这是ChecklyHQ团队在对主要的自动化工具进行了深入的执行速度监测后制作的一份基准报告。正如你所看到的，它几乎不言自明。Playwright在3个方案中的2个方案中排名第一，紧随其后的是Puppeteer。

集成

这是我个人在选择新工具或框架时最重要的因素之一。它与我们目前的架构整合得好吗？最糟糕的感觉是，在实施某项服务后，才发现它没有原生的集成，而我们不得不开始建立自定义的webhooks或插件。

值得庆幸的是，Playwright团队已经解决了这个问题。有Docker镜像，所以你可以在一个隔离和受控的环境中快速执行测试。还有流行的顶级CI/CD工具的本地CI工具集成，包括GitHub Actions、Azure Pipelines、CircleCI、Jenkins和GitLab。

他们还为你现有的JavaScript测试运行器提供支持，如Jest/Jasmine、AVA和Mocha，如果你从现有的代码库移植，这很有用。

最后，它还与Selenium Grid直接集成。如果你打算大规模地运行较大的测试套件，并需要一个网格环境来管理并行执行，这一点至关重要。

Playwright框架的主要特点

以下是Playwright的一些主要特点，以及为什么你应该检查它

• 支持基于Chromium、WebKit和Firefox构建的跨浏览器平台--其中包括Chrome、Edge、Firefox、Opera和Safari。
• 支持在Windows、Linux和macOS上的跨平台执行。
• 支持跨语言，包括JavaScript、TypeScript、Python、Java和.NET--在适合你的环境中编写测试，同时仍然涵盖所有领域和格式。
• 内置自动等待，智能断言重试直到找到元素，以及测试数据跟踪--轻松跟踪日志、视频和屏幕截图。
• 采用现代架构，没有任何限制--像真正的用户一样与多页面、多标签的网站互动，并轻松解决框架和浏览器事件。

在线运行自动化的Playwright测试。现在就试试LambdaTest吧!

架构。Playwright框架

我们已经介绍了一些原因，为什么Playright在功能和执行层面上非常好用，但内部是什么情况？是什么让测试执行更加稳定，执行速度更快？

因此，理解这个问题的一个好方法是将其与Selenium进行比较--Selenium将每个命令作为一个单独的HTTP请求发送，并接收JSON响应。因此，每一次互动，如打开浏览器、点击元素或在Selenium中发送按键，都作为一个单独的HTTP请求发送。

你可以想象，这导致我们在等待响应时执行得更慢，并引入了一层潜在的不稳定因素。

另一方面，Playwright通过一个单一的WebSocket连接来通信所有请求，在测试执行完成之前保持不变。这减少了故障点，并允许在单个连接上快速发送命令。

开始使用 Playwright 框架

在我们深入了解安装和设置之前，让我们来介绍一些需要的基本前提条件。

• 确保你已经安装了NodeJS。
• 安装一个代码编辑器。我们将使用Visual Studio Code。

创建你的第一个Playwright项目

我将涵盖对Playwright的全面介绍，从最初的命令开始，一直到拥有一个完全运作的自动化项目。我们有几种不同的方法来安装Playwright。

使用VS Code扩展安装Playwright

按照下面的步骤，使用VS Code扩展来安装Playright。

1. 从Visual Studio Marketplace安装VS Studio。

3. 一旦安装完毕，打开 "视图 "标签下的 "命令调色板"，然后输入 "安装Playright"。确保你已经为你的项目创建了一个文件夹，该文件夹目前在VS Code中打开，因为新的Playwright文件将在这里生成。

5. 选择之后，你会看到下面的下拉选项，你可以选择要安装哪些浏览器。你还可以添加GitHub Actions，它将为你生成一个YAML构建文件。

7. 安装成功后，你应该在命令行中看到以下信息，它向你展示了一些你可以执行的命令以开始工作。

然后你就会有一个创建的项目，看起来像这样。

从命令行安装Playwright NPM包

这相当简单，我将逐步运行，以解释我们正在执行的内容和它的作用。

1. 运行这个命令来安装Playwright。

   npm init playwright@latest new-project
   

   new-project "参数是将被创建的文件夹，包含你所有的项目文件。这可以是任何东西，所以请随意使用适合你的项目类型的名称。

2. 一旦执行，你将看到多个提示，这些提示概述了你想如何配置项目。这些都可以用方向键或键盘选择。一旦你选择了所有选项，项目将被初始化。

4. 按照这些步骤，你会有一个类似于VS Code扩展工作流程的项目结构。唯一的区别是，命令行安装在选择JavaScript和TypeScript以及测试文件夹位置方面提供了稍多的定制。

一些文件和文件夹的名称可能会根据你在初始化过程中的选择而变化，但这里是我们的一个快速运行情况。

• workflows/playwright.yml。这是GitHub Actions的工作流程yaml文件。它将从GitHub平台上构建和执行你的测试。

现在，快速浏览一下它的实际操作 - 简单地说，"在"任何代码推送或合并拉动请求到主/主分支时，将触发一个构建。这个构建将在ubuntu-latest代理上运行，它将签出你的代码，安装node和npm依赖项。然后它将安装 Playwright 框架，开始测试执行，并在最后上传测试执行报告。

• node_modules。如果你以前用过JavaScript，你可能对这些非常熟悉，它们是我们可以在项目中安装的额外库。在我们的例子中，你可以看到Playwright模块，它允许我们访问来自Playwright库的额外功能。

• tests/example.spec.js：这是初始化Playright时产生的例子规格文件。总共有75个测试，涵盖各种不同的场景。这是理解语法和编写测试的一般方法的理想选择。

// @ts-check
const { test, expect } = require('@playwright/test');
 
test.beforeEach(async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc');
});
 
const TODO_ITEMS = [
  'buy some cheese',
  'feed the cat',
  'book a doctors appointment'
];
 
 
test.describe('New Todo', () => {
  test('should allow me to add todo items', async ({ page }) => {
    // Create 1st todo.
    await page.locator('.new-todo').fill(TODO_ITEMS[0]);
    await page.locator('.new-todo').press('Enter');
 
    // Make sure the list only has one todo item.
    await expect(page.locator('.view label')).toHaveText([
      TODO_ITEMS[0]
    ]);

• .gitignore。 这是一个常见的Git文件，它将排除那些我们不想提交到远程仓库的文件夹。它们将在构建和测试执行过程中动态生成。

• **package-lock.json/package.json。**package.json文件在项目的初始化过程中生成，包含了关于你的项目、测试执行的入口点、自定义脚本和包的依赖性的信息。package-lock.json的作用略有不同。它跟踪每一个安装的软件包的确切版本。关于这些文件为什么重要的更详细的信息，请参考NPM官方的package.json和package-lock.json文档。
• **Playwright.config.js：**这个文件包含你的Playwright项目所需的所有配置。你可以配置超时、并行、重试、报告者和浏览器，这只是一个简单的例子。它可以进行大量的定制和调整以满足你的测试套件的要求。你可以在这里找到完整的配置文档：https://playwright.dev/docs/test-configuration。

观看这个视频，了解更多关于设置Playwright测试自动化框架的信息。

订阅LambdaTest YouTube频道，随时了解围绕自动化浏览器测试、Cypress E2E测试、移动应用测试等的最新教程。

运行你的第一个Playwright测试

让我们运行一些测试，确保一切正常。在终端执行以下程序。

npx playwright test

这将是无头运行，所以你应该在终端看到测试执行时的活动。

我们有75个通过的测试，在42秒内执行。好东西!

如果你想看一下刚刚运行的测试，你可以打开example.spec.js。测试用例由语法 "test.describe "标记，在文件的顶部，你可以看到所需的包，每个测试前执行的步骤，以及测试中使用的一些列表数据。

工人

有几件事也要注意--我们有8个工作者正在使用。这意味着有8个不同的进程在并行运行，以执行我们的测试。请参考Playwright的官方文档，了解更多关于并行和分片的详细信息。

默认情况下，正在使用的工作器的数量总是8（未定义），当在CI环境中运行时，它将是1。你可以在playwright.config.js中改变这些值，根据你的硬件能力，并行运行更多或更少的测试。这值得在小范围内进行试验，以了解什么最适合你的需求，同时保持快速的测试执行时间。

报告

在你的测试执行后，你可能注意到的另一件事是这个片段。

//To open last HTML report run:
 
  npx playwright show-report

如果你执行该命令，一个浏览器窗口将在localhost上启动，它看起来像这样。

它为你提供了一份关于你最近的测试执行的漂亮报告，包括测试结果、测试案例、执行的浏览器和测试执行时间等信息。

在50多个浏览器和操作系统的组合上立即运行你的Playwright测试脚本。现在就试试LambdaTest吧

创建一个基本的 Playwright 测试

现在我们已经执行了一些基本的测试，让我们试着添加一些我们自己的测试吧在你的测试文件夹中添加一个名为 "form.spec.js "的文件

我们需要在文件的开头添加一行来访问Playwright模块和测试功能。从那里，我们定义我们的测试案例 "输入表单数据"。

我们正在创建一个'page'的实例来访问最常见的Playwright方法。我们将使用的第一个方法是'goto'，它将把我们导航到定义的URL。

const { test } = require('@playwright/test');
 
test('input form data', async ({ page }) => {
  await page.goto('https://www.lambdatest.com/selenium-playground/input-form-demo');
});

在终端中，导航到测试文件夹并执行以下命令。

npx playwright test form.spec.js

输出应该看起来像这样。

现在我们知道我们的新测试可以成功执行，让我们增加一点复杂性和一个断言，以确保我们的测试将捕捉实际问题。

这就是LambdaTest的Selenium Playground上的页面的样子。

我们将在所有的字段中输入数据。代码将看起来像这样。

await page.locator('[placeholder="Name"]').fill('Mr Test');
  await page.locator('[placeholder="Email"]').fill('randomemail@test.com');
  await page.locator('[placeholder="Password"]').fill('Abc123');
  await page.locator('[placeholder="Company"]').fill('Fake company');
  await page.locator('[placeholder="Website"]').fill('Fake website');
  await page.locator('select[name="country"]').selectOption('GB');
  await page.locator('[placeholder="City"]').fill('London');
  await page.locator('[placeholder="Address 1"]').fill('123 New road');
  await page.locator('[placeholder="Address 2"]').fill('New street');
  await page.locator('[placeholder="State"]').fill('New state');
  await page.locator('[placeholder="Zip code"]').fill('abc123');
  await page.locator('button:has-text("Submit")').click();

正如你所看到的，我们正在使用page.locator方法，然后是元素定位器，我们正在使用这个方法来填充空字段并点击提交按钮。

如果我们按原样执行这个测试，它仍然会通过。我们需要一个某种断言来验证测试的成功标准，如果不符合标准，就会失败。

在提交表单后，下面的页面会显示一个确认信息。

我们将断言确认信息元素对用户是可见的，代码如下。

const locator = page.locator('text=Thanks for contacting us, we will get back to you shortly.');
  await expect(locator).toBeVisible();

你可以执行这个测试，我们将再次看到它成功通过。让我们把断言改成不同的东西，确保它是一个有效的测试。

const locator = page.locator('text=Welcome back');
  await expect(locator).toBeVisible();

在再次运行这个测试后我们可以看到，现在它在第20行失败了，在那里没有显示预期的定位器。

这种终端记录对于快速找出测试失败的地方和原因非常有帮助。让我们恢复这个改动，并运行完整的测试。

很好!完整的表单提交和一个断言在4秒内完成。

让我们在3个不同的浏览器上运行同一个测试，看看报告。在终端中的命令末尾添加-browser=all。

npx playwright test form.spec.js --browser=all

而如果我们使用之前学过的命令，就可以查看html报告了。

npx playwright show-report

在这篇文章中，我们已经看到了如何为端到端测试自动化设置Playwright框架。到目前为止，我们已经学会了如何使用 Playwright 测试自动化框架执行一个简单的测试。

尽管Playwright有很多可以利用的功能，但它的真正潜力只能通过基于云的网格来评估。在接下来的Playright测试教程系列博客中，我们将学习如何在LambdaTest这样的云网格上运行Playright测试。

像LambdaTest这样的云测试平台允许你在一个由50多个浏览器和Chrome、Chromium、Microsoft Edge、Mozilla Firefox甚至Webkit等浏览器版本组成的在线浏览器农场上进行跨浏览器测试。你甚至可以并行运行你的Playwright测试脚本，将测试执行时间缩短数倍。

用于Playwright的VS Code扩展

现在，在我们总结之前，我想捋一捋你在VS Code中安装Playright测试扩展后得到的一些很棒的功能。作为提醒，你可以在这里找到，在打开扩展标签后。

现在，你会注意到我们在下面截图的左下方有一个测试图标。

从这里，我们可以看到项目中的所有测试。不仅如此，它还打开了一些非常好的集成功能供我们使用。

• 测试执行
  我们可以通过选择 "运行测试 "图标来执行测试，随着测试的进行，正在执行的代码行会被突出显示。
  
  除此之外，你还会注意到在每一行的末尾是以毫秒为单位的执行时间。我个人很喜欢这种数据，因为它可以让你根据你可以轻易获得的信息来调整和优化你的代码。
• 调试测试
  如果我们在测试中通过选择行号的左边设置一个断点，并在调试模式下运行测试，测试的执行将在这个点上停止。

在这个例子中，我在公司字段设置了一个断点，所以我们可以在这里暂停，看看测试到底在做什么。

• 实时代码编辑
  现在，这里有一个额外的功能，我觉得很神奇，主要是由于它是如何嵌入到测试执行中的。我们可以实时编辑代码中的元素，它将在浏览器窗口中更新。例如，我把定位器从'公司'改为'密码'，我们可以看到它移动了突出显示的定位器。

• 记录
  最后是'记录'选项。它的行为类似于'codegen'，我们在本博客的早些时候做过实验。当你选择 "记录 "时，一个窗口将被启动，并将生成一个规范文件。

当我们开始浏览并与页面互动时，代码将实时生成。

如前所述，这对于快速构建测试或培训你的团队中更多的初级成员是非常好的，他们可以将与页面的互动与书面的代码进行拼凑。

总结

Playwright是一个令人难以置信的多功能框架，其特点是使用起来非常愉快，当与行业中的其他框架并列时，这是很特别的，因为其他框架有时会是一个苦差事。

它使编写自动化测试变得非常简单，你可以在很短的时间内建立起大型测试套件。另外，入门门槛很低，所以如果你把它介绍给一个新的团队，它不会让人感到恐惧。

我希望你能从这篇文章中得到一些启发，并且希望Playwright能成为你未来最喜欢的自动化框架之一。

常见问题（FAQs）

Playwright比Selenium好吗？

Selenium从网络诞生之初就已经存在，并且有大量的浏览器支持。Playwright是一个后起之秀。然而，Playwright支持所有主要的浏览器，我不认为如果某样东西在它支持的浏览器中可以使用，在其他浏览器中就会有问题。

Playwright与selenium相似吗？

在浏览器测试领域，Playwright和selenium似乎不相上下。Playwright在GitHub上有39.3K颗星，1.8K个GitHub分叉。Selenium比Playwright创建得更早，在GitHub上有23.9K颗星和7K个GitHub分叉。看起来Selenium比Playwright有更多的采用。

Playwright有用户界面吗？

Playwright默认启动无头浏览器。它们不显示浏览器的GUI。相反，你将不得不通过命令行运行你的脚本。然而，你可以配置Playwright来启动完整的网络驱动浏览器。