《刚刚问世》系列初窥篇-Java+Playwright自动化测试-40-highlight() 方法之追踪定位 （详细教程）

1.简介

在之前的文章中宏哥讲解和分享了，为了看清自动化测试的步骤，通过JavaScript添加高亮颜色，就可以清楚的看到执行步骤了。在学习和实践Playwright的过程中，偶然发现了使用Playwright中的highlight()方法也突出显示Web元素，看这个单词的字面意思就是高亮。与之前的方法有异曲同工之妙。而且很简单，直接调用就可以了，不像之前还得自己写JavaScript脚本，这对于不会JavaScript小伙伴或者童鞋们可算作是一大福音。highlight()方法可以突出显示Web元素，方便测试人员自己调试和可视化操作。

2.测试场景

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

3.高亮显示定位到的元素

在我们调试元素定位的时候，不知道页面上有多少个此类元素，不清楚页面上这个元素具体显示在什么位置，这时候就可以使用 locator.highlight（）。语法如下：

page.locator("#kw").highlight();

4.highlight实战

4.1highlight高亮单个元素

我们以度娘首页为例：高亮百度的搜索框（搜索框的元素id为kw）。

4.1.1代码设计

4.1.2参考代码

package com.bjhg.playwright;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

/**
 * @author 北京-宏哥
 * 
 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）
 * 
 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-40-highlight() 方法之追踪定位 （详细教程）
 *
 * 2026年01月08日
 */

public class Test_Highlight {
    
    public static void main(String[] args) {
        // TODO Auto-generated method stub
        try (Playwright playwright = Playwright.create()) {
            //1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(300));
            //2.创建context
            BrowserContext context = browser.newContext();
            //创建page
            Page page = context.newPage();
            page.screenshot();
            //3.浏览器访问demo
            page.navigate("https://www.baidu.com");
            Thread.sleep(300);
            //4.定位元素，调用方法，增加高亮
            page.locator("#kw").highlight();
            Thread.sleep(1000);
            System.out.println("Test Pass");
            //5.关闭page
            page.close();
            //6.关闭browser
            browser.close();
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }

}

4.1.3运行代码

1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作（百度搜索框被高亮显示）。如下图所示：

4.2highlight高亮多个元素

我们以度娘首页为例：高亮百度的搜索框（搜索框的元素id为kw）。

4.2.1代码设计

4.2.2参考代码

package com.bjhg.playwright;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

/**
 * @author 北京-宏哥
 * 
 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）
 * 
 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-40-highlight() 方法之追踪定位 （详细教程）
 *
 * 2026年01月08日
 */

public class Test_Highlight {
    
    public static void main(String[] args) {
        // TODO Auto-generated method stub
        try (Playwright playwright = Playwright.create()) {
            //1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(300));
            //2.创建context
            BrowserContext context = browser.newContext();
            //创建page
            Page page = context.newPage();
            page.screenshot();
            //3.浏览器访问demo
            page.navigate("https://www.baidu.com");
            Thread.sleep(300);
            //4.定位元素，调用方法，增加高亮
            page.getByText("百度").highlight();
            Thread.sleep(1000);
            System.out.println("Test Pass");
            //5.关闭page
            page.close();
            //6.关闭browser
            browser.close();
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }

}

4.2.3运行代码

1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作（所有关键词“百度”，都被高亮显示）。如下图所示：

宏哥讲解和分享的以上方法对于我们开发测试脚本和调试元素定位，是不是炒鸡方便？

4.3元素匹配器 - nth

将定位器返回到第n个元素。下标是从0开始的。nth(0)表示选择第一个元素。语法如下：

banana = page.get_by_role("listitem").nth(2);

4.3.1nth实战演示

依旧使用上面的例子对百度关键字进行定位点击，经过前边的定位调试，我们确定要定位第三个百度。

4.3.1.1代码设计

4.3.1.2参考代码

package com.bjhg.playwright;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

/**
 * @author 北京-宏哥
 * 
 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）
 * 
 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-40-highlight() 方法之追踪定位 （详细教程）
 *
 * 2026年01月08日
 */

public class Test_Highlight {
    
    public static void main(String[] args) {
        // TODO Auto-generated method stub
        try (Playwright playwright = Playwright.create()) {
            //1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(300));
            //2.创建context
            BrowserContext context = browser.newContext();
            //创建page
            Page page = context.newPage();
            page.screenshot();
            //3.浏览器访问demo
            page.navigate("https://www.baidu.com");
            Thread.sleep(300);
            //4.定位元素，调用方法，增加高亮
            page.getByText("百度").highlight();
            page.getByText("百度").nth(2).click();
            Thread.sleep(1000);
            System.out.println("Test Pass");
            //5.关闭page
            page.close();
            //6.关闭browser
            browser.close();
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }

}

4.3.1.3运行代码

1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作（开始看不到底部，最后操作后直接到底部）。如下图所示：

5.小结

今天主要讲解和介绍了在代码调试阶段使用highlight()方法使得元素高亮显示，帮助我们定位调试代码是否有问题，灵活使用高亮显示，可以提高我们的工作效率！好了，时间不早了，今天就分享到这里，感谢大家耐心的阅读！！！

6.扩展

6.1元素匹配 - first&last

和nth同理，first就是匹配第一个，last就是匹配最后一个。

first等同于nth(0)

last等同于nth(-1)

使用方法和nth一样

6.2代码示列

public void nthNews() {
        // 定位第二个百度并高亮
        page.locator("text=百度").nth(1).click();
        // 定位第一个百度
        page.locator("text=百度").first().click();
        // 定位最后一个百度
        page.locator("text=百度").last().click();
}