Skip to content

Instantly share code, notes, and snippets.

@csuzw
Created November 7, 2019 10:49
Show Gist options
  • Save csuzw/845b589549b61d3a5fe18e49592e166f to your computer and use it in GitHub Desktop.
Save csuzw/845b589549b61d3a5fe18e49592e166f to your computer and use it in GitHub Desktop.
Azure AD Single Sign On with Cypress
// This goes in cypress/plugins/index.js
const AzureAdSingleSignOn = require('./azure-ad-sso/plugin').AzureAdSingleSignOn
module.exports = (on, config) => {
on('task', {AzureAdSingleSignOn:AzureAdSingleSignOn})
}
// This is an example of how you might use the plugin in your tests
describe('My spec', function() {
Cypress.Commands.add('setCookies', function () {
const options = {
username: Cypress.env('username'),
password: Cypress.env('password'),
loginUrl: Cypress.env('appUrl'),
postLoginSelector: '#myselector',
headless: true,
logs: false
}
cy.task('AzureAdSingleSignOn', options).then(result => {
cy.clearCookies()
result.cookies.forEach(cookie => {
cy.setCookie(cookie.name, cookie.value, {
domain: cookie.domain,
expiry: cookie.expires,
httpOnly: cookie.httpOnly,
path: cookie.path,
secure: cookie.secure
})
Cypress.Cookies.preserveOnce(cookie.name)
})
})
})
before(function() {
cy.setCookies();
})
it('Visits the site as logged in user', function() {
cy.visit(Cypress.env('appUrl'));
cy.contains(`Hello, ${Cypress.env('username')}!`)
})
})
// I put this in cypress/plugins/azure-ad-sso directory
'use strict'
const puppeteer = require('puppeteer')
/**
*
* @param {options.username} string username
* @param {options.password} string password
* @param {options.loginUrl} string password
* @param {options.postLoginSelector} string a selector on the app's post-login return page to assert that login is successful
* @param {options.headless} boolean launch puppeteer in headless more or not
* @param {options.logs} boolean whether to log cookies and other metadata to console
* @param {options.getAllBrowserCookies} boolean whether to get all browser cookies instead of just for the loginUrl
*/
module.exports.AzureAdSingleSignOn = async function AzureAdSingleSignOn(options = {}) {
validateOptions(options)
const browser = await puppeteer.launch({ headless: !!options.headless })
const page = await browser.newPage()
await page.goto(options.loginUrl)
await typeUsername({ page, options })
await typePassword({ page, options })
const cookies = await getCookies({ page, options })
await finalizeSession({ page, browser, options })
return {
cookies
}
}
function validateOptions(options) {
if (!options.username || !options.password) {
throw new Error('Username or Password missing for login')
}
if (!options.loginUrl) {
throw new Error('Login Url missing')
}
if (!options.postLoginSelector) {
throw new Error('Post login selector missing')
}
}
async function typeUsername({ page, options } = {}) {
await page.waitForSelector('input[name=loginfmt]:not(.moveOffScreen)', { visible: true, delay: 10000 })
await page.type('input[name=loginfmt]', options.username, { delay: 50 })
await page.click('input[type=submit]')
}
async function typePassword({ page, options } = {}) {
await page.waitForSelector('input[name=Password]:not(.moveOffScreen),input[name=passwd]:not(.moveOffScreen)', { visible: true, delay: 10000 })
await page.type('input[name=passwd]', options.password, { delay: 50 })
await page.click('input[type=submit]')
}
async function getCookies({ page, options } = {}) {
await page.waitForSelector(options.postLoginSelector, { visible: true, delay: 10000 })
const cookies = options.getAllBrowserCookies
? await getCookiesForAllDomains(page)
: await page.cookies(options.loginUrl)
if (options.logs) {
console.log(cookies)
}
return cookies
}
async function getCookiesForAllDomains(page) {
const cookies = await page._client.send('Network.getAllCookies', {})
return cookies.cookies
}
async function finalizeSession({ page, browser, options } = {}) {
await browser.close()
}
@ddregalo
Copy link

@Kpizzle , @csuzw - really appreciate the quick replies! Had to jump on something else for a second but will re-visit this very shortly and let you know what worked (fingers crossed!)

@ddregalo
Copy link

ddregalo commented Nov 22, 2019

Hey @csuzw @Kpizzle - thanks a ton for your suggestions, huge help in debugging where I was at and what needed to be done. I took the long way but I GOT THERE IN THE END!

The key fix was observing what happens on manual login as you suggested and this proved I didn't have the same cookies as when I ran the puppeteer plugin. During the login process different cookies are set at different stages and I was only capturing 2-3 cookies after clicking Stay Signed In => Yes. I then hardcoded all cookies I got from manually logging-in into my test with cy.SetCookie() and everything ran perfectly.....then returning to double check this repo I realized that I must have accidentally deleted my getAllBrowserCookies option which when re-enabled (true), captured all the cookies I needed and logged in exactly as if I had manually set them...BAM!

