使用Playwright的highlight/方法进行自动化测试元素高亮显示

2024-04-24 12:24 网游攻略 投稿:运河边百科网

在之前的文章中,我们分享了如何通过JavaScript添加高亮颜色来清晰地展示自动化测试的步骤。在学习和实践Playwright的过程中,我们偶然发现了使用Playwright中的highlight()方法也可以突出显示Web元素,这为调试和可视化操作带来了便利。

在日常自动化测试中,有时会遇到一个定位表达式同时定位到多个元素的情况,甚至有些元素是不可见的,这会导致测试用例执行失败并增加调试难度。Playwright的highlight()方法可以直接提供一个高亮的方法来突出展示web页面上的元素,使得调试定位更加直观。

在调试元素定位时,我们经常会遇到不清楚页面上有多少个此类元素,以及这些元素具体显示在什么位置的情况。这时候就可以使用locator.highlight()方法来高亮显示Web元素。

我们以度娘首页为例,演示如何使用highlight()方法高亮显示百度的搜索框(搜索框的元素id为kw)。

运行代码后,控制台输出如下图所示:

运行代码后,电脑端的浏览器的动作如下图所示:

我们还可以使用highlight()方法高亮显示多个元素。以度娘首页为例,我们演示如何高亮显示百度的新闻(新闻的元素文本为<新闻>)。

运行代码后,控制台输出如下图所示:

运行代码后,电脑端的浏览器的动作如下图所示:

除了highlight()方法外,还可以使用元素匹配器 - nth来将定位器返回到第n个元素。下标是从0开始的。nth(0)表示选择第一个元素。

依旧使用上面的例子对新闻进行定位点击,经过前边的定位调试,我们确定要定位第一个新闻。

运行代码后,控制台输出如下图所示:

运行代码后,电脑端的浏览器的动作如下图所示:

今天我们主要讲解了在代码调试阶段使用highlight()方法使得元素高亮显示,帮助我们定位调试代码是否有问题,灵活使用高亮显示,可以提高我们的工作效率。感谢大家耐心的阅读!

此外,除了nth方法外,还可以使用元素匹配 - first&last。和nth同理,first就是匹配第一个,last就是匹配最后一个。使用方法和nth一样。

6.2代码示列

声明:运河边百科网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系站长删除。
加载中...