如何在Selenium中获取ServiceNow登录页Start Building选项的控件

失效原因 #

你之前使用XPath直接定位失效的核心原因是ServiceNow开发者平台的页面组件全部采用嵌套Shadow DOM结构，普通Selenium的DOM定位方法无法穿透Shadow Root获取内部元素，和你之前登录时定位登录按钮的逻辑一致，你需要通过JavaScript逐层穿透Shadow Root来查找目标元素。
另外你之前写的XPath里文本匹配多了一个多余的左方括号，也是定位失败的原因之一。

具体实现代码 #

你可以沿用之前登录时的JS查询Shadow Root的思路，先通过开发者工具逐层确认「Start Building」按钮所在的Shadow DOM层级，再编写对应查询逻辑，示例代码如下：

// 先等待登录完成后页面加载完成，不要用硬等待
wait.Until(d => ((IJavaScriptExecutor)d).ExecuteScript("return document.readyState").ToString() == "complete");

IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
// 以下查询层级请根据你实际页面的DOM结构调整，示例层级供参考
var query = "return document.querySelector('dps-app').shadowRoot";
// 逐层追加对应组件的shadowRoot查询，直到到达按钮所在的父组件
query += ".querySelector('dps-instance-management').shadowRoot";
query += ".querySelector('div > dps-button[variant=\"primary\"] span')";
// 如果你确定文本唯一，也可以用文本匹配
// query += ".querySelector('span:contains(\"Start Building\")')";

IWebElement startBuildBtn = (IWebElement)js.ExecuteScript(query);
// 避免元素不可交互，可直接用JS触发点击
js.ExecuteScript("arguments[0].click();", startBuildBtn);

排查调试技巧 #

• 可以先在浏览器控制台逐行执行JS查询语句，确认每一层的querySelector都能拿到对应元素，再把语句放到代码里
• 如果元素加载有延迟，可以在执行JS查询前增加对应组件的存在判断，比如先等待dps-instance-management这类父组件加载完成再执行查询

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