Vaadin TestBench中含子项vcf-nav-item的getText()返回异常问题

当测试包含子项的<vcf-nav-item>时，直接调用getText()或使用textContent会返回父文本与所有子项文本的拼接结果（如ParentChild 1Child 2），而我们只需要父项的纯文本Parent。以下是几种可行的解决方案：

方案1：通过JavaScript提取直接文本节点内容 #

利用JavaScript过滤出<vcf-nav-item>下的直接文本节点，排除子元素的文本内容。修改自定义AppNavItemElement的getText()方法：

import com.vaadin.testbench.TestBenchElement;
import com.vaadin.testbench.elementsbase.Element;

@Element("vcf-nav-item")
public class AppNavItemElement extends TestBenchElement {
    @Override
    public String getText() {
        return executeScript(
            "const element = arguments[0];" +
            "return Array.from(element.childNodes)" +
            ".filter(node => node.nodeType === Node.TEXT_NODE)" +
            ".map(node => node.textContent.trim())" +
            ".join(' ')" +
            ".trim();", this
        ).toString();
    }
}

方案2：排除子项元素后提取父文本 #

先获取父元素的完整文本，再移除所有子<vcf-nav-item>的文本内容：

import com.vaadin.testbench.TestBenchElement;
import com.vaadin.testbench.elementsbase.Element;

@Element("vcf-nav-item")
public class AppNavItemElement extends TestBenchElement {
    @Override
    public String getText() {
        String fullText = this.getPropertyString("textContent").trim();
        // 遍历所有子nav-item，移除其文本内容
        for (AppNavItemElement child : this.$(AppNavItemElement.class).all()) {
            fullText = fullText.replace(child.getPropertyString("textContent").trim(), "");
        }
        return fullText.trim();
    }
}

方案3：定位组件内部的主文本容器（若存在） #

检查vcf-nav-item的Shadow DOM结构，若组件内部有专门承载主文本的元素（比如类名为nav-item-label的容器），可直接获取该元素的文本：

import com.vaadin.testbench.TestBenchElement;
import com.vaadin.testbench.elementsbase.Element;

@Element("vcf-nav-item")
public class AppNavItemElement extends TestBenchElement {
    @Override
    public String getText() {
        // 假设Shadow DOM内存在class为"label"的元素承载主文本
        return this.$(TestBenchElement.class).attribute("class", "label").first().getText();
    }
}

内容的提问来源于stack exchange，提问作者Tiago Roque