How to automate office 365 login in cypress using Nightwatch.js

This blog will explore how to automate office 365 login in cypress using Nightwatch.js. Currently, I’m working on Cypress automation for testing web applications.

First, let’s understand the problem area.

We needed to automate the login flow in an application using office 365’s IDP. When we launched the application through cypress, we landed on the office 365 login screen which was not possible to automate. We were not able to have control over the page through cypress. Cypress has some other techniques to automate this like SSO(single-sign-on) However, our clients were not able to share some secrets and also the Azure DevOps environment.

So far nothing worked for us, So now let’s come to the point.

In order to automate office 365 login in cypress using Nightwatch.js. I thought we could use other tools to get the JWT token that we can use to log into an application through Cypress.

Now, the question was which tools to be selected. 

I selected Nightwach.js tools because it was easy to use with little configuration. We successfully automated office 365 login. Get the JWT token from local storage and write it in common utility files.

Again the question was how to trigger the Nightwatch.js script through cypress.

Cypress supports cy. exec command runs the Nightwatch.js script and then control comes back to cypress and the rest execution is done.

• Now let us try the recipe, First install nightwatch.js with the following command, Copy

npm install nightwatch						 

• And also need to install the chrome driver with the following command, Copy

npm install chromedriver --detect_chromedriver_version

And also created a script for nightwatch.js

In the below code, we are reading JWT Token from local storage and storing it into jwtToken.txt

module.exports =
{
  '@tags': ['adm'],
  "test": function (browser) {
    let ch
    browser.url("Application url")
    browser.click('#details-button')
    browser.click('#proceed-link')
    browser.click('span[class="microsoft-logo"]')
    browser.setValue('#i0116', 'email')
    browser.click('#idSIButton9')
    browser.setValue('#i0118', 'password')
    browser.click('#idSIButton9')
    browser.click('#idBtn_Back')
    browser.execute(function () {
      ch = window.localStorage.getItem('jwtToken');
      return ch
    }, [], function (result) {
      this.assert.equal(result.value, result.value
      const fs = require('fs'
      const path = require('path');
      const dirPath = path.join(__dirname, '../cypress/fixtures/jwtToken.txt')
      var path2 = dirPath.replace(/\\/g, "/");
      console.log(path2)
      fs.writeFile(path2, result.value, err => {
        if (err) {
          console.error(err)
          return
        }
      })
    })
  }
}				

• Add the following command in support/command.js

Cypress.Commands.add("User", () => {
  cy.exec("npx nightwatch -e chrome ")
})

• Add the following code in the hooks file to use the JWT token in your tests reading the jwtToken.txt

Before({ tags: "@user" }, () => {
  cy.readFile('cypress/fixtures/jwtToken.txt').then((jwtToken) => {
    cy.log("JWT Token before : " + jwtToken)
  })
  cy.log('start')
  cy.User()
  cy.log('end')
  cy.readFile('cypress/fixtures/jwtToken.txt').then((jwtToken) => {
    cy.log("JWT Token After : " + jwtToken)
    cy.window().then(
      window => window.localStorage.setItem('jwtToken',jwtToken), { flag: 'w' })
      cy.visit(Cypress.config('apiLoginURL'))
  })
})

The output is that a new JWT token is generated and that the JWT token is used to run cypress test cases.

Conclusion :

 Different automation tools can be integrated with Cypress where Cypress lacks the ability to do so. In the previous version of Cypress, multi-domain origins were not supported, so we automated this scenario through Nightwatch.js.

Read more blogs here

16