如何用Java编写Selenium脚本操作Ionic Angular下拉框（避免Ionic标签定位）

问题背景 #

我的Ionic Angular下拉框代码如下：

<ion-item mode="md" lines="none" class="fluent-textbox" *ngIf="grantedRoles.length > 1">
    <ion-select interface="popover" justify="start" (ionChange)="changeUserRole($event)" placeholder="Sign-in as"
            [selectedText] = "userRole" name="userRole">
        <ion-select-option *ngFor="let grantedRole of grantedRoles; let i = index " style="color: var(--salt-theme-foreground)"
                [value]="grantedRole" [name]="grantedRole">{{grantedRole}}</ion-select-option>
    </ion-select>
</ion-item>

其中grantedRoles包含"MANAGER"和"TRAINEE"。

我用Java Selenium脚本定位下拉框选项时，最初的代码依赖Ionic标签和动态ID：

try {    
    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5));
    WebElement dropdown = wait.until(ExpectedConditions.visibilityOfElementLocated(By.name("userRole")));
    dropdown.click();

    WebElement option = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("#ion-overlay-1 > ion-select-popover > ion-list > ion-radio-group > ion-item:nth-child(2)")));
       
    // Click the desired option
    option.click();

} finally {
    driver.quit();
}

想要避免依赖Ionic标签，尝试通过name定位选项：

WebElement option = wait.until(ExpectedConditions.visibilityOfElementLocated(By.name("MANAGER")));

但报错：

org.openqa.selenium.TimeoutException: Expected condition failed: waiting for visibility of element located by By.name: MANAGER (tried for 5 second(s) with 500 milliseconds interval)

查看渲染后的源码发现，ion-select-option标签并没有生成name属性，这就是定位失败的原因。

解决办法 #

1. 修正前端模板，生成原生name属性

Ionic的ion-select-option组件不会把Angular的属性绑定[name]转换成原生DOM的name属性，需要改用原生属性绑定语法attr.name来强制生成：

修改后的HTML代码：

<ion-item mode="md" lines="none" class="fluent-textbox" *ngIf="grantedRoles.length > 1">
    <ion-select interface="popover" justify="start" (ionChange)="changeUserRole($event)" placeholder="Sign-in as"
            [selectedText] = "userRole" name="userRole">
        <ion-select-option *ngFor="let grantedRole of grantedRoles; let i = index " style="color: var(--salt-theme-foreground)"
                [value]="grantedRole" attr.name="{{grantedRole}}">{{grantedRole}}</ion-select-option>
    </ion-select>
</ion-item>

修改后，渲染出来的选项会带有原生name属性，此时用By.name("MANAGER")就能正常定位。

2. 不修改前端，通过文本或value定位选项

如果无法修改前端代码，可以选择更稳定的定位方式：

• 按选项文本定位：

// 直接匹配文本
WebElement option = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[text()='MANAGER']")));

// 限定在popover范围内，避免页面其他重复文本干扰
WebElement option = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//ion-select-popover//*[text()='MANAGER']")));

• 按value属性定位：
  因为[value]="grantedRole"会被渲染成原生DOM的value属性，所以可以用CSS选择器定位：

WebElement option = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("[value='MANAGER']")));

3. 优化原有定位器，移除动态ID依赖

如果一定要用标签结构定位，把动态生成的#ion-overlay-1去掉，改用更通用的父元素定位：

WebElement option = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("ion-select-popover ion-item:nth-child(2)")));

这样就不会因为页面刷新导致ID变化而定位失败。

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