本文详解 Karate UI 自动化中如何正确访问并操作位于多层 Shadow DOM 内、ID 含点号（如 streetAddress.unitNumber）的 input 元素，重点解决因转义不足导致的 Cannot set properties of null 错误。
本文详解 karate ui 自动化中如何正确访问并操作位于多层 shadow dom 内、id 含点号（如 `streetaddress.unitnumber`）的 input 元素，重点解决因转义不足导致的 `cannot set properties of null` 错误。
在 Karate UI 测试中操作 Shadow DOM 元素时，常遇到看似路径正确却报 TypeError: Cannot set properties of null 的问题——尤其当目标 input 的 ID 包含点号（.），例如 #streetAddress.unitNumber。根本原因在于：Karate 的 script() 函数底层使用 GraalVM JavaScript 引擎执行字符串脚本，而该字符串需经 Java 字符串解析 + JS 解析双重处理，导致反斜杠（）需四重转义（\\）才能在最终 JS 执行环境中保留为单个字面量 .。
以下为可稳定工作的完整解决方案：
✅ 正确写法（四重转义）
* script("document.querySelector('#appContainer > crma')
.shadowRoot.querySelector('div > div > div:nth-child(2) > ppma')
.shadowRoot.querySelector('#streetAddress\\.unitNumber')
.value = '1234'")
? 注意：每处
\\.在 Java 字符串中先被解析为\.，再传入 JS 引擎后解析为.，最终匹配 CSS ID 中的字面量点号。
✅ 更健壮的替代方案（推荐用于复杂场景）
若需链式调用更清晰或避免长字符串拼接，可封装为匿名函数并使用 driver.eval()：
* def fillShadowInput =
"""
function() {
const container = document.querySelector('#appContainer > crma');
if (!container || !container.shadowRoot) throw 'First shadow root not found';
const ppma = container.shadowRoot.querySelector('div > div > div:nth-child(2) > ppma');
if (!ppma || !ppma.shadowRoot) throw 'Second shadow root not found';
const input = ppma.shadowRoot.querySelector('#streetAddress\\.unitNumber');
if (!input) throw 'Input element not found';
input.value = '1234';
// 触发 input 和 change 事件（关键！否则部分框架不响应）
input.dispatchEvent(new Event('input', { bubbles: true }));
input.dispatchEvent(new Event('change', { bubbles: true }));
}
"""
* driver.eval(fillShadowInput)
⚠️ 关键注意事项
-
事件触发不可省略：仅设置
.value不会触发 Angular/React/Vue 等框架的数据绑定更新，务必手动派发input和change事件； -
空值防护：建议在
querySelector后添加存在性校验（如示例所示），避免静默失败； -
XPath 不适用：Karate UI 的
xpath定位器无法穿透 Shadow DOM，必须使用script()配合原生 JS 查询； -
调试技巧：在
script()中加入console.log(...)并启用 Karate 日志（karate.log(...)），或临时改用driver.executeScript()查看中间节点是否获取成功。
通过四重转义 \\. 并配合事件模拟，即可彻底解决 Karate 中多层 Shadow DOM 下带点号 ID 输入框的赋值难题，实现与 Playwright 相同的稳定交互能力。