Super happy about this, I've been trying to get away from Selenium Web-Driver to a more modern (and more friendly) front-end testing framework and I've been really loving Cypress but was super stuck when I hit the AD wall - thanks again for this, really appreciate it!

*I don't actually have a bunch of tests yet to flex the robustness of running continuously back-to-back tests but now that I got the motivation I'll reach back and let you know how it goes...

@Kpizzle
Copy link

Kpizzle commented Nov 22, 2019

Awesome work @ddregalo,

Always feels good when you get your code working.

Yeah, I'd starting getting a nice collection of tests going and see how that works. My issue started (the instability) once I started having multiple separate spec files, and the cookies were being cleared between them.

@rahulpnath
Copy link

Great work!!

I modified it slightly to connect to the same browser instance as Cypress. Avoids having to copy over the cookies
https://gist.github.com/rahulpnath/4362ff2226ea36e056784f92c0d64434

@csuzw
Copy link
Author

csuzw commented Mar 25, 2020

Great work!!

I modified it slightly to connect to the same browser instance as Cypress. Avoids having to copy over the cookies
https://gist.github.com/rahulpnath/4362ff2226ea36e056784f92c0d64434

Thanks @rahulpnath, I didn't know you could do this, will give it a try at some point.

@rahulpnath
Copy link

@csuzw I tried on the new edge(chromium) one where it worked. Let know how it goes.

@kamiloski88
Copy link

Great work!!

I modified it slightly to connect to the same browser instance as Cypress. Avoids having to copy over the cookies
https://gist.github.com/rahulpnath/4362ff2226ea36e056784f92c0d64434

So if I copy your code from link above and update data then I should login using azure ad?

@chachra
Copy link

chachra commented Apr 28, 2020

Works great when cypress app is open.

But when running cypress run in command-line it seems to not set/preserve the cookie it seems like and hence my oauth login url then redirects to login.microsoft.com throwing entire test off and errors out.

@csuzw
Copy link
Author

csuzw commented Apr 28, 2020

This definitely use to work with cypress run as I had a working build pipeline with it. There seem to be so many slightly different flavours of this issue though that it's hard to say what might be wrong. It's also possible something has changed with Cypress since I did this - I haven't really looked at it this since I created it.

@chachra
Copy link

chachra commented Apr 28, 2020

Setting getAllBrowserCookies to true fixed it! @csuzw

@chachra
Copy link

chachra commented Apr 28, 2020

Thanks for your prompt response!

@Cesaario
Copy link

Cesaario commented May 5, 2020

Is there a way to get all the keys and values from local storage instead of the cookies? I'm getting "localStorage is not defined"

@WvdE
Copy link

WvdE commented May 28, 2020

The issue I am facing now is that I am getting a 302 in Cypress when trying to run this. Puppeteer fills out the Azure information, and successfully logs in, but when trying to open the desired page in Cypress, I get the 302. Has anybody had issues with this? @csuzw?

@somritasays
Copy link

I am also facing this issue as @WvdE described. its successfully logged in using puppeteer and giving me cypresserror:cy.task('AzureAdSingleSignOn') timed out after waiting 60000ms. Could you please help

@manoj-mukherjee-maersk
Copy link

cy.task("azureSingleSignOn", options, { timeout: 200000 }).then(({ cookies }) => {
    cy.log(cookies);
    console.log(cookies);
    cookies.forEach((cookie) => {
      if (cookie) {
        cy.setCookie(cookie.name, cookie.value, {
          domain: cookie.domain,
          expiry: cookie.expires,
          httpOnly: cookie.httpOnly,
          path: cookie.path,
          secure: cookie.secure,
          sameSite: "lax",
        });
        Cypress.Cookies.defaults({ preserve: cookie.name });
      }
    });

Why after set cookies and preserve that, When I tried cy.visit("/") its again going to sso azure login page? When I debug I saw cookies are remove automatically. What is the issue?

Screenshot 2022-04-22 at 11 17 13 AM

@manoj-mukherjee-maersk
Copy link

Able to run. connect puppeteer method. Launch method giving cookies but cypress remove those cookies on cy.visit("/").

  const browser = await puppeteer.connect({
      browserURL: `http://localhost:${debuggingPort}`,
      defaultViewport: null,
    });

@alaamhmd
Copy link

alaamhmd commented Jun 2, 2022

Hi,
I'm facing this error while trying to run this code, any help with that?
image

@ItsWasteD
Copy link

Any updates on how this works with the new cy.session()? I'm struggling to get it working because Cypress.Cookies.defaults got removed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment