メインコンテンツへスキップ

Shadow DOM内の要素に対してテストを実施する

  • 更新

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

 

xpathロケータを利用してShadow DOM内の要素を指定する

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

また、

//body/div/#shadow-root/div/a

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

 

Shadowロケータを利用して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独自のロケータとして解析・処理されます。

 

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

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

 

（「-- 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

のようなxpathロケータや、

body > div > div > a
body > div a

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

xpathロケータの場合は

//body/div/#shadow-root/div/a
//div[@class='has_shadow_dom']/#shadow-root/a

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

また、shadowロケータ場合は

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

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

 

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

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

（「-- 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タグ要素を指定する必要があります。

[xpathロケータの場合]

//body/div/#shadow-root/div/div/#shadow-root/a
//div[@class='[class=has_shadow_dom1]']/div/div/#shadow-root/a

[shadowロケータの場合]

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

 

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

//body/div/#shadow-root/div//a
//div[@class='[class=has_shadow_dom２]']/a
body > div[class=has_shadow_dom1]::shadow a
div[class=has_shadow_dom２]::shadow > a

 

※ 制限事項

  • closedモードのShadow DOMには対応しておりません。
  • xpathロケータを利用する場合、/#shadow-rootの直後にAxes、または「//」を利用することはできません。
    • 例)
      • //body/div/#shadow-root/parent::div (/#shadow-rootの直後にAxesを利用している)
      • //body/div/#shadow-root//div (/#shadow-rootの直後に「//」を利用している)

関連記事