使用Selenium Java定位Angular应用元素失败的问题求助

问题概述 #

自动化Angular登录页面时，无法定位并交互用户名输入框，尝试了XPath、ByAngular等多种方式均失败，目标元素HTML结构如下：

<input _ngcontent-qqo-c316="" required="" nxinput="" id="acn-input-login-username" test-id="acn-username" name="username" autocomplete="off" class="is-filled cdk-text-field-autofill-monitored c-input nx-input ng-dirty ng-valid ng-touched" ng-reflect-required="" ng-reflect-id="acn-input-login-username" ng-reflect-form="[object Object]" aria-invalid="false" aria-required="true">

核心问题分析 #

1. Angular渲染延迟：普通页面加载完成后，Angular可能仍在异步渲染元素，导致元素未就绪
2. ByAngular使用错误：尝试的ByAngular.model参数为元素ID而非实际Angular模型名；cssContainingText查找的"Username"是placeholder，不在元素的textContent/innerText范围内
3. 显式等待缺失：依赖Thread.sleep不可靠，未等待元素进入可交互状态

解决方案与修改代码 #

1. 正确初始化NgWebDriver并等待Angular就绪 #

NgWebDriver绑定驱动后，需等待Angular所有异步请求完成，确保元素完全渲染：

@BeforeClass
public static void setUp() {
    ChromeOptions options = new ChromeOptions();
    options.addArguments("start-maximized");
    System.setProperty("webdriver.chrome.driver", "C://Driver/chromedriver.exe");
    driver = new ChromeDriver(options);
    ngDriver = new NgWebDriver((JavascriptExecutor) driver);
    driver.get("https://acn-sit.dev.azlife.allianz.co.id/en/#/portal/login");
    // 等待Angular加载完成，所有请求结束
    ngDriver.waitForAngularRequestsToFinish();
}

2. 使用稳定测试属性定位 #

元素上的test-id="acn-username"是专为测试设计的稳定属性，优先使用：

// 显式等待元素可交互
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
WebElement usernameInput = wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("input[test-id='acn-username']")));

3. 可靠的交互方式 #

如果直接sendKeys失败，可通过JavaScript执行输入并触发Angular表单变更检测：

// 设置输入框值
((JavascriptExecutor) driver).executeScript("arguments[0].value = 'testuser';", usernameInput);
// 触发input事件，让Angular感知值变化
((JavascriptExecutor) driver).executeScript("arguments[0].dispatchEvent(new Event('input'));", usernameInput);

4. 正确使用ByAngular（可选） #

若要使用ByAngular，需通过浏览器开发者工具确认实际Angular模型名，例如模型为loginForm.controls.username时：

WebElement usernameInput = wait.until(ExpectedConditions.elementToBeClickable(ByAngular.model("loginForm.controls.username")));
usernameInput.sendKeys("testuser");

完整测试代码 #

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import com.paulhammant.ngwebdriver.NgWebDriver;
import java.time.Duration;

public class AngularLoginTest {
    private static WebDriver driver;
    private static NgWebDriver ngDriver;

    @BeforeClass
    public static void setUp() {
        ChromeOptions options = new ChromeOptions();
        options.addArguments("start-maximized");
        System.setProperty("webdriver.chrome.driver", "C://Driver/chromedriver.exe");
        driver = new ChromeDriver(options);
        ngDriver = new NgWebDriver((JavascriptExecutor) driver);
        driver.get("https://acn-sit.dev.azlife.allianz.co.id/en/#/portal/login");
        ngDriver.waitForAngularRequestsToFinish();
    }

    public void testInput() {
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
        WebElement usernameInput = wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("input[test-id='acn-username']")));
        
        // 优先尝试直接交互
        usernameInput.clear();
        usernameInput.sendKeys("testuser");
        
        // 若直接交互失败，启用以下代码
        // ((JavascriptExecutor) driver).executeScript("arguments[0].value = 'testuser';", usernameInput);
        // ((JavascriptExecutor) driver).executeScript("arguments[0].dispatchEvent(new Event('input'));", usernameInput);
    }

    @AfterClass
    public static void tearDown() {
        if (driver != null) {
            driver.quit();
        }
    }
}

关键注意事项 #

• 禁用Thread.sleep，改用WebDriverWait等待元素进入可点击/可见状态
• 优先使用test-id、id等稳定属性，避免依赖动态生成的_ngcontent类或属性
• 当直接交互失效时，用JavaScript执行操作并触发对应事件，确保Angular组件感知值变化
• 确保NgWebDriver版本与目标Angular版本兼容，避免版本不匹配导致的异常

内容的提问来源于stack exchange，提问作者Achmad Salman Ramadhan