支持在柏树社会登录插件中的影子元素？

Question

我正在尝试从cypress-social-logins 插件执行任务插件。

这里是我为此使用的自定义命令：

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

，那么，如果我有一个位于影子-dom元素下的元素，我应该在loginSelector属性中放入什么值呢？

我标记了我想要达到的阴影元素：

​

谢谢!

Answer 1

TLDR

试一试

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

解释

这看起来有点棘手，因为cypress-social-logins在内部使用Puppeteer来实现登录代码，所以Cypress includeShadowDom: true设置可能不会影响它。

根据这个答案木偶技师:点击阴影根部的按钮，您可以使用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可以在阴影根目录中移动，只需附加一个标准的Cypress选择器，该选择器可以唯一地标识按钮。