​初学者的自动化测试路线图：Playwright和TypeScript

测试对于确保软件运行良好非常重要。测试自动化通过使用特殊的工具和程序快速准确地进行测试使这变得更容易。这有助于检查软件是否完成了它应该做的事情、它的性能如何以及它是否可靠。

通过自动化重复测试任务，团队可以显着加快测试过程，扩大测试覆盖范围，并提高软件产品的整体质量。值得注意的是，测试自动化在敏捷和 DevOps 等当代软件开发方法中发挥着关键作用，使团队能够以更精简、更高效的方式交付优质的软件产品。

什么是Playwright？

Playwright是软件测试行业最新的测试自动化工具。它由微软开发和支持，是UI和API测试的最佳工具之一。Playwright不需要任何复杂的配置。像Typescript、断言库、测试运行器等所有内容都默认打包在Playwright中。

使用Playwright的用户可以像使用手机一样使用Chrome、Edge、Firefox 和 Safari 等网络浏览器拍照、录制视频或在社交媒体上与他人互动。

• Playwright官方文档：

  https://playwright.dev

什么是TypeScript？

TypeScript 是 JavaScript 的超集，为该语言添加了静态类型。Playwright 是一个用于自动执行浏览器操作的工具，例如单击按钮、填写表单和在页面之间导航。TypeScript 提供类型检查和其他高级功能，可以改善与 Playwright 合作时的开发体验。

为什么PlayWright使用TypeScript？

Playwright 与 TypeScript 的结合为 Web 应用程序测试提供了强大的解决方案。Playwright支持自动化浏览器测试，支持模拟跨各种浏览器的用户交互。TypeScript为JavaScript添加了静态类型和高级功能，从而提高了代码质量和可维护性。

Playwright的主要特点和能力：

1. 自动化浏览器测试：Playwright通过提供与Web浏览器交互的高级API来简化端到端测试。

2.类型安全：TypeScript的静态类型确保代码的正确性，在开发早期捕获错误并提高代码的可维护性。

3. 测试框架：Jest、Mocha或Jasmine等流行框架可以与Playwright和 TypeScript 一起使用来定义测试用例并断言预期结果。

4.页面对象模型（POM）：实现POM允许将网页封装为对象，使测试模块化并且更易于维护。

5. 持续集成 (CI)：将 Playwright 测试集成到 CI 管道中，以便在代码更改时进行自动测试，确保及早检测到回归。

6. 报告和分析：Playwright支持生成详细的测试报告进行分析，帮助识别和诊断问题。

7. 自动等待：Playwright 在执行操作之前自动等待元素可操作，从而消除了人为超时的需要并减少了测试不稳定。

8. 浏览器上下文：Playwright 为每个测试创建一个浏览器上下文，相当于一个全新的浏览器配置文件，以零开销提供完整的测试隔离。创建新的浏览器上下文速度很快，只需几毫秒。

9. 跟踪和调试：Playwright 提供内置跟踪功能，可在测试运行期间捕获执行跟踪、视频和屏幕截图，帮助识别和调试问题并消除不稳定的测试。

10. 支持Shadow DOM和框架：Playwright的选择器可以穿透 Shadow DOM 并无缝进入框架，从而允许在测试期间与这些上下文中的元素进行交互。

