在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中安装插件：