Bob's Blog

现在有一些页面在使用shadow dom了，比如视频或者表单，可以用作样式隔离等，类似iframe，但有些不一样。至于区别就不提了，这里只记录一下自动化测试时需要注意的地方。

首先原先的元素定义不管是xpath、id等都无法定位到该元素了，只要是被包裹在shadow-root中的元素。需要切换到shadow dom中。

比如可以看到类似下面的节点：

<form-shadow-root id='form-shadow-root'>
  #shadow-root (open)
    <div ...>
      <span ...>
      ...

其次即便切换到shadow dom中，目前已知issue是直接用xpath或tag name也是无法定位到该元素的。可以用css selector，也可以先用css找到父节点，然后再用find_element，这时可以用xpath。

# example
root = driver.find_element("id", "form-shadow-root")
shadow_root = root.shadow_root
textfield = shadow_root.find_element_by_css_selector("div#dialog > div:nth-child(2) input")  # id为dialog的div的下一级div的第二个，之后的相对的input tag(无所谓层级)
btn = shadow_root.find_element_by_css_selector("button[class='btn next-button']") # tag为button的class为该值的元素
dropdown_item = shadow_root.find_element_by_css_selector('#search-field').find_element_by_xpath("//div//ul/li[text()='default']")  # 先找css然后再找sub element

所以对于已有的脚本等，除了要记得切换进shadow dom，并且元素的定义基本都得换，封装的方法也得更新一些，这是需要注意的。

快速记录的可能比较潦草也许有笔误，后续有时间再来更新。