软件测试|web自动化测试神器playwright教程（三十七）

使用Playwright的highlight()方法突出显示Web元素

简介

Playwright是一个强大的自动化测试工具，可以与Python集成，用于测试Web应用程序和执行自动化任务。其中，highlight()方法是Playwright的一个有用功能，可以突出显示Web页面上的元素，方便调试和可视化操作。本文将介绍Playwright库中的highlight()方法，以及如何使用Python进行集成和应用。

问题

我们在日常工作中，有时会遇到一个定位表达式，会同时定位到多个元素的可能，并且，有的元素是不可见的，这样一来，容易导致我们的测试用例执行失败，那么我们如何在调试定位的时候就让我们定位到的全部元素都比较直观的展示在我们眼前呢？selenium需要我们逐一去查看，而playwright就直接提供了一个高亮的方法来突出展示web页面上的元素。

实际示例

我们以百度首页为例，比如我们要定位百度首页的新闻元素，并且进行点击，那么我们的脚本应该如下：

from playwright.sync_api import Playwright, sync_playwright, expect


def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("https://www.baidu.com/")
    page.get_by_text("新闻").click()
    page.wait_for_timeout(10000)
    context.close()
    browser.close()
with sync_playwright() as playwright:
    run(playwright)

脚本运行结果如下：

playwright._impl._api_types.Error: Error: strict mode violation: get_by_text("新闻") resolved to 3 elements:
    1) <a target="_blank" href="http://news.baidu.com" cla…>新闻</a> aka get_by_role("link", name="新闻")
    2) <span class="text-color">互联网新闻信息服务许可证11220180008</span> aka get_by_role("paragraph").filter(has_text="互联网新闻信息服务许可证11220180008").locator("span")
    3) <span class="text-color">互联网新闻信息服务许可证11220180008</span> aka locator("div").filter(has_text="京ICP证030173号互联网新闻信息服务许可证11220180008").locator("span")

=========================== logs ===========================
waiting for get_by_text("新闻")
============================================================

我们可以发现，脚本运行报了发现多个元素，导致我们的点击操作报错。如果我们能在编写脚本之前就发现多个元素的问题，那么我们就能避免这个报错，这个时候我们需要引入playwright的元素高亮的操作，让我们的表达式找出的元素都高亮显示，我们就能知道我们需要的是哪个元素了。

highlight 操作

playwright提供了highlight()方法来帮助我们进行调试，等到代码正常运行时，我们其实不需要元素高亮。实现高亮的代码如下：

from playwright.sync_api import Playwright, sync_playwright, expect


def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("https://www.baidu.com/")
    page.get_by_text("新闻").highlight()
    page.wait_for_timeout(10000)
	context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

运行代码，界面如下：

总结

本文主要介绍了在代码调试阶段使用highlight()方法使得元素高亮显示，帮助我们确认定位代码是否有问题，灵活使用高亮显示，可以提高我们的工作效率！