11. 跨语言支持：Playwright支持多种编程语言，包括TypeScript、JavaScript、Python、Java和 .NET (C#)，使具有不同语言偏好的团队能够使用其首选语言进行协作并为测试工作做出贡献。

​

与Playwright一起使用的推荐 IDE 是 Visual Studio Code (VS Code)。

VS Code 是一款流行的轻量级代码编辑器，为TypeScript、JavaScript和调试功能提供出色的支持。它为Playwright提供无缝的开发体验，能够高效地编写、调试和测试 Playwright 脚本。

然而，值得注意的是，Playwright 是一个多功能框架，你也可以根据喜好使用其他IDE。一些开发人员还使用IntelliJ IDEA或WebStorm等JetBrains IDE进行Playwright开发。这些IDE提供代码完成、调试和集成终端支持等功能。

前提步骤

在本文中，在实际演示过程中，我们针对各自的库和应用程序使用了以下版本：

1.Playwright版本：1.42.1

2.VS Code版本：1.87.2

3.Node JS版本：v18.18.1

下载并安装VS代码

• 要下载VS code，请访问其官方网站并选择社区版本的 .exe 文件。

  （https://code.visualstudio.com/download）

• 下载完成后，启动 .exe 文件并继续安装 VS Code。

• 可以参考官方网站提供的说明来获取安装VS code的指导。

  （https://code.visualstudio.com/docs/setup/windows）

在Windows上安装节点

• 下载Node.js '. MSI 的安装程序，访问Node.js官方网站：

  https://nodejs.org/en/download/

• 运行Node.js安装程序

• 双击 .msi 安装程序

• 选择“下一步”直至“完成”按钮

• 使用“ C:\Users\Admin> node -v ”命令验证Node.js是否已正确安装。如果Node.js已完全安装在你的系统上，命令提示符将打印已安装的Node JS的版本

​

​

安装Playwright

安装Playwright有两种方法。

1.使用命令行

• npm init playwright@latest

​

2. 使用扩展

• 打开代码编辑器：启动你首选的代码编辑器。例如，如果你使用的是 Visual Studio Code (VS Code)，请在系统上打开它。

​

• 新建项目：创建一个新项目并在VS Code中打开。

​

• 导航到扩展市场：在代码编辑器中查找扩展市场。在VS Code中，你可以在左侧边栏或按 Ctrl+Shift+X 找到它。

• 搜索 Playwright 扩展：在扩展市场中，搜索 Playwright 扩展。可以通过在搜索栏中输入“Playwright”来找到它。

​

• 安装扩展：找到Playwright扩展后，单击其旁边的“安装”按钮。等待安装过程完成。

​

• 安装Playwright：按Ctrl + shift + P并在搜索框中搜索“Playwright”关键字。单击“安装Playwright”按钮并安装必要的浏览器。

​

​

​

测试用例创建

为了编写第一个脚本，我们首先需要创建一个javascript或typescript文件。

在此打字稿中，文件扩展名必须是 .ts。

​

我们可以将以下代码添加到文件中。

import test, { expect } from "@playwright/test";

import { chromium } from "playwright";


test.describe("Navigation Test", () => {


test("Verify that the user is navigate on the `Life At Jignect` page successfully", async () => {


//Page and browser

var browser = await chromium.launch();

var context = await browser.newContext();

var page = await context.newPage();


//Navigate to the URL

await page.goto(`https://jignect.tech/`);


//Locators

const menuText = page.locator(`//div[@id='site-header']//a[text()='About Us']`);

const subMenuText = page.locator(`//div[@id='site-header']//a[text()='Life at Jignect']`);

const headingText = page.locator(`//div[contains(@class,'heading')]`);


//Actions

await menuText.hover();

await subMenuText.click();

const titleText = await headingText.textContent();


//Assertion

expect(titleText).toBe('Life At Jignect');

});

});

让我们理解上面概述的示例。

Imports：

• 该代码首先从 @playwright/test 导入“test”和“expect”。它们分别用于编写测试和断言。

• 它还从“playwright”导入“chromium”，这是 Playwright 可以控制的浏览器引擎。

测试说明：

`test.describe()` 函数定义了一个名为“Navigation Test”的测试套件。测试套件是测试特定特性或功能的测试用例的集合。

测试功能：

• 在测试套件中，有一个使用 test() 函数定义的测试函数。此测试功能验证用户是否可以成功导航到“Life At Jignect”页面。

• 测试函数是使用异步函数定义的，因为它包含异步操作（例如，启动浏览器、导航到 URL、与元素交互）。

页面设置：

• 在测试函数中，使用 chromium.launch() 启动 Chromium 浏览器实例。

• 使用 browser.newContext() 创建新的浏览器上下文。

• 使用“context.newPage()”在浏览器上下文中打开一个新页面。

断言：

• 最后，使用“expect()”函数进行断言，以验证从标题元素检索的“titleText”是否等于“Life At Jignect”。

运行创建的测试用例并检查结果

1. 编写测试脚本后，运行测试并仔细检查结果。

有两种方法可以运行测试脚本。

• 打开终端并输入命令：npx playwright test {testname}。

​

• 另一种方法是单击代码中的绿色三角形。

​

2. 测试运行结果

​

结论

总之，Playwright与TypeScript的集成为 Web 应用程序测试提供了功能强大且高效的解决方案。Playwright 通过其高级 API 和全面的功能简化了浏览器自动化，而 TypeScript 通过静态类型和高级语言功能增强了代码质量和可维护性。它们共同使开发团队能够加速测试流程，提高测试覆盖率，并以简化且高效的方式交付优质的软件产品。通过利用 Playwright 和 TypeScript，团队可以有效、自信地实现其测试目标，确保其 Web 应用程序的可靠性和性能。

然而，需要注意第是，Playwright的一些限制：

• 不支持全屏功能。

• 不支持同时使用多个定位器。

最后感谢每一个认真阅读我文章的人，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走：【文末自行领取】

​

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！