如何将多个Selenium WebElement封装为自定义组件适配Page Object Model

可行性结论 #

完全可以实现，这是Selenium组件对象模式的标准落地方案，原生PageFactory虽然不支持直接注入自定义类型列表，只需做少量适配即可达到你的预期效果。

1. 改造自定义Element组件类 #

给Element类传入每个列表项的根WebElement作为搜索上下文，用PageFactory注入子元素，避免全局定位匹配错误：

import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.FindBy;
import org.openqa.selenium.support.PageFactory;

class Element {
    @FindBy(className = "country")
    public WebElement country;

    @FindBy(className = "capital")
    public WebElement capital;

    public Element(WebElement rootElement) {
        // 以当前列表项根节点为上下文，查找内部子元素
        PageFactory.initElements(rootElement, this);
    }
}

2. 改造ListPage页面对象类 #

保留原生WebElement列表的注入逻辑，新增转换方法返回自定义Element列表：

import org.openqa.selenium.ChromeDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.FindAll;
import org.openqa.selenium.support.FindBy;
import org.openqa.selenium.support.PageFactory;
import java.util.List;
import java.util.stream.Collectors;

public class ListPage {
    ChromeDriver driver;
    
    @FindAll(@FindBy(xpath = "//div[@class='list']/div[@class='element']"))
    private List<WebElement> elementRoots;

    public ListPage(ChromeDriver driver) {
        this.driver = driver;
        PageFactory.initElements(driver, this);
    }

    // 封装转换逻辑，直接返回可用的Element列表
    public List<Element> getElements() {
        return elementRoots.stream()
                .map(Element::new)
                .collect(Collectors.toList());
    }
}

3. 调用方式 #

完全符合你预期的调用习惯：

ListPage listPage = new ListPage(driver);
// 获取第1个列表项的国家名称
String firstCountry = listPage.getElements().get(0).country.getText();
// 获取第2个列表项的首都名称
String secondCapital = listPage.getElements().get(1).capital.getText();

优化建议 #

• 可给组件内的WebElement字段添加@CacheLookup注解，避免重复查找元素，提升执行效率
• 组件的交互逻辑（点击、校验、输入等）统一封装在Element类内部，后续页面结构变更只需修改组件代码，无需调整上层用例
• 若大量使用自定义组件，可抽离通用组件父类，减少重复的初始化代码

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