Spring Boot+Angular应用中，如何用Selenium定位并点击菜单链接？

已完成登录进入主页，但无法点击Administration下的客户菜单链接，执行定位操作时出错，且页面源码中找不到目标链接/customers。

错误信息 #

Command: [2d56d2bfe5693b9a2876fdbaf7337e6d, findElement {using=xpath, value=a[href='/customers']}]
  Capabilities {acceptInsecureCerts: false, browserName: chrome, browserVersion: 
  109.0.5414.75, chrome: {chromedriverVersion: 109.0.5414.74 (e7c5703604da..., userDataDir: 
  C:\Users\hp\AppData\Local\T...}, goog:chromeOptions: {debuggerAddress: localhost:64215}, 
  networkConnectionEnabled: false, pageLoadStrategy: normal, platformName: WINDOWS, proxy: 
  Proxy(), se:cdp: ws://localhost:64215/devtoo..., se:cdpVersion: 109.0.5414.75, 
  setWindowRect: true, strictFileInteractability: false, timeouts: {implicit: 1000, pageLoad: 
  300000, script: 30000}, unhandledPromptBehavior: dismiss and notify, 
  webauthn:extension:credBlob: true, webauthn:extension:largeBlob: true, 
  webauthn:virtualAuthenticators: true}

无效参考代码 #

driver.findElement(By.xpath("a[href='/customers']")).click();

我的测试代码 #

System.setProperty("webdriver.gecko.driver", "C:\\geckodriver.exe");

ChromeOptions chromeOptions = new ChromeOptions();
Map<String, Integer> timeOUts = new HashMap<>();
timeOUts.put("implicit", 1000);
chromeOptions.setCapability("timeouts", timeOUts);

WebDriver driver = new ChromeDriver(chromeOptions);
driver.manage().window().maximize();

driver.get("http://myApplication.fr");//
driver.findElement(By.id("email")).sendKeys("exemple@exemple.fr");
driver.findElement(By.id("password")).sendKeys("123");
driver.findElement(By.className("fuse-mat-button-large")).click();

driver.findElement(By.xpath("a[href='/customers']")).click();

解决方案 #

1. 修复XPath语法错误 #

你使用的XPath缺少根路径前缀，正确写法需添加//表示全局搜索：

• 精确匹配：//a[@href='/customers']
• 模糊匹配（适用于href带参数的场景）：//a[contains(@href, '/customers')]

2. 处理Angular异步加载与菜单展开逻辑 #

Angular是单页应用，登录后菜单可能需要等待渲染，且Administration菜单可能默认折叠，需先展开再定位子链接：

// 替换隐式等待为显式等待，确保元素加载完成
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

// 先点击展开Administration菜单（需根据实际页面调整定位器，示例用id定位）
WebElement adminMenu = wait.until(ExpectedConditions.elementToBeClickable(By.id("administration-menu")));
adminMenu.click();

// 等待客户链接可点击并执行点击操作
WebElement customerLink = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//a[@href='/customers']")));
customerLink.click();

3. 检查元素是否在iframe中 #

若菜单嵌套在iframe内，需先切换到对应iframe再定位元素：

// 等待iframe加载完成并切换
wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.id("menu-iframe")));

// 定位并点击客户链接
driver.findElement(By.xpath("//a[@href='/customers']")).click();

// 操作完成后切回主文档
driver.switchTo().defaultContent();

4. 针对Angular路由链接的定位 #

Angular项目中，链接可能使用routerLink属性而非原生href，可直接通过该属性定位：

driver.findElement(By.xpath("//a[@routerLink='/customers']")).click();

5. 验证元素实际存在性 #

打开Chrome开发者工具（F12），在控制台执行以下命令，确认元素是否存在及正确属性：

// 检查href属性
document.querySelector("a[href='/customers']");
// 检查routerLink属性
document.querySelector("a[routerLink='/customers']");

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