Unable to log into Okta app using Cypress

[damosull]

Current behavior

When I attempt to log into a Single Page Okta application the test is going onto my homepage, but it's not navigating to the Okta page to log in.

Here is the error:

Timed out retrying after 4000ms: The command was expected to run against origin https://dev-n2jrwg8j36hmpd5j.us.auth0.com but the application is at origin http://localhost:3000.

This commonly happens when you have either not navigated to the expected origin or have navigated away unexpectedly.

Using cy.origin() to wrap the commands run on http://localhost:3000 will likely fix this issue.

cy.origin('http://localhost:3000', () => {
  <commands targeting http://localhost:3000 go here>
})

Because this error occurred during a before each hook we are skipping the remaining tests in the current suite: Okta

Desired behavior

I log in using the Okta sign-in

Test code to reproduce

1. Run this sample app locally - https://github.com/damosull/okta-app (npm install & npm start). This opens up on localhost:3000
2. Run this Cypress framework locally - https://github.com/damosull/okta-cypress, & run the only test in the framework (npm install & npx cypress open).
3. RESULT: The login is unsuccessful, when it should work

Cypress Version

13.13.2

Node version

20.9.0

Operating System

macOS 14.5

Debug Logs

No response

Other

No response

[yuri-pires]

Hey ✌🏻,

I noticed you’re using cy.origin in your file:

cy.origin(
    Cypress.env('okta_domain'),
    { args: { username, password } },
    ({ username, password }) => {
        cy.get('input[name="identifier"]').type(username)
        cy.get('input[name="credentials.passcode"]').type(password, {
            log: false,
        })
        cy.get('[type="submit"]').click()
    }
)

Inside the cy.origin block, you should navigate to the base URL of the Okta site. It seems you’re passing okta_domain as an argument, which I assume is the login URL ending with .com.

However, you should include a cy.visit inside the block to navigate to the specific login URL, like this:

cy.visit('/login')

This will ensure that Cypress properly visits the Okta login page before performing any actions.