SelenideでWebComponentsのinput要素を取るとShadowDomの外の要素を取ってしまう

はじめに

普段E2EでSelenideを利用してテストを書いています。
今回その中で挙動がよくわからないコードがあり、うまくテストするのに時間がかかったのでまとめていきます

問題

以下のテストを書きました

test.kt

    @Step("<labelName>のチェックボックスが存在する")
    fun displayCheckBox(labelName: String) {
        `$$`(shadowDeepCss("todo-label"))
            .find(exactOwnText(labelName))
            .preceding(0)
            .`$`(shadowDeepCss("input"))
            .shouldBe(type("checkbox"))
    }

ここでHTMLの構造としては

<header>
  <input className="search" />
</header>
<div class="chackbox-area">
  <sample-element>
    ここがshadowDOMになっている
    <input type="checkbox" />
    <todo-label>
     ここもshadowDOMになっている
     ラベル名
    </todo-label>
  </sample-element>
</div>

このようになっておりました

ここで、todo-labelの上にあるチェックボックスをとりたいのですが、なぜかヘッダーのインプットがとれてしまいました

解決方法

`$`(shadowDeepCss("input"))
↓
`$`("input")

とすることで治りました。shadowDeepCssは1回のみでうまいことやってくれます

ではなぜヘッダーのinputがとれたのかというとドキュメントをみるとわかります

Now you can save time with the help of new method shadowDeepCss - it searches the element recursively in all shadow roots all over the dom.

すべての要素をしらべてヒットしたものを返しています
なのでヘッダーのinputが返ってきてテストが失敗したのです

おわりに

この1週間でSelenideについての理解がすこしふかまったようにおもえます

参考