支持 cypress-social-login 插件中的 shadow-dom 元素？

Question

我正在嘗試從cypress-social-logins plugin執行任務 GoogleSocialLogin 。

這是我為此使用的自定義命令：

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.")
    })
})

那么如果我有一個位於 shadow-dom 元素下的元素，我應該在 loginSelector 屬性中輸入什么值？

我標記了我想要達到的陰影元素：

謝謝！

Answer 1

TLDR ：

嘗試

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

---

解釋

看起來有點棘手，因為cypress-social-logins在內部使用 Puppeteer 來實現登錄代碼，所以 Cypress includeShadowDom: true設置可能不會影響它。

根據這個答案Puppeteer: click button in shadowroot ，您可以使用devtools/inspect-element/copy-js-path找到正確的選擇器。

如果我在 SuperTokens 演示中這樣做，我會得到

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

這作為選擇器不是超級有用，因為它有一個對shadowRoot的屬性調用，但是有一個偽元素::shadow可以代替它。

參見::shadow 偽元素

如果一個元素至少有一個影子樹，則::shadow偽元素匹配影子根本身。 它允許您編寫選擇器來設置元素陰影 dom 內部的節點樣式。

如果::shadow可以在 shadow-root 內移動，則只需 append 一個標准的賽普拉斯選擇器，它唯一地標識按鈕。