How to use validateRouteMatcherOptions method in Cypress

Well this seems to work, so it tells me I have some more to learn about .should()

cy.get('.check-box-sub-text').should('not.exist');

You can use Cypress.env for this. Then you can use the token throughout the test anywhere.

it('the value of JWT Token should exist in localStorage', () => {
  cy.getLocalStorage('JWT_DATA').then((lsData) => {
    cy.log('the token', lsData) // I get JWT Token in here
    Cypress.env('token', lsData)
  })
})

To use it, you can do

Cypress.env('token')

Add .length to your if statement

cy.get('li').each(($li) => {
  if ($li.has('span.imstuck').length) {
    cy.wrap($item).find('.imstuck').should('contain', 'Something')
  }
})

But may be better to move 'span.imstuck' up a level. This way you are only getting those element with the span.

cy.get('li span.imstuck').each(($span) => {
  cy.wrap($span).should('contain', 'Something')
}

2022 here and tested with cypress version: "6.x.x" until "10.x.x"

You could use { force: true } like:

cy.get("YOUR_SELECTOR").click({ force: true });

but this might not solve it ! The problem might be more complex, that's why check below

My solution:

cy.get("YOUR_SELECTOR").trigger("click");

Explanation:

In my case, I needed to watch a bit deeper what's going on. I started by pin the click action like this:

Then watch the console, and you should see something like:

Now click on line Mouse Events, it should display a table:

So basically, when Cypress executes the click function, it triggers all those events but somehow my component behave the way that it is detached the moment where click event is triggered.

So I just simplified the click by doing:

cy.get("YOUR_SELECTOR").trigger("click");

And it worked ????

Hope this will fix your issue or at least help you debug and understand what's wrong.

    cy.get('your_button').then(($button) => {
        if(cy.get($button).should('not.be.disabled')){
            //your logical code for button ACTIVE
        }
        else{
            //your logical code for button NOT ACTIVE
        }
    })

The code below should do what you're trying to achieve. There is also an entire recipe with suggestions on how to test links that open in new tabs.

it('Advertise link should refer to Contact page', () => {
   cy.get('div.footer-nav > ul > li:nth-child(2) > a')
     .should('have.attr', 'href').and('include', 'contact')
     .then((href) => {
       cy.visit(href)
     })
})

I would also suggest reading through the Cypress document on the best ways to assign and work with variables: https://on.cypress.io/variables-and-aliases

Solved. Problem was that i used

cy.request({
    method: 'POST',
    url: 'http://localhost:1337/auth/local',
    auth: {
      identifier: 'myUsername',
      password: 'myPassword',
    },
  })

but that's wrong, because I'm not putting user and password in the body of the request. I need to use this:

cy.request({
    method: 'POST',
    url: 'http://localhost:1337/auth/local',
    body: {
      identifier: 'myUsername',
      password: 'myPassword',
    },
  })

So the full function in commands.js is

import 'cypress-localstorage-commands'
let user

    Cypress.Commands.add('postToken', () => {
      cy.request({
        method: 'POST',
        url: 'http://localhost:1337/auth/local',
        body: {
          identifier: 'myUsername',
          password: 'myPassword',
        },
      })
        .its('body')
        .then(res => {
          console.log(res)
          user = res.user
          cy.setLocalStorage('identity_token', res.jwt)
        })
    })

and its use is:

before(() => {
    cy.postToken()
    cy.saveLocalStorage()
  })

  beforeEach(() => {
    cy.restoreLocalStorage()
  })

  after(() => {
    // quit and close browser
  })

  describe('Authentication', () => {
    it.only('should login', () => {
      cy.getLocalStorage('identity_token').should('exist')
      cy.getLocalStorage('identity_token').then(token => {
        console.log('Identity token', token)
      })

      cy.visit(siteUrl)

    })

  })

I was able to solve this by

//cypress/support/index.js

Cypress.Server.defaults({
  ignore: xhr => {
    return Cypress.config().blockHosts.some(blockedHost =>  // get blockHosts from cypress.json using Cypress.config()
      Cypress.minimatch(new URL(xhr.url).host, blockedHost)  // if current url matches any blockedHost item, return true
    )
  }
})

more details on https://github.com/cypress-io/cypress/discussions/16536

A couple of things to note,

• there are two window objects in a Cypress test, the one the test runs in and the one the app runs in. Your call to console.error('questo e errore') is to the first, but your spy is on the second.

• test code runs faster than Cypress commands, so console.error('questo e errore') is running before cy.visit() gets done.

These example all work,

Spying on runner window console

it('should spy on RUNNER window.error', () => {
  cy.spy(window.console, 'error').as('spyWinConsoleError');
  console.error('questo e errore')
  cy.get('@spyWinConsoleError').should('be.calledOnce');
});

Spying on app window console

it('should spy on APP window.error', () => {
  const win = cy.state('window')
  cy.spy(win.console, 'error').as('spyWinConsoleError');
  
  win.console.error('questo e errore')
  cy.get('@spyWinConsoleError').should('be.calledOnce');
});

Catching an actual app error

it('should spy window.error', () => {
  cy.visit('../app/spy-on-win-error.html', {
    onBeforeLoad(win) {
      cy.spy(win.console, 'error').as('spyWinConsoleError');
    },
  })
  cy.get('@spyWinConsoleError').should('be.calledWith', 'from app');
});

<body>
  <script>
    setTimeout(() => {
      console.error('from app')
    }, 1000)
  </script>
</body>

Waiting for spiegel.de to load

it('should spy window.error', () => {

  cy.visit('https://www.spiegel.de/', {
    onBeforeLoad(win) {
      cy.spy(win.console, 'error').as('spyWinConsoleError');
      win.console.error("questo è l'errore due");      // call here after spy is set
    },
  })

  cy.get('@spyWinConsoleError')
    .should('be.calledOnce');
});