End-to-End Testing with Cypress and Auth0

Blog Discussions
107

Thanks for sharing that @Hawxy !

108

@konrad.sopala any update for auth0/auth0-react users?

109

@robertino.calcaterra do you have any info on the above? Thank you!

110

Following up here @robertino.calcaterra @konrad.sopala

Just wondering if you all are able to provide any rough timelines in light of “We are positioning this topic internally as a high-priority topic” from 3/2020, so that myself and other auth0-react users can plan accordingly.

Best and thank you -

111

Cross-origin support is finally released which should resolve all remaining problems in this space:

Here’s an example implementation for an Auth0 site that uses identifier-first login & automatically redirects on load:

Cypress.Commands.add('loginAsUser', (email, password) => {
    const args = { email, password }
    cy.session(
        args,
        () => {
            // visit homepage
            cy.visit('/')
            // redirects to Auth0
            cy.origin('/**YOUR AUTH0 DOMAIN HERE**/', { args }, ({ email, password }) => {
                cy.get('#username').type(email)
                cy.get('button').contains(/^Continue$/).click();
                cy.get('#password').type(password)
                cy.get('button').contains('Continue').click();
            })
            // assert we've returned to the site
            cy.url().should('contain', '/home')
        }
    )
})

Very simple!

2 Likes
112

Wooohooo thanks for sharing that!

113

Hi everyone! We updated this post!

This blog post is no longer maintained, and it may be out of date. Please use the following resources created by the Cypress team to learn how to use Cypress to test a Single-Page Application (SPA) that uses Auth0:

The updated version is here.

2 Likes
114

If you want to see a working example of a SPA that has end-to-end tests with Cypress, you can also check out Ionic for JHipster. When you generate the Ionic app, it includes Cypress tests that use cy.origin and cy.session (to help honor Auth0 rate-limits).

2 Likes
115

Thanks @robertino.calcaterra and @mraible for sharing all that!

116

I’m currently we’re having a problem using Auth0 together with cypress End to End testing using Nejxt JS. Hope you could help us and give some information and advice. Summary of the Inquiry, the Auth0 is not able to run or pass on cypress e2e when its move to serverSideRendering it always throws us an errors. Below are the current versions and used libraries:

  • Next JS → “next”: “^13.1.1”
  • Auth0 → “@auth0/nextjs-auth0”: “^2.0.1”
  • Cypress → “cypress”: “^12.3.0”,

The Following are the Errors and Steps we have done so far:

  1. When Auth0 (Authentication) on client side it works fine.
  2. When Auth0 (Authentication) moved to serverSideRendering. (code below)

Steps and Things Done so far:

  1. Manually login in the user whic the credentials.
  • followed this docs and article. (https://auth0.com/blog/end-to-end-testing-with-cypress-and-auth0/)
  • I was able to get a access_token, id_token, expires, token: “bearer”, date
  • but trying to manually add it to session using cy.session() its not able to redirect the user or login the user. Stuck on the same screen even using cy.visit()
    [image]
  • Screen Behavior:
    [image]
  1. Tried to use direct login without cy.origin, cy.visit
    [image]
  • stuck on the same page it has an error, that callback not be called.
  1. Tried the this one as well the login with forms.
    [image]
  • but were having an error on callback and its having 400 which not allowed us to deploy since it has an error. (error below)

[image]

  1. Tried also to cy.visit into a callback after getting a token.
1 Like
117

I am having similar issues being able to login programmatically whilst using @nextjs-auth0 and Cypress. I have been able to login via the UI using Cypress but this is far from ideal considering the volume of E2E testing I want to do and having to be redirected to an Auth0 login screen, while automated, is still time consuming.

I raised this post yesterday and am close but I am struggling to store the appSession cookie correctly which is causing all subsequent requests to be returned with a 401. Link to my post here.

118

Hey there. Just wondering if you’ve found a solution to using cy.session with Auth0 NextJS? Trying to do the same things and would love to be able to use the latest Cypress version.

119

Hi! I haven’t yet no. I have been close with creating some sort of session and storing it as a cookie, but Auth0 keeps returning an error meaning that I must have not created the cookie correctly. If you have made any progress please do share!

120

Hellow guys! I dont know if this should be posted here! I am making use of this code → End-to-End Testing with Cypress and Auth0 - #63 by konrad.sopala
But when I run the test I think the token is not stored properly due It still shown the auto0 login form? Any idea how to solve it?