Is there a possibility to test blocked network requests in Cypress?

Question

We have multiple API requests on our page. When a call fails, certain behavior is expected. Is there a possibility of how to test a blocked network request in Cypress?

Answer 1

Blocking in your spec file

Say you wanted to block all requests to google tag manager

you could do the following:

cy.intercept({
  method: 'GET',
  url: 'https://www.googletagmanager.com/*'
}, req => {
  req.destroy();
});

// navigate to the page that calls google tag manager

As always, it's important to intercept the call BEFORE it is made.

Reference: https://docs.cypress.io/api/commands/intercept#Controlling-the-response

---

Blocking via Cypress settings

in your cypress.json file add the following:

{
  "blockHosts": [
    "www.googletagmanager.com"
  ]
}

Reference: https://docs.cypress.io/guides/references/configuration#blockHosts

Answer 2

There are two more ways to block a cypress test call

1. To force a network error by adding { forceNetworkError: true }.

   Example cy.intercept('https://my-website.com/specific-path.html', { forceNetworkError: true }).

2. By adding body block with status code error of 404 and delay.

cy.intercept(
  {
    method: 'GET',
    pathname: '/todos'
  },
  {
    body: 'test does not allow it',
    statusCode: 404,
    delayMs: 2000
  }
)

source links -

1. https://github.com/cypress-io/cypress/issues/3820#issuecomment-1136238501.
2. https://glebbahmutov.com/blog/cypress-intercept-problems/#simulate-network-error

Answer 3

If you would like to block Sleeknote popup which was blocking accessibility to UI components in our case, You can use below code to block network requests.

cy.intercept(
        {
            url: 'https://sleeknotestaticcontent.sleeknote.com/**',
            middleware: true,
        },
        (req) => {
            req.destroy();
        }
    )

Answer 4

To test certain behavior of the application when the API call fails, use an intercept command with failOnStatusCode: false. The default value is true but this will not allow the test to proceed further.

A simple example:

it('tests the API call failed', () => {

  cy.intercept({
    method: 'GET',
    url: 'api/resource/1',
    failOnStatusCode: false
  }).as('api')

  cy.visit('/')

  cy.wait('@api')

  cy.get('#error-massage').should('be.visible')
})