背景

最近接手了一个新项目的测试工作，前几天领导让做自动化，本来以为平平无奇的自动化，结果开始写的时候就给我难住了，明明白白的看见元素就在页面上，用了css、xpath等各种定位方法，却怎么都定位不到，搞得我差点怀疑自己之前学的定位方法都是假的。
直到我师父给我点拨，说shadow-root里面的元素不能用普通的定位方法，才指引我走上正确的道路。

观察一下元素的DOM结构

这是我当时要定位的元素，可以看到，元素在shadow-root里面

我理解的shadow-root

到底什么是shadow-root我也不能说的很清楚，但是我大概的理解就是它是DOM中的DOM
我们用css或者xpath之所以能定位到元素，是因为元素在DOM结构中，而shadow-root像是在DOM的某个元素里面包了一层DOM，你必须进入这个元素，然后进入shadow-root，才能拿到它里面的元素

定位步骤

根据自己的理解和网上查询资料发现定位shadow-root里面的元素大致步骤都是这样的：

1. 先定位到shadow-root节点的父节点，在这里就是 toolkit-bar
2. 然后进入shadow-root节点
3. 之后就可以对shadow-root里面的元素进行定位了

实现元素定位的语句

我这里用js语句定位的，按上述说的步骤来，这里就完美的定位到了
然后在你的自动化代码中执行这条js语句就可以了，document.getElementsByTagName(“toolkit-bar”)[0].shadowRoot.querySelector(".import")
tip： 我在puppeteer中调用这条js语句拿不到返回值，尝试了几次发现是因为语句中有shadowRoot，所以建议大家如果要对这个元素做什么操作，直接在js语句里面操作吧

还有一种更简单的方法

emm…还有一种更简单的方法，直接在元素上右击，选择copy，copy里面有很多定位方式，如下图所示，由于右击之后截不了图，所以用手机拍的照片，有点不清晰，凑合看吧~~~~
其实我觉得有时候实在定位不到的话可以这么用，就像这个问题，完全是因为我没有遇到过shadow-root，所以不知道这个元素定位不到是因为在shadow-root里面，但如果当时我能尝试用浏览器自带的copy去尝试一下，最起码拿到定位的语句会去研究一下shadow-root相关，不至于无从下手。