Karate UI中嵌套ShadowRoot下带点ID输入框的文本输入问题

我尝试向ID为streetAddress.unitNumber的输入框插入文本但失败，该元素嵌套在两层开放ShadowRoot中。能点击同ShadowRoot内的按钮，但无法操作这类ID包含点（如streetAddress.quickSearch）的输入框。

尝试的JavaScript路径 #

document.querySelector("#appContainer > crma")
  .shadowRoot.querySelector("div > div > div:nth-child(2) > ppma")
  .shadowRoot.querySelector("#streetAddress\.quickSearch")

Karate中的尝试及报错 #

在Karate feature中，我尝试了JS路径、选择器、XPath等多种方法，均报错：

script("document.querySelector('#appContainer > crma')
  .shadowRoot.querySelector('div > div > div:nth-child(2) > ppma')
  .shadowRoot.querySelector('#streetAddress\.quickSearch')
  .value='1234'")

错误信息：

org.graalvm.polyglot.PolyglotException: js eval failed twice:
document.querySelector('#appContainer > crma')
  .shadowRoot.querySelector('div > div > div:nth-child(2) > ppma')
  .shadowRoot.querySelector('#streetAddress.unitNumber')
  .value='1234',
error: [type: MAP, value: {type=object, subtype=error, className=TypeError, description=TypeError: Cannot set properties of null (setting 'value')

转义符问题 #

控制台输出的查询选择器路径显示单转义符，但提交时实际是双转义符。尝试单转义、双转义或无转义均无效果。

Playwright成功案例对比 #

使用Playwright可成功向该输入框写入文本：

await page.evaluate(() => {
  const container = document.querySelector('#appContainer');
  const firstShadowRoot = container.shadowRoot;
  const nestedContainer = firstShadowRoot.querySelector('ppma');
  const secondShadowRoot = nestedContainer.shadowRoot;
  const inputElement = secondShadowRoot.querySelector('#streetAddress\.unitNumber');
  inputElement.value = '123';
});

但对应的Karate测试代码执行失败：

script("document.querySelector('#appContainer > crma')
  .shadowRoot.querySelector('div > div > div:nth-child(2) > ppma')
  .shadowRoot.querySelector('#streetAddress\.unitNumber')
  .value='1234'");

另一段失败的Karate代码：

* def script =
      """
      function() {
      val container = document.querySelector('#crma');
      val firstShadowRoot = container.shadowRoot;
      val nestedContainer = firstShadowRoot.querySelector('ppma');
      val secondShadowRoot = nestedContainer.shadowRoot;
      val inputElement = secondShadowRoot.querySelector('#streetAddress\.unitNumber');
      inputElement.value = '777';
      }
      """
* delay(2000)
* driver.eval(script)

补充说明 #

尝试在示例/练习站点复现该问题，但未找到具有此类特定元素结构（ID格式为value1.value2）的站点。

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