Test with cypress a custom HTTP Headers

Cypress is a popular end-to-end testing framework that allows developers to write automated tests for their web applications. One of the key features of Cypress is its ability to send custom HTTP headers with requests, making it useful for testing scenarios that require specific headers.

Example

Let's consider an example where we want to test a web application that requires a custom Authorization header to be sent with each request. We can use Cypress to send this header with our requests using the headers option.

Here is an example to Test with cypress a custom HTTP Headers:

// cypress/integration/example.spec.js

describe('Custom HTTP Headers', () => {
  it('visits the app with custom headers', () => {
    cy.visit('https://example.com/', {
      headers: {
        'Authorization': 'Bearer YOUR_TOKEN_HERE'
      }
    })

    // Verify that the custom header was sent with the request
    cy.get('header').should('contain', 'Authorization: Bearer YOUR_TOKEN_HERE')
  })

  it('sends a request with custom headers', () => {
    cy.request('GET', 'https://example.com//api/data', {
      headers: {
        'Authorization': 'Bearer YOUR_TOKEN_HERE',
        'Content-Type': 'application/json'
      }
    })

    // Verify that the custom headers were sent with the request
    cy.get('header').should('contain', 'Authorization: Bearer YOUR_TOKEN_HERE')
    cy.get('header').should('contain', 'Content-Type: application/json')
  })
})

In this example, we are visiting the URL https://example.com/ and sending a custom Authorization header with the value Bearer YOUR_TOKEN_HERE. We are also sending a GET request to https://example.com//api/data with custom Authorization and Content-Type headers.

Terminal Output

When we run our Cypress tests with custom HTTP headers, we can see the headers being sent with the requests in the terminal output. Here is an example of what the terminal output might look like:

In the terminal output, we can see that the tests passed and the custom headers were sent with the requests.

Conclusion

In this article, we learned how to test with Cypress and custom HTTP headers. We saw how to use the headers option with the visit command and the request command to send custom headers with our requests. By using custom HTTP headers with Cypress, we can test a wide range of scenarios that require specific headers to be sent with requests.