More Fun With Cypress

Two weeks ago, I wrote about my first experiences using Cypress.io.  I was intrigued by the fact that it was possible to do http requests using Cypress commands, so this week I decided to see if I could combine API commands with UI commands in the same test.  To be honest, it wasn't as easy as I thought it would be, but I did manage to come up with a small proof-of-concept.

Part of the difficulty here may lie in the fact that there aren't many websites around on which to practice both UI and API automation.  For my experimentation, I decided to use the OWASP Juice Shop, which is a great site for practicing security testing.  I wanted to log into the site using an HTTP command, and then use the token I retrieved from my login to navigate to the site as an authenticated user.

Setting up the HTTP command was pretty easy.  Here's what it looks like:

var token;

describe('I can log in as a user', () => {
    it('Logs in', () => {
        cy.request({
  method: 'POST',
  url: 'https://juice-shop.herokuapp.com/rest/user/login',
  headers: {'content-type':'application/json'},
  body: {
    email: 'foo5@bar.com',
    password: '123456'
  }
})
  .then((resp) => {
    const result = JSON.parse(JSON.stringify(resp.body));
    token = result.authentication.token;
        expect(resp.status).to.eq(200);
    })
});
});

Let's take a look at what's happening here.  First I declare the token variable.  The 'I can log in as a user' and 'Logs in' parts are just the names of the test section and the test.  Then we have the cy.request section.  This is where the http request happens.  You can see the method, the url, the headers, and the body of the request.  Next, there's the then((resp), which shows what the test is doing with the response.  With const result = JSON.parse(JSON.stringify(resp.body)), I'm parsing the body of the response into JSON format and saving it to a result variable.  Then I'm setting the token variable to result.authentication.token.  Finally, with expect(resp.status).to.eq(200) I'm doing a quick assertion that the status code of the response is 200 just to alert me if something didn't come back correctly.

Next, I loaded the web page, and included the token in the browser's local storage so the web page would know I was authenticated:

describe('Is logged in', function() {
  it('Is logged in', function() {
    cy.visit('https://juice-shop.herokuapp.com/#/', {
    onBeforeLoad (win) {
      win.localStorage.setItem('token', token)
    },
  })
    cy.contains('Dismiss').click();
    cy.contains('Your Basket').should('be.visible');
  })
});

With this line: cy.visit('https://juice-shop.herokuapp.com/#/' I'm navigating to the web page.  With the next section:

    onBeforeLoad (win) {
      win.localStorage.setItem('token', token)
    },
  })

I'm telling the browser to put the token I saved into local storage.  There was a popup window with a "Dismiss" button that appeared in the browser, so I closed it with cy.contains('Dismiss').click(). And finally with cy.contains('Your Basket').should('be.visible') I asserted that the link called "Your Basket" was visible, because that link doesn't appear unless the user is authenticated.

My code definitely wasn't perfect, because I noticed that when I manually logged in, I saw my email address in the Account dropdown, but when I logged in through Cypress, the email address was blank.  I also tried doing some other UI tasks, like adding an item to my cart, but I had trouble simply because the application didn't have good element identifiers.  (I so appreciate developers who put identifying tags on their elements!  If your developers do this, please thank them often.)  And there may be irregularities with this application because it was specifically designed to have security holes.

It would be very interesting to see how easy it would be to set up API and UI testing in Cypress when testing an application with normal authentication processes and good element identifiers!  However, I think my experiment showed that it's fairly easy to integrate API and UI tests together in Cypress.