在VS Code中使用Playwright实现自动化测试（UI测试）

Contents

• 1. 概述
• 2. 操作步骤
  • 2.1 环境准备
  • 2.2 执行测试
    • 2.2.1 Playwright的控制面板
    • 2.2.2 执行单个测试用例
    • 2.2.3 执行多个测试用例
    • 2.2.4 选择多种浏览器
    • 2.2.5 显示浏览器（测试过程可视化）
    • 2.2.6 调式测试用例
  • 2.3 自动生成测试用例

1. 概述

Playwright是由微软开发和维护一个自动化测试工具，自2020年1月发布第一个版本以来，已经逐渐获得了广泛的关注和应用。

Playwright的诞生和发展，很大程度上源于微软团队对现有自动化测试工具（如Selenium和Puppeteer）的不足之处的思考。他们希望打造一个更快速、可靠，并能支持所有主流浏览器且具备现代化API的工具

Playwright保持了非常活跃的迭代节奏。其生态也越来越丰富，提供了包括测试运行器（Test Runner）、代码生成器（CodeGen）、调试工具（Inspector）、追踪查看器（Trace Viewer） 等一系列强大工具4，这些都极大地提升了自动化测试的体验和效率。

我们可以在 TypeScript, JavaScript, Python, .NET, Java中便捷调用Playwright的API，实现跨浏览器、跨平台、跨设备的自动化测试。

本文通过Vs Code作为示例，来体验Playwright在自动化测试用例的编写、调试、运行等方面的功能。

2. 操作步骤

2.1 环境准备

• 必要软件
  在下面的示例中，我们需要安装必要的两个软件

  • Nodejs：https://nodejs.org/
  • VS Code：https://code.visualstudio.com/

• 安装VS Code插件
  需要在VS Code中添加Playwright 插件（Playwright Test for VSCode），如果在不能连接互联网的环境中安装插件，需要参考对应的离线安装方法；参考下图，在VS Code中安装插件：
  

• 添加测试框架和示例代码
  使用VS Code打开项目源代码所在的文件夹后，打开命令面板（Ctrl+Shift+P），在命令行中输入“Test: Install Playwright”，并运行
  
  再选择浏览器，例如Chromium，Firefox，Webkit等，点击ok按钮：
  
  可以在命令行窗口中看到npm自动安装项目依赖包的过程和结果，还可以看到自动生成的代码框架和示例代码：
  

2.2 执行测试

• 2.2.1 Playwright的控制面板

打开Playwright的控制面板后，可以看到自动生成的测试代码，即测试用例；在上面的操作过程中，系统自动生成两个测试用例（has title和get start link）；我们可以按照Playwright提供的封装后的方法，自己编写测试用例：

• 2.2.2 执行单个测试用例

点击测试用例左侧的绿色箭头，就可以执行这个测试用例；当用例执行完毕后，可以在下方的“测试结果”中看到输出的结果；例如下面的测试结果为通过，文字颜色为绿色；如果错误则显示红色文字和描述

• 2.2.3 执行多个测试用例

鼠标放置到测试用例的文件名称上，自动出现运行测试用例的按钮，点击这个按钮，可以一次执行一个文件中的所有测试用例，甚至执行项目中的全部测试用例；

• 2.2.4 选择多种浏览器

可以使用多种浏览器作为被测环境，例如下面图我选择了Chromium(Chrome/Edge/Opera等）、Firefox、Webkit作为被测浏览器；执行测试后，可以看到所有测试用例都会被安排在不同的浏览器中执行，并在测试结果窗口中输出全部结果：

• 2.2.5 显示浏览器（测试过程可视化）

使用默认配置，所有测试过程都是在后台执行的，用户看不到测试过程；可以启用“显示浏览器”设置，在测试过程中提系统会自动弹出浏览器，并显示所有测试过程；

• 2.2.6 调式测试用例

可以在测试用例的代码中设置断点；再使用调试方式运行测试用例：

调试过程中，我们可以单步执行，并跟踪和分析调试过程中的数据：

2.3 自动生成测试用例

与大部分自动化测试工具一样，Playwright也可以通过捕获手动测试的过程，自动生成测试用例，将手动测试的过程转化为自动测试脚本，大幅提高编写自动化测试脚本的效率

• 点击Record new，启动自动生成测试用例的工具
  
• 系统会自动弹出选定的浏览器，你在浏览器的所有操作，都会被自动转化为自动化测试脚本
  
• 记录的测试脚本如下图；我们可以在此基础上添加断言、完善用例等
  

后续笔者还会介绍如何结合Azure DevOps MCP，使用Github Copilot的人工智能，将测试团队的功能测试用例自动转化为自动化测试用例。

https://www.cnblogs.com/danzhang
Azure DevOps MVP 张洪君