The Perfect Guide for Testing Login Using Okta SSO with Cypress
Cypress with React and Okta widget
Setting up End to End Testing for a production application sounds easier than it is. This is an account of my recent experience with setting up Cypress for testing my React application at work.
Now when it comes to testing, I personally feel end-to-end testing is the winner in the effort vs reward debate. I picked up Cypress to test my application by mimicking user flow because for my use case that’s the most rewarding scenario. We are using Okta as the SSO provider for our company, they provide a React wrapper for all the authentication and user state management.
But It doesn’t work
We tried using the Okta directly with the redirect flow that it has, it turns out there are limitations with Cypress
“If you attempt to visit two different superdomains, Cypress will error. Visiting subdomains works fine. You can visit different superdomains in different tests, but not in the same test.”
You can read about it in detail here.
What goes wrong with Okta flow?
Okta redirects to its login page and it doesn’t work implicitly in Cypress because of the whole security policy. Now we can bypass this by intercepting the authentication request to Okta servers and mock the data but that requires a lot of configs. I am sure that you’ve already come across solutions that take this route.
Okta Widget is the Saviour
We started using Okta widget due to some other issue that came along, related to Authentication. Now the good thing about the Okta widget is that unlike the Okta Login page, it does not have redirects out of our SPA and so you can control most of the authentication flow with it. Okta widget is simply a form which you can customize a little bit according to your need.
For testing, all we need is a unique identifier for each form field namely username, password, and submit button. I used the HTML element id selector for the form fields and it seemed to work fine.
Talk is cheap, Show me the code
Below are the code and mock data I had to write to test Okta Login with Cypress.
How does it work?
- Cypress redirects to /login route where the okta widget lives.
- We check for the Okta Widget elements appear
- We fill out the form with data stored in fixtures
- Try to login and check if the app redirects to the home page
- Check if clicking on the logout button redirects the user to /logout page
cypress/fixtures/user.json
{
"username": "<your-test-user-name>",
"password": "<test-user-password>"
}cypress/integration/login/login.spec.js
describe('Authentication flow', function() {
beforeEach(() => {
cy.fixture('user.json').as('user');
});it('Redirects to login', () => {
cy.visit('/home');
// app should redirect to login page cy.url().should('contain', 'login');
});it('loads okta widget', () => {
cy.get('#sign-in-widget').should('be.visible');
cy.get('#okta-signin-username').should('be.visible');
cy.get('#okta-signin-password').should('be.visible');
cy.get('#okta-signin-submit').should('be.visible');
});it('fills out user credentials', () => {
cy.get('@user').then(user => {
cy.get('#okta-signin-username').type(user.username);
cy.get('#okta-signin-password').type(user.password);
cy.get('#okta-signin-submit').click();
});
});it('logs in user and redirects to initial route', () => {
cy.wait(2000);
cy.get('[data-cy=sidebar]').then(() => {
cy.url().should('contain', '/home');
});
});it('logs out the user', () => {
cy.wait(2000);
cy.get('[data-cy=logout-btn]').click();
});it('redirects to logout page', () => {
cy.url().should('contain', '/logout');
cy.get('[data-cy=logout-page]').should('be.visible');
cy.get('[data-cy=login-again-btn]').should('be.visible');
cy.wait(5000);
});
});
For my custom UI elements, I used data-cy as the selector for test elements. You can read here more about how to correctly select an element from dom. This was about my experience with using Okta and Cypress for testing SPA.
Using the Okta widget worked for us to get the Cypress testing rolling. I hope this article helped you to solve your issues or get the Cypress testing working with Okta SSO. May you have any queries related to how we did it, let us know in the responses below.
If you haven’t already please follow me, to get notified about such posts.
