DEV Community 👩‍💻👨‍💻

Russell Hudson
Russell Hudson

Posted on

Laravel/Cypress Google SSO Test

This is a working Google SSO Cypress Test. Your mileage may vary.

describe('Login', () => {
    it('Login through Google', () => {
        const username = Cypress.env('googleSocialLoginUsername')
        alert(username)
        const password = Cypress.env('googleSocialLoginPassword')
        const loginUrl = Cypress.env('loginUrl')
        const cookieName = Cypress.env('cookieName')
        const socialLoginOptions = {
            username: username,
            password: password,
            loginUrl: loginUrl,
            headless: true,
            logs: false,
            loginSelector: '[href="http://127.0.0.1:8000/auth/google"]',
            postLoginSelector: '.bg-scholarpath-500'
        }

        return cy.task('GoogleSocialLogin', socialLoginOptions).then(({cookies}) => {
            cy.clearCookies()

            const cookie = cookies.filter(cookie => cookie.name === cookieName).pop()
            if (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: cookieName
                })
            }
        })
    })
})

Enter fullscreen mode Exit fullscreen mode

Note: the following 2 lines are critical:

loginSelector: '[href="http://127.0.0.1:8000/auth/google"]',
postLoginSelector: '.bg-somestyle-500'
Enter fullscreen mode Exit fullscreen mode

Make sure this url matches the url for your google auth route.
Also, postLoginSelector is a class on your "Log in with Google" button.

You will also need the following plugin:

cypress-social-logins

Add the following to your plugins/index.js file:

const {GoogleSocialLogin} = require('cypress-social-logins').plugins

module.exports = (on, config) => {
    on('task', {
        GoogleSocialLogin: GoogleSocialLogin
    })
}

Enter fullscreen mode Exit fullscreen mode

That's it! Now try to run it:

npx cypress open

Top comments (0)

🌚 Life is too short to browse without dark mode