如何在Selenide中高亮所有包含指定文本的表格行？

原生Selenium实现逻辑 #

原本使用原生Selenium可实现访问指定页面后，高亮所有包含“Florian”的表格行，代码如下：

@Test
public void tableTest() {
    getDriver().get(BASE_URL + "tabulka.php");
    List<WebElement> rows = getDriver().findElements(By.xpath("//table//tbody//tr"));

    for (WebElement row : rows) {
        if (row.getText().contains("Florian")){
            ((JavascriptExecutor) getDriver()).executeScript("arguments[0].style.border='3px solid red'", row);
        }
    }
}

Selenide问题原因分析 #

问题1：断言style属性无实际高亮效果 #

你写的row.shouldHave(Condition.attribute("style", "border: 3px solid red;"))是断言验证操作，它仅用于检查元素是否已拥有指定的style属性值，而非主动为元素设置样式。所以测试通过只能说明元素原本就符合该样式条件，不会主动添加样式，自然看不到高亮效果。

问题2：highlight()仅高亮第一个匹配行 #

• 第一个测试的循环中，Selenide的highlight()默认是短暂高亮（默认150毫秒），循环执行速度过快，后续行的高亮瞬间消失，视觉上仅能看到第一个行的高亮效果；
• 第二个测试里，$x("//table//td[text()='Florian']")本身只会定位到第一个匹配的td元素，后续的.findAll(...)仅获取了所有元素，但未对每个元素执行高亮操作，属于无效代码。

正确实现方案 #

方案1：复用原生JS设置永久边框（与原逻辑一致） #

直接使用Selenide的executeScript方法执行JS，给符合条件的行设置边框样式，效果和原生Selenium完全一致：

@Test
public void tableTestSelenideJs() {
    open(BASE_URL + "tabulka.php");
    ElementsCollection rows = $$("#table tbody tr");
    
    for (SelenideElement row : rows) {
        if (row.getText().contains("Florian")) {
            executeScript("arguments[0].style.border='3px solid red'", row);
        }
    }
}

方案2：改进highlight()，增加延迟显示 #

如果需要使用Selenide自带的highlight()临时高亮效果，需在每次高亮后添加延迟，保证高亮效果可见：

@Test
public void tableTestSelenideHighlight() {
    open(BASE_URL + "tabulka.php");
    ElementsCollection rows = $$("#table tbody tr");
    
    for (SelenideElement row : rows) {
        if (row.getText().contains("Florian")) {
            row.scrollTo().highlight();
            // 延迟500毫秒，可根据需求调整时长
            sleep(500);
        }
    }
}

方案3：直接定位目标行（更简洁） #

用XPath直接筛选所有包含“Florian”的表格行，减少遍历判断的冗余代码：

@Test
public void tableTestSelenideDirect() {
    open(BASE_URL + "tabulka.php");
    // 直接定位所有包含"Florian"文本的tbody行
    ElementsCollection florianRows = $$x("//table//tbody//tr[contains(., 'Florian')]");
    
    // 设置永久边框
    for (SelenideElement row : florianRows) {
        executeScript("arguments[0].style.border='3px solid red'", row);
    }
    
    // 或者逐个高亮（加延迟）
    /*
    for (SelenideElement row : florianRows) {
        row.scrollTo().highlight();
        sleep(500);
    }
    */
}

内容的提问来源于stack exchange，提问作者Michal Mariančik