[Feature]: Add APIs to handle open shadow DOMs about playwright

[dgozman]

@RenderMichael Take a look at alternative methods for locating elements. Pretty much any other method except for XPath already works across open shadow roots.

We strongly recommend avoiding XPath in favor of user-visible locators like GetByRole(). Therefore, I don't think we'll be adding support for shadow dom in XPath locators.

---

If you really need XPath with manual shadow dom query, I'd recommend to register a custom selector engine that would query XPath in the shadow root. Something like this, but querying inside root.shadowRoot.

In this case the API would be:

page.Locator("xpath=//path/to/shadow/host").Locator("shadow-xpath=./path/to/target/from/the/shadow/root")

[RenderMichael]

For posterity, this is the engine I wrote, which works for my case:

playwright.Selectors.RegisterAsync("xpath-shadow", new()
{
    ContentScript = true,
    Script =
    """
    {
        queryAll(root, selector) {
        if (selector.startsWith('/') && root.nodeType !== Node.DOCUMENT_NODE) {
            selector = '.' + selector;
        }

        const result = [];
        const document = root.ownerDocument || root;
        if (!document)
            return result;

        if (!root.shadowRoot) {
            return result; // if there's no shadow root, no error. just "not exists".
        }

        const firstElementInShadow = root.shadowRoot.querySelector("*");

        const selectorFromParent = '../' + selector;

        const it = document.evaluate(selectorFromParent, firstElementInShadow, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE);
        for (let node = it.iterateNext(); node; node = it.iterateNext()) {
            if (node.nodeType === Node.ELEMENT_NODE)
            result.push(node);
        }
        return result;
        }
    }
    """,
});

[RenderMichael]

@dgozman Thanks for the swift response and the workaround tip!