目录
4.3 打开Visual Studio并创建新的NUnit项目
1. 引言
在本演练中，我们将Visual Studio 2022 Community Edition与C#和NUnit配合使用，以开始使用Playwright。我们开发了一个简单的示例来介绍Playwright的基本功能，使用Windows 11机器。相同的示例也应该适用于MacOS和Linux计算机。
2. 背景
在自动化网络测试方面，用户面临着无数的工具选择。长期以来主导自动化领域的一种工具是Selenium。最近，剧作家也越来越受欢迎，这很好地引出了本指南的主题。对于测试自动化的新手或从Selenium系列过渡的人，本指南对Playwright进行了温和的介绍。
3. 安装Playwright
Visual Studio管理许多对Playwright开发至关重要的组件。但是，某些Playwright命令（例如代码生成器——CodeGen，我们稍后将使用它来记录我们的测试用例）依赖于Playwright CLI库。因此，建议在您的机器上安装以下组件。
3.1 安装Node.js
让我们验证我们的机器上是否安装了node.js。
- 打开CMD或PowerShell窗口并且输入node -v以检查是否安装了node.js。如果已安装，它将显示安装的版本。
- 如果未安装node.js，请下载并从以下链接安装：Node.js — Download Node.js®。
3.2 安装Playwright浏览器
让我们在我们的机器上安装Playwright浏览器。默认情况下，Playwright会安装以下三种浏览器：Chromium、Firefox和Webkit。
- 从工作目录打开CMD或PowerShell窗口。
- 执行以下命令，这将安装Playwright浏览器及其依赖项。
npx playwright install4. 安装Visual Studio
在本部分中，我们将提供安装Visual Studio、创建NUnit以及安装Playwright的NuGet包的步骤。
4.1 安装Visual Studio 2022（社区版）
对于不熟悉.NET环境的用户，请首先从此链接安装Visual Studio 2022 Community Edition。
安装完成后，将环境配置为使用C#。如果你的计算机上已经安装了任何版本的Visual Studio，那么你就准备就绪了！
4.2 为测试项目创建一个新文件夹
接下来，让我们在机器上创建一个名为PlaywrightDemo 的文件夹来托管playwright测试项目。
4.3 打开Visual Studio并创建新的NUnit项目
若要创建测试项目，请启动Visual Studio并使用NUnit模板创建新项目。生成的项目的基本结构应包括一个名为UnitTest1.cs 的测试用例，如下图1所示。
4.4 安装适用于Playwright的NuGet包
接下来，安装Playwright的NuGet包。为此，请右键单击测试项目（PlaywrightDemo），然后选择“管理NuGet包...”。打开 NuGet 包管理器窗口后，搜索以下包（如图2所示）并安装它们。
- Microsoft.Playwright
- Microsoft.Playwright.NUnit
- Microsoft.Playwright.TestAdapter
4.5 创建测试用例并手动运行
在开始自动化阶段之前，让我们首先熟悉用于自动化的测试用例的步骤。此测试用例的主要目标是通过手动执行步骤来验证给定方案的功能。完整的步骤如下表1所示。
我们之所以选择这个网站，是因为它具有全面的功能，反映了一个完全可操作的电子商务平台的功能。
5. 代码生成
Playwright提供了一个名为Codegen的GUI，用于从头到尾记录测试用例，包括各种类型的断言，例如断言可见性、断言文本和断言值。我们发现Codegen是自动化测试用例的绝佳工具，因为它具有直观直观的界面。此外，它还可以作为手动测试人员的文档工具，以捕获测试用例的步骤，从而增强手动测试人员、开发人员和自动化测试人员之间的沟通。
我们通过记录前面提供的示例测试并使用NUnit生成C#代码来说明Codegen的功能。
6. 录制测试——Codegen
若要在Playwright中记录测试，请在 PowerShell 窗口中执行以下命令。
图3.npx codegen命令
此命令启动记录器并打开2个窗口，（1）一个Playwright Inspector窗口，如图1所示，以及（2）一个显示站点主页的浏览器窗口，如图2所示。
请注意，当Codegen启动时，默认情况下会选择Node.js。所以，如果你正在使用Node.js，你就可以开始了。在我们的例子中，我们使用的是NUnit，因此请确保从下拉列表中选择该选项。
图4.剧作家检查器窗口
浏览器窗口在顶部显示五个选项。如果这些选项不可见，请通过在终端中运行“npx playwright --version”来确保安装了最新的Playwright版本。
图5.显示命令中指定的URL的浏览器窗口
6.1 剧作家代码生成器操作
-
记录
- 启动测试录制过程，允许用户与浏览器交互以执行测试方案的操作。
-
拣选定位器
- 完成录制过程后，按录制按钮停止录制。此时，“拾取定位器”按钮变为可用，其他断言选项显示为灰色，以引导用户选择相关选项以进行有效的元素识别。
- 单击“拾取定位器”（Pick Locator） 以识别并突出显示浏览器窗口中元素的定位器。
- 通过单击元素选择定位器，该定位器的相应代码将显示在检查器窗口的底部。
- 编辑字段中的定位器进行微调，或使用复制按钮将其复制以粘贴到代码中。
-
断言
- 使用以下选项根据记录的交互断言条件：
- “断言可见性”
- 验证某个元素在页面上是否可见。
- 选择“断言可见性”时，其他断言选项将显示为灰色。
- “断言文本”
- 验证元素是否包含特定文本。
- 选择“断言文本”时，其他断言选项将显示为灰色。
- “断言价值”
- 验证元素是否具有特定值。
- 选择“断言值”时，其他断言选项将显示为灰色。
- “断言可见性”
- 使用以下选项根据记录的交互断言条件：
这些操作可帮助用户使用特定的交互和断言创建和验证其测试。
现在，我们已准备好通过与浏览器交互来记录测试用例。该工具捕获我们的交互并在Inspector窗口中生成代码。
下面是我们为上面的测试用例生成的代码：
using Microsoft.Playwright.NUnit;
using Microsoft.Playwright;
using System.Text.RegularExpressions;
namespace PlaywrightDemoTests
{
[Parallelizable(ParallelScope.Self)]
[TestFixture]
public class PurchaseNotebooks_Asus : PageTest
{
// The following code is generated by Playwright's Codegen
// using a terminal window command.
// "npx playwright https://demo.nopcommerce.com/"
[Test]
public async Task ShouldSuccessfullyPurchaseAsusI7NotebookWith16GBRam ()
{
await Page.GotoAsync("https://demo.nopcommerce.com/");
await Page.GetByRole(AriaRole.Link,
new() { Name = "Computers" }).ClickAsync();
await Page.GetByRole(AriaRole.Link,
new() { Name = "Notebooks" }).First.ClickAsync();
await Page.GetByLabel("Intel Core i7").CheckAsync();
await Page.GetByLabel("16 GB").CheckAsync();
await Page.GetByRole(AriaRole.Link,
new() { Name = "Asus N551JK-XO076H Laptop",
Exact = true }).ClickAsync();
await Page.Locator("#add-to-cart-button-5").ClickAsync();
await Page.GetByRole(AriaRole.Link,
new() { Name = "Shopping cart (1)" }).ClickAsync();
await Expect(Page.Locator
("#shopping-cart-form")).ToContainTextAsync("$1,500.00");
await Page.GetByLabel("I agree with the terms of").CheckAsync();
await Page.GetByRole(AriaRole.Button,
new() { Name = "Checkout" }).ClickAsync();;
}
}
}生成的代码冗长、难以阅读，并且使用许多硬编码值，但这是一个好的开始。它开箱即用，它让我们可以自由地改进测试的结构和可读性。
7. 执行测试用例
生成代码后，只需将其复制并粘贴到测试用例中，然后运行测试即可。测试应该通过，但您会注意到没有浏览器。默认情况下，测试使用“Chronium”浏览器在无外设模式下运行。为了查看浏览器并使用Firefox而不是Chronium，我们创建了一个名为Headless.runsettings 的文件。
以下是创建此文件的步骤：
- 右键单击解决方案中的项目名称（PlaywrightDemo）
- 选择“添加”->“新项”
- 选择XMLFile.xml（将文件名更改为Headless.runsettings)
- 任何带有扩展名（.runsettings）的名称都应该有效。
- 粘贴图6中所示的代码：
<?xml version="1.0" encoding="utf-8"?>
<!-- Playwright Settings-->
<RunSettings>
<Playwright>
<BrowserName>firefox</BrowserName>
<LaunchOptions>
<Headless>false</Headless>
</LaunchOptions>
</Playwright>
</RunSettings>
<!--Figure 6. Headless.runsettings-->接下来，从 Visual Studio 的“测试”菜单中，选择：“
测试”->“配置运行设置”->“选择”解决方案范围的运行设置文件“，
然后选择刚刚创建的 XML 文件（即Headless.runsettings)
最后，生成解决方案并运行测试。这一次，它应该在可见的Firefox浏览器上运行。您可以尝试的三种类型的浏览器是：Chronium、Firefox和Webkit。
您可以在GitHub上找到完整的解决方案。请记住，最好的学习方式是练习。祝您测试愉快！
8. 结论
Playwright是端到端测试的绝佳工具，它为测试人员提供了自动生成代码并准备执行的能力。它为自动化项目提供了一个良好的起点。除了测试功能之外，Playwright 还可以作为手动测试人员、自动化专家、开发人员和其他利益相关者之间的沟通平台。在本指南中，我们演示了它在C#和NUnit框架中的使用。但是，Playwright旨在支持各种语言和测试框架，开箱即用，为各种测试方案提供灵活性。
兴趣点
- 请确保创建一个*.runsettings 文件，使浏览器在执行时可见
- 要使用其他浏览器，请在runsettings 文件中指定浏览器类型（包括：Chronium、Firefox和Webkit）。
- 使用Codegen可以快速启动测试自动化，但这只是一个起点。重构代码并使用页面对象模型是开发的下一个逻辑步骤。
https://www.codeproject.com/Tips/5376943/Getting-Started-with-Playwright-using-Visual-Studi
669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
