shadowロケータを利用すると、Shadow DOM内の要素に対するテストが可能になります。

Shadow DOM内の要素を指定する

div::shadowのように、cssロケータに「::shadow」を追加して、shadowロケータとして登録することで、その要素が保持しているShadow DOMにアクセスすることができます。

また、

body > div::shadow > div > a

のように、「::shadow」を利用してShadow DOMにアクセスした上で、続けてcssロケータを記述することで、そのアクセスしたShadow DOM内の要素を指定でき、指定した要素に対してテストを実施することができます。

shadowロケータでは、Shadow DOMにアクセスするために「::shadow」を指定すること以外は、cssロケータと同じようにロケータを記述することができます。

※ 注意

「::shadow」は、既に廃止されているCSS疑似要素「::shadow」とは異なります。そのため、shadowロケータで「::shadow」を利用した場合、CSS疑似要素としてではなく、MagicPod独自のロケータとして解析・処理されます。

Shadow DOM内の要素を指定する場合は、必ず操作対象の要素を保持するShadow DOMに「::shadow」を用いてShadow DOMにアクセスする必要があります。

例）Shadow DOM内のaタグをテストしたい場合

（「-- Shadow DOM --」で囲まれている要素は、1つ上階層のdiv要素が保持するShadow DOMとします）

<body>
    <div class=has_shadow_dom>
        -- Shadow DOM --
            <div>
                <a>テスト対象のaタグ</a>
            </div>
        -- Shadow DOM --
    </div>
</body>

この場合、

body > div > div > a

や、

body > div a

のようなshadowロケータでは、Shadow DOM内のaタグ要素にはアクセスできず、

body > div::shadow a

や、

div[class=has_shadow_dom]::shadow > div > a

のように、必ずテスト対象要素を含むShadow DOMを保持している要素から、「::shadow」を指定して、Shadow DOMにアクセスする必要があります。

また、複数のShadow DOMがネストした構成で、ネストしたShadow DOM内にテスト対象の要素が存在する場合、ネストした全てのShadow DOMに「::shadow」を利用してアクセスする必要があります。

例）ネストしたShadow DOM内のaタグをテストしたい場合

（「-- Shadow DOM --」で囲まれている要素は、1つ上階層のdiv要素が保持するShadow DOMとします）

<body>
    <div class=has_shadow_dom1>
        -- Shadow DOM --
            <div>
                <div class=has_shadow_dom2>
                    -- Shadow DOM --
                        <a>テスト対象のaタグ</a>
                    -- Shadow DOM --
                </div>
            </div>
        -- Shadow DOM --
    </div>
</body>

この場合、以下のように、クラス「has_shadow_dom1」、「has_shadow_dom2」が指定されているdiv要素それぞれが持つShadow DOMにアクセスした上で、aタグ要素を指定する必要があります。

body > div::shadow > div > div::shadow > a

div[class=has_shadow_dom1]::shadow div[class=has_shadow_dom2] a

以下のようなロケータでは、テスト対象のaタグを指定することができません。

body > div[class=has_shadow_dom1]::shadow a

div[class=has_shadow_dom２]::shadow > a

※ 制限事項

closedモードのShadow DOMには対応しておりません。

Shadow DOM内の要素を指定する

関連記事