How to use clearlocalstorage method in Cypress

Everytime you define .route('VERB', '/endpoint', ...) it overrides your previous definition. The simplest solution would be to override this endpoint after you finish your first call

This test will work for you, Filip.

cy.route('POST', 'access-tokens', '@loginFailResponse', {status: 401}).as('loginFail')
cy.get("form input[type='email']").type("bad@email.com")
cy.get("form input[type='password']").type("Bad password")
// this should fail
cy.get("form").submit()
cy.route('POST', 'access-tokens', '@loginSuccessResponse').as('loginSuccess')
cy.get("form input[type='password']").type("g00d@password.com")
// this should let me in
cy.get("form").submit()

The following snippet should work for you. I copied/pasted it from @izaacdb's post in this thread.

cy.wait(5000)
cy.get('.__PrivateStripeElement > iframe').then($element => {

  const $body = $element.contents().find('body')

  let stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(0).click().type('4242424242424242')
  stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(1).click().type('4242')
  stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(2).click().type('424')
})

However, in order for the above to work, you need to do the following (copied/pasted from @nerdmax's post from the same thread linked above):

Big Thanks to @Vedelopment @brian-mann !

I tested with react-stripe-checkout component and it works.

Just add some solution details so it may save others some time.

chromeWebSecurity disable:

// cypress.json

{
  "chromeWebSecurity": false
}

--disable-site-isolation-trials:

Check: https://docs.cypress.io/api/plugins/browser-launch-api.html# AND #1951

// /plugins/index.js

module.exports = (on, config) => {
  on("before:browser:launch", (browser = {}, args) => {
    if (browser.name === "chrome") {
      args.push("--disable-site-isolation-trials");
      return args;
    }
  });
};

Cross domain is not supported in Cypress.

Example: step 1: You navigate to google step 2: Search for Gmail step 3: clicked on gmail link

You are switching from Google.com to gmail.com - cypress doesn't support this.

Workaround 1: You can remove set href attribute value to blank as below:

target="_blank" so that it will open in same page.

Workaround 2:

put step 1 and step 2 in one test iteration

and put step 3 in another iteration

Based on @Hiram comments, the code which worked is as follows:

let dateList = [];
cy.get("[data-testid='admission-row']").children().each((element) => {
    cy.get(element).invoke("attr", "data-value").then((date) => {
    dateList.push(date);
    });
});

you can easily access react components using cypress-react-selector. It uses react's internal properties like component, props, and states to identify the element in real-time. You don't need to set any custom attribute in your JSX, you can find out the elements in a way which more native to REACT.

• Install the library as dependency

npm i -D cypress-react-selector

• Update Cypress/support/index.js file to include the cypress-react-selector commands by adding:

import 'cypress-react-selector';

• user react-selector in your test like:

describe('It should validate cypress react selector', () => {
  before(() => {
    cy.visit('https://ahfarmer.github.io/calculator/');
    cy.waitForReact();
  });

  it('it should validate react selection with wildcard', () => {
    cy.react('*', { name: '9' }).should('have.text', '9');
  });

  it('it should validate react chaining', () => {
    cy.react('t', { name: '5' }).react('button').should('have.text', '5');
  });

});

It has a lot more functionalities to offer. Follow the instructions in the readme.

Here is a live example of handling react formik forms using cypress-react-selector.

This could be bad advice, but can you try the following?

cy.findAllByRole('rowheader').eq(2).click({force: true})

Cypress has an event called url:changed. See doc on Events here

Using this, something like this may work:

context("Workflow", () => {
    it("login", () => {

        cy.on('url:changed', url => {
            cy.location('hash').then(hash => {
                if (!url.endsWith(hash)) {
                    cy.visit(url);
                }
            });
        });

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demo{enter}").should("have.value", "demo") // this should redirect to "/#home"
        cy.get(".subtitle").should("have.value", "Welcome") //this line fails as ".subtitle" is an element of "/#home"

    })
})

Edit: just for troubleshooting purposes and to focus on your issue, can you try it like this without cy.location():

context("Workflow", () => {
    it("login", () => {

        cy.on('url:changed', url => {
            cy.visit(url);
        });

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demo{enter}").should("have.value", "demo") // this should redirect to "/#home"
        cy.get(".subtitle").should("have.value", "Welcome") //this line fails as ".subtitle" is an element of "/#home"

    })
})

Edit: Have you tried cy.reload()

context("Workflow", () => {

    it("login", () => {

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demo{enter}").should("have.value", "demo") // this should redirect to "/#home"
        cy.reload();
        cy.get(".subtitle").should("have.value", "Welcome");
    })
})

For the record,

cy.origin('https://www.linkedin.com', () => {
  cy.visit('/in/sunwoo0706', {failOnStatusCode: false})  // redirects to login page
})

To do this I'm using wrap() to return a Chainable containing the value I want to return.

Module

function foo() {
  return cy.wrap('foo');
}

Cypress.Commands.add('foo', foo);

Test File

cy.foo().then(value => console.log(value)); // foo

Since wrap() is returning a Cypress.Chainable, we can call .then() on our commands. What ever is passed into wrap() is yielded to the next command.

See also: Cypress wrap() documentation