Playwright系列(7):用VSCode 开始写Playwright 脚本

简介: Playwright系列(7):用VSCode 开始写Playwright 脚本

大家好,我是阿萨。Playwright Test是专门为适应端到端测试的需要而创建的。Playwright支持所有现代渲染引擎,包括Chromium、WebKit和Firefox。在Windows、Linux和macOS上测试,在本地或CI上测试,无头或有头的Google Chrome for Android和Mobile Safari的本地移动仿真。


通过安装 Playwright 并生成一个测试来查看它的运行情况,即可开始。另外,你也可以使用CLI开始并运行你的测试。


安装

从组件市场上或从VS Code的扩展标签中安装VS Code扩展。



用于Playwright的VS Code扩展

安装完毕后,打开命令面板并输入。



安装 Playwright


安装 Playwright

选择测试:安装 Playwright 并选择你想运行测试的浏览器。这些可以在以后的playwright.config文件中进行配置。你还可以选择是否要设置GitHub Actions来在CI上运行你的测试。


选择浏览器

运行测试

你可以通过点击你的测试块旁边的绿色三角形来运行单个测试。Playwright将运行测试的每一行,当它完成时,你会看到你的测试块旁边有一个绿色的勾,以及运行测试的时间。



运行单个测试

运行测试并显示浏览器

你也可以通过选择测试侧边栏中的显示浏览器选项来运行你的测试并显示浏览器。然后,当你点击绿色三角形来运行你的测试时,浏览器会打开,你会直观地看到它在你的测试中运行。如果你想在所有的测试中打开浏览器,请保留这个选项;如果你想让你的测试在无头模式下运行,不打开浏览器,请取消选择。


运行测试时显示浏览器

使用关闭所有浏览器按钮来关闭所有浏览器。



查看和运行所有测试

在测试侧边栏中查看所有测试,通过点击每个测试来扩展测试。没有运行过的测试,旁边不会有绿色的复选。当你在测试侧边栏的测试上悬停时,点击白色三角形来运行所有测试。



运行文件中的所有测试

在特定的浏览器上运行测试

VS Code测试运行器在默认的Chrome浏览器上运行你的测试。要在其他/多个浏览器上运行,请点击播放按钮的下拉菜单,选择另一个配置文件,或通过点击选择默认配置文件来修改默认配置文件,并选择你希望运行测试的浏览器。


选择浏览器

选择各种或所有配置文件,在多个配置文件上运行测试。这些配置文件从playwright.config文件中读取。要添加更多的配置文件,如移动配置文件,首先要把它添加到你的配置文件中,然后它将在这里可用。



选择默认配置文件



调试测试

通过VS Code扩展,你可以在VS Code中调试你的测试,查看错误信息,创建断点和实时调试你的测试。


错误信息

如果你的测试失败了,VS Code会在编辑器中显示错误信息,显示预期的内容,收到的内容,以及完整的调用日志。



VS Code中的错误信息

在调试模式下运行

要设置一个断点,请点击你想设置断点的行号旁边,直到出现一个红点。在调试模式下运行测试,右击你想运行的测试旁边的行。一个浏览器窗口将打开,测试将运行并在设置断点的地方暂停。



设置调试测试模式

实时调试

你可以在调试时在VS Code中修改你的测试,Playwright会在浏览器中突出显示选择器。这是一个很好的方法,可以看到选择器是否退出或是否有多个结果。你可以在VS Code中的菜单中逐步进行测试,暂停测试并重新运行测试。



在VS Code中进行实时调试

在不同的浏览器上调试

通过从下拉菜单中选择一个配置文件,在特定的浏览器上调试你的测试。设置默认的配置文件或选择一个以上的配置文件来调试各种配置文件。Playwright将启动第一个配置文件,一旦完成调试,它将启动下一个配置文件。


对特定的配置文件进行调试

要了解更多关于调试的信息,请看Visual Studio Code中的调试。


生成测试

当你在浏览器中执行操作时,CodeGen会自动为你生成测试,这是一个快速入门的好方法。浏览器窗口的视口被设置为一个特定的宽度和高度。参见配置指南以改变视口或模拟不同的环境。


记录一个新的测试

要记录一个测试,请点击测试侧边栏的 "记录新测试 "按钮。这将创建一个test-1.spec.ts文件,并打开一个浏览器窗口。在浏览器中,进入你想测试的URL,开始点击。Playwright将记录你的操作并为你生成一个测试。一旦你完成了记录,点击取消按钮或关闭浏览器窗口。然后你可以检查你的test-1.spec.ts文件,看到你生成的测试。



开始录制脚本记录一个新的测试片断。这将创建一个新的空测试文件,但记录是从上一个测试的当前浏览器状态开始,而不是启动一个新的浏览器。然后,这个片段可以粘贴到以前的测试文件中,这样它就可以正常运行。注意在下面的例子中,测试从先前测试的最后一个状态开始,因此没有page.goto()动作。从一个特定的浏览器状态记录一个测试挑选一个选择器挑选一个选择器,并通过点击测试侧边栏中的挑选选择器按钮将其复制到测试文件中。然后在浏览器中点击你需要的选择器,现在它将显示在VS Code的选择器框中。按键盘上的'enter'键,将选择器复制到剪贴板上,然后粘贴到代码的任何地方。如果你想取消,也可以按'escape'。



如果觉得阿萨的内容对你有帮助,欢迎围观点赞。

相关文章
|
5月前
|
Web App开发 JavaScript iOS开发
[√]使用vscode开发油猴Tampermonkey脚本
[√]使用vscode开发油猴Tampermonkey脚本
277 0
|
4月前
|
编解码
解决VScode安装Babel转码器报错:无法将“cnpm“项识别为cmdlet\函数、脚本文件或可运行程序的名称的问题
解决VScode安装Babel转码器报错:无法将“cnpm“项识别为cmdlet\函数、脚本文件或可运行程序的名称的问题
|
6月前
|
前端开发 JavaScript 编译器
【前端异常】vscode:无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称,Cannot find module ”webpack“
【前端异常】vscode:无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称,Cannot find module ”webpack“
247 0
|
Java C语言 C++
0基础都能看懂的 Visual Studio Code(VScode)使用脚本一键配置安装C/C++环境、编译运行Windows版本教程(内附脚本、安装包下载链接)
网上很多配置VScode的C、C++环境的教程,但是很多时候跟着从头到尾做了之后反而还是运行不了,于是笔者在网上翻阅资料后,发现了一个自动配置环境的脚本,亲测有效,大概5分钟就可以配置好环境了。直接进入教程。
0基础都能看懂的 Visual Studio Code(VScode)使用脚本一键配置安装C/C++环境、编译运行Windows版本教程(内附脚本、安装包下载链接)
|
资源调度
关于vscode,powershell运行yarn报错禁止运行脚本解决办法
关于vscode,powershell运行yarn报错禁止运行脚本解决办法
152 0
关于vscode,powershell运行yarn报错禁止运行脚本解决办法
|
28天前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
|
3月前
|
人工智能 JavaScript 程序员
Fitten Code:在VSCode插件市场备受欢迎的原因是什么?
随着AI技术的不断发展,AI在编写代码方面的能力也日益强大。充分利用AI的能力能够显著提高代码编写的效率和质量。今天我将向大家介绍一款备受瞩目的AI代码神器——Fitten Code,让我们一同揭开它神秘的面纱!
218 3
|
8天前
Vscode 插件-代码敲出不同的特效
Vscode 插件-代码敲出不同的特效
|
28天前
|
NoSQL 关系型数据库 开发工具
最新最全 VSCODE 插件推荐(2023版)
最新最全 VSCODE 插件推荐(2023版)
|
1月前
|
Java
VSCode 插件Code Runner 中文提示乱码
VSCode 插件Code Runner 中文提示乱码