cy.request

==========

cy.request, as its name suggests, is the command used to perform requests at the network level, such as a GET or POST.

​

cy.intercept

============

cy.intercept does not make a request, but rather "listens" to requests that occur on the network layer. If we "ask" Cypress to name a certain request that we expect to occur after some action, we can also "ask" it to wait for it before moving on when it notices that such a request occurred.

​

That is, cy.intercept is usually used in conjunction with two other commands, .as and cy.wait.

​

Usage Exapmle:

==============

describe('Trello App', () => {

  beforeEach(() => {

    cy.request({

      method: 'POST',

      url: '/boards',

      body: { title: 'TAT' }

    })

    cy.request({

      method: 'POST',

      url: '/boards/tat',

      body: { column: 'TODO' }

    })

  })

​

  it("creates a card in a board's column", => {

    cy.intercept('GET', '**/boards/tat/cards').as('getCards')

​

    cy.visit('/boards/tat')

    cy.get('[data-cy="add-card-btn"]').click()

    cy.get('[data-cy="card-title-input"]').type('Bug #420')

    cy.get('[data-cy="card-title-description"]').type('Test bug #420 in production')

    cy.get('[data-cy="create-card-btn"]').click()

​

    cy.wait('@getCards')

​

    cy.contains('[data-cy="card"]', 'Bug #420').should('be.visible')

  })

})

​

Reading info:

https://dev.to/walmyrlimaesilv/cy-request-vs-cy-intercept-cmi

https://docs.cypress.io/api/commands/intercept

https://docs.cypress.io/api/commands/request