Support for shadow-dom elements in cypress-social-login plugin?

Question

I'm trying to execute the task GoogleSocialLogin from cypress-social-logins plugin.

Here is the custom command I'm using for this:

Cypress.Commands.add("userLoginWithGmail", () => {
    const socialLoginOptions = {
        username: "some_email",
        password: "some_password",
        loginUrl: "some url",
        headless: false,
        logs: true,
        loginSelector: "", // What should I put here in case of a shadow-dom element?
        popupDelay: 3000,
        cookieDelay: 2000,
        args: [" — disable-web-security", " — user-data-dir", " — allow-running-insecure-content"],
        isPopup: true,
        getAllBrowserCookies: true
    }
    return cy.task("GoogleSocialLogin", socialLoginOptions).then(({ cookies, lsd, ssd }) => {
        cookies.map((cookie) => {
            cy.setCookie(cookie.name, cookie.value, {
                domain: cookie.domain,
                expiry: cookie.expires,
                httpOnly: cookie.httpOnly,
                path: cookie.path,
                secure: cookie.secure
            })
            Cypress.Cookies.defaults({
                preserve: cookie.name
            })
        })
        cy.window().then(window => {
            Object.keys(ssd).forEach(key => window.sessionStorage.setItem(key, ssd[key]))
            Object.keys(lsd).forEach(key => window.localStorage.setItem(key, lsd[key]))
        })
        cy.log("login successful.")
    })
})

So what value should I put inside the loginSelector property in case I have an element that sits under the shadow-dom element?

I marked the shadow element I'm trying to reach:

Thanks!

Answer 1

TLDR:

Try

loginSelector: '#supertokens-root::shadow button[data-supertokens^="providerButton"]'

---

Explanation

It looks a bit tricky because cypress-social-logins uses Puppeteer internally to implement the login code, so the Cypress includeShadowDom: true setting probably doesn't affect it.

According to this answer Puppeteer: clicking button in shadowroot, you can find the correct selector using devtools/inspect-element/copy-js-path.

If I do that on the SuperTokens demo, I get

document.querySelector("#supertokens-root").shadowRoot.querySelector("div > div > form > div:nth-child(2) > button")

which isn't super-useful as a selector, since it has a property call for shadowRoot, but there is a pseudo-element ::shadow that may work instead.

See The ::shadow pseudo-element

If an element has at least one shadow tree, the ::shadow pseudo-element matches the shadow root itself. It allows you to write selectors that style nodes internal to an element's shadow dom.

If ::shadow works to move inside the shadow-root, just append a standard Cypress selector that identifies the button uniquely.