Inspectie van Shadow DOM

Het inspecteren van elementen binnen de Shadow DOM en het genereren van XPath en CSS-selectoren kan uitdagend zijn omdat Shadow DOM-elementen zijn ingekapseld. Hier is hoe je Shadow DOM-elementen kunt inspecteren en selectors kunt genereren met behulp van Google Chrome DevTools en relevante addons voor XPath en CSS-selectoren.

Inspectie van Shadow DOM-elementen met behulp van Google Chrome DevTools

Stap-voor-stap gids

  • Open Chrome DevTools:
  • Klik met de rechtermuisknop op de webpagina en selecteer Inspecteren of druk op Ctrl+Shift+I (Windows/Linux) of Cmd+Option+I (Mac) om DevTools te openen.
  • Zoek de Shadow Host:
  • Zoek het element dat de Shadow DOM host. Het zal meestal een #shadow-root indicator onder zich hebben.
  • Breid de Shadow Root uit:

Klik op de #shadow-root om deze uit te breiden en de Shadow DOM-elementen te zien.

Inspecteer elementen binnen de Shadow DOM:

Je kunt nu inspecteren en interactie hebben met elementen binnen de Shadow DOM zoals je zou doen met reguliere DOM-elementen.

Gebruik van CSS-selectoren in Shadow DOM

Bij het omgaan met Shadow DOM, moet je navigeren van de shadow host naar de shadow root en dan naar het gewenste element.

Voorbeeld

html
Kopieer code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Voorbeeld van Shadow DOM</title>
</head>
<body>
    <div id="shadow-host"></div>

    <script>
        const shadowHost = document.getElementById('shadow-host');
        const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
        shadowRoot.innerHTML = `
            <style>
                .shadow-element {
                    color: blue;
                }
            </style>
            <div class="shadow-element">Binnen Shadow DOM</div>
        `;
    </script>
</body>
</html>

Toegang tot elementen met CSS-selectoren (JavaScript)

const shadowHost = document.querySelector('#shadow-host');
const shadowRoot = shadowHost.shadowRoot;
const shadowElement = shadowRoot.querySelector('.shadow-element');
console.log(shadowElement.textContent); // Outputs: Binnen Shadow DOM

Gebruik van XPath in Shadow DOM

XPath wordt over het algemeen niet direct gebruikt voor het opvragen binnen de Shadow DOM vanwege de inkapseling, maar je kunt JavaScript gebruiken om toegang te krijgen tot de shadow root en dan te werken met elementen erin.

Voorbeeld (JavaScript)

const shadowHost = document.querySelector('#shadow-host');
const shadowRoot = shadowHost.shadowRoot;
const shadowElement = shadowRoot.querySelector('.shadow-element');
const xpathResult = document.evaluate('.//div[@class="shadow-element"]', shadowRoot, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
console.log(xpathResult.textContent); // Outputs: Binnen Shadow DOM

Gebruik van add-ons om selectors te genereren

  1. ChroPath

ChroPath is een Chrome-extensie die helpt bij het genereren, bewerken en verifiëren van XPath en CSS-selectoren, ook binnen Shadow DOM.

Hoe ChroPath te gebruiken

  • Installeer ChroPath:
    • Installeer ChroPath vanuit de Chrome Web Store.
  • Open ChroPath:
    • Open DevTools en navigeer naar het ChroPath-tabblad.
  • Genereer selectors:
    • Selecteer een element binnen de Shadow DOM.

ChroPath zal de XPath en CSS-selectoren voor het geselecteerde element weergeven.

  1. SelectorGadget

SelectorGadget is een Chrome-extensie die helpt bij het genereren van CSS-selectoren door op elementen op een webpagina te klikken.

Hoe SelectorGadget te gebruiken

  • Installeer SelectorGadget:
    • Installeer vanuit de Chrome Web Store.
  • Activeer SelectorGadget:
    • Klik op het SelectorGadget-pictogram in de browserwerkbalk.
  • Selecteer elementen:
    • Klik op elementen binnen de Shadow DOM. SelectorGadget zal de elementen markeren en de gegenereerde CSS-selector weergeven.
  • Kopieer selector:
    • Kopieer de gegenereerde CSS-selector voor gebruik in je automatiseringsscripts.

Praktisch gebruik in automatiseringsscripts

Gebruik van CSS-selectoren in Selenium (Python)

from selenium import webdriver

# Toegang tot Shadow DOM
shadow_host = driver.find_element_by_css_selector('#shadow-host')
shadow_root = driver.execute_script('return arguments[0].shadowRoot', shadow_host)
shadow_element = shadow_root.find_element_by_css_selector('.shadow-element')
print(shadow_element.text)  // Outputs: Binnen Shadow DOM

Gebruik van XPath in Selenium (Python)

from selenium import webdriver

# Toegang tot Shadow DOM
shadow_host = driver.find_element_by_css_selector('#shadow-host')
shadow_root = driver.execute_script('return arguments[0].shadowRoot', shadow_host)
shadow_element = driver.execute_script('return arguments[0].querySelector(".shadow-element")', shadow_root)
print(shadow_element.text)  // Outputs: Binnen Shadow DOM

Gebruik van CSS-selectoren in Playwright (JavaScript)

javascript


const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('https://www.google.com');

    // Toegang tot Shadow DOM
    const shadowHost = await page.$('#shadow-host');
    const shadowRoot = await shadowHost.evaluateHandle(el => el.shadowRoot);
    const shadowElement = await shadowRoot.$('.shadow-element');
    console.log(await shadowElement.textContent());  // Outputs: Binnen Shadow DOM

    await browser.close();
})();

Een belangrijk punt: GEBRUIK ALLEEN XPATH met Salesforce shadowdom:

Salesforce gebruikt Shadow DOM uitgebreid in zijn Lightning-componenten. Dit kan het uitdagend maken om te interageren met elementen met behulp van traditionele selectors. LWC gebruikt een polyfill om shadow DOM te implementeren in plaats van een native browser

implementatie. Deze implementatie beperkt de toegang van Selenium door niet-XPath

selectors, zoals By.cssSelector(), maar staat nog steeds directe toegang toe met By.xpath().

De eenvoudigste oplossing is om je niet-XPath-locators om te zetten naar XPath. Er zijn plannen om dit te veranderen, maar zorg er voor nu voor dat je XPATH gebruikt.

Samenvatting

Inspectie en generatie van selectors:

Chrome DevTools: Staat je toe om elementen binnen de Shadow DOM te inspecteren.

ChroPath: Genereert en verifieert XPath en CSS-selectoren, ook voor Shadow DOM-elementen.

SelectorGadget: Helpt bij het genereren van CSS-selectoren door op elementen te klikken.

Gebruik van selectors in automatisering:

Selenium: Gebruik JavaScript om toegang te krijgen tot Shadow DOM-elementen en gebruik dan CSS- of XPath-selectoren.

Playwright: Biedt methoden om toegang te krijgen tot Shadow DOM en CSS- of XPath-selectoren te gebruiken.