# Cannot get Cypress test to work in React with Okta

**URL:** <https://devforum.okta.com/t/cannot-get-cypress-test-to-work-in-react-with-okta/9372>\
**Category:** Questions\
**Created:** [May 14, 2020, 1:32am UTC](https://devforum.okta.com/t/cannot-get-cypress-test-to-work-in-react-with-okta/9372 "2020-05-14T01:32:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![DaveWesterman](https://avatars.discourse-cdn.com/v4/letter/d/c0e974/32.png) [@DaveWesterman](https://devforum.okta.com/u/DaveWesterman)\
**Post date:** [May 14, 2020, 1:32am UTC](https://devforum.okta.com/t/cannot-get-cypress-test-to-work-in-react-with-okta/9372/1 "2020-05-14T01:32:19Z")

</div>

I am trying to test my React (v16.10.2) application with Cypress (v4.5.0). Our application is using Okta for authentication (with the client @okta/okta-react 1.3.1).

I can use my app from the browser without any issues. The first time I login, I get the Okta login screen. I enter my user ID and password, and the react client calls the `authn` endpoint with my creds, and then calls the `authorization` endpoint to get the token. I am then taken to the first screen of our application.

When I try to login in my Cypress test, my user ID and password are entered into the login screen, the `authn` endpoint is called successfully, but the `authorization` endpoint returns a 403 error. Unfortunately, there is no other info about why I am getting the 403.

I have compared the `authorization` requests between the one that works in the browser, and the one that doesn’t work from Cypress. The only real difference I see is that the working browser request has an `origin` header, whereas the failing one does not.

Question #1: Could the missing `origin` header be the cause of my problem?

In order to avoid a bunch of CORS and cross-site issues, I had to install a couple Chrome extensions (`ignore-x-frame-headers` and `Access-Control-Allow-Origin-master`). I am implementing them in the following code in `cypress/plugins/index.js`:

```auto
module.exports = (on, config) => {
    on('before:browser:launch', (browser = {}, launchOptions) => {
        // The following code comes from https://medium.com/@you54f/configuring-cypress-to-work-with-iframes-cross-origin-sites-afff5efcf61f
        // We were getting cross-origin errors when trying to run the tests.
        if (browser.name === 'chrome') {
            const ignoreXFrameHeadersExtension = path.join(__dirname, '../extensions/ignore-x-frame-headers');
            launchOptions.args.push(`--load-extension=${ignoreXFrameHeadersExtension}`);
            const accessControlAllowOriginMasterExtension = path.join(__dirname, '../extensions/Access-Control-Allow-Origin-master');
            launchOptions.args.push(`--load-extension=${accessControlAllowOriginMasterExtension}`);
            launchOptions.args.push("--disable-features=CrossSiteDocumentBlockingIfIsolating,CrossSiteDocumentBlockingAlways,IsolateOrigins,site-per-process");
            launchOptions.args.push('--disable-site-isolation-trials');
            launchOptions.args.push('--reduce-security-for-testing');
            launchOptions.args.push('--out-of-blink-cors');
        }
        if (browser.name === 'electron') {
            launchOptions.preferences.webPreferences.webSecurity = false;
        }
        return launchOptions;
    });

```

I also added the following to `cypress.json`:

```auto
{
  "chromeWebSecurity": false
}

```

Here is my cypress test:

```auto
describe('Order Lookup Test', () => {
    const UI_URL: string = 'http://localhost:3000/';
    const ORDER_NUMBER: string = '10307906234';
    beforeEach(() => {
        Cypress.config('requestTimeout', 50000);
        cy.visit(UI_URL);
        cy.get('#okta-signin-username', {timeout: 10000}).type('xxxxxxxx');
        cy.get('#okta-signin-password', {timeout: 10000}).type('xxxxxxxx');
        cy.get('#okta-signin-submit', {timeout: 10000}).click();
    })
    it('should return an order', () => {
        cy.get('.number-input', {timeout: 10000}).type(ORDER_NUMBER);
        cy.get('.order-lookup-buttons-search-valid').should('be.visible').click();
    })
})

```

Does anyone have any idea what might be going on? What other information should I be including in order to help narrow this down?

---

<div class="post-metadata">

**Author:** ![mraible](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/mraible/32/37_2.png) [@mraible](https://devforum.okta.com/u/mraible)\
**Post date:** [May 14, 2020, 10:35pm UTC](https://devforum.okta.com/t/cannot-get-cypress-test-to-work-in-react-with-okta/9372/2 "2020-05-14T22:35:44Z")

</div>

I’m not sure about Cypress, but I do have a Protractor test that works to log in to Okta.

The main logic is in [`login.po.ts`](https://github.com/mraible/ng-demo/blob/okta/e2e/src/login.po.ts). You can see how it’s used in [`edit.e2e-spec.ts`](https://github.com/mraible/ng-demo/blob/okta/e2e/src/edit.e2e-spec.ts).

---

<div class="post-metadata">

**Author:** ![vijet](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/vijet/32/245_2.png) [@vijet](https://devforum.okta.com/u/vijet)\
**Post date:** [May 15, 2020, 5:17am UTC](https://devforum.okta.com/t/cannot-get-cypress-test-to-work-in-react-with-okta/9372/3 "2020-05-15T05:17:54Z")

</div>

It certainly looks like the missing `origin` header is the reason for your test failure.  
The reason being that the request from your application (http//localhost:3000) to your okta org is a cross domain request which triggers the CORS mechanism in the browser.  
If the request doesn’t include the `origin` header, you’re not allowed to access the resource on your okta org.  
You’ll have to find a way to include the origin header in your request.

Edit: Have you seen this thread? [https://github.com/cypress-io/cypress/issues/4416](https://github.com/cypress-io/cypress/issues/4416)  
This also looks helpful - [https://gist.github.com/ndavis/2c84ab40aaa3c98c3a8062bdb3938232](https://gist.github.com/ndavis/2c84ab40aaa3c98c3a8062bdb3938232)

---

<div class="post-metadata">

**Author:** ![DaveWesterman](https://avatars.discourse-cdn.com/v4/letter/d/c0e974/32.png) [@DaveWesterman](https://devforum.okta.com/u/DaveWesterman)\
**Post date:** [May 15, 2020, 1:36pm UTC](https://devforum.okta.com/t/cannot-get-cypress-test-to-work-in-react-with-okta/9372/4 "2020-05-15T13:36:50Z")

</div>

Thanks for the info!

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/oktadev/original/1X/589c4c5f80de422d01f47cee7185a7fb8227835c.png) [@system](https://devforum.okta.com/u/system)\
**Post date:** [January 24, 2024, 7:29pm UTC](https://devforum.okta.com/t/cannot-get-cypress-test-to-work-in-react-with-okta/9372/5 "2024-01-24T19:29:23Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.