How to avoid repeated requests in Cypress tests

Question

Since aliases are cleared after each test (it) when using Cypress, it seems subsequent tests needs to execute the same request again and again, while I would prefer to get it only once. This can be verified by replacing beforeEach with before, resulting in the second and third test to fail. Of course all assertions could be placed in a single it, I want each assertion to be reported separately however. Why does Cypress need to reload the resource for each test and how can this be avoided?

/// <reference types="cypress" />

describe('When requesting the resource', () => {
    beforeEach(() => {
        cy.request('http://startpage.com/').as('response');
    });

    it('The status code should be 200', () => {
        cy.get('@response').its('status').should('be.ok');
    });

    it('The content type should be text/html', () => {
        cy.get('@response').its('headers.content-type').should('include', 'text/html');
    });

    it('The content should be encoded using UTF-8', () => {
        cy.get('@response').its('headers.content-type').should('include', 'charset=utf-8');
    });
});

Answer 1

Aliases in Cypress are removed between tests, that's why your response alias is not preserved. A discussion around this topic could be found e.g. here.

What works is this code:

const { expect } = require("chai")

describe('When requesting the resource', () => {

    let response;

    before(() => {
        cy.request('http://startpage.com/').then(res => response = res);
    });

    it('The status code should be 200', () => {        
        expect(response.status).to.equal(200);
    });

    it('The content type should be text/html', () => {
        expect(response.headers['content-type']).to.include('text/html');
    });

    it('The content should be encoded using UTF-8', () => {
        expect(response.headers['content-type']).to.include('charset=utf-8');
    });
});

you can see that cy.request() was run only once:

On the other hand, I don't consider this a nice solution, because it works only because you know that before() runs before all the tests, that's why you can rely on response having a value. But if you ever want to do something like this:

before(() => {
    cy.request('http://startpage.com/').then(res => response = res);
    console.log(response); // or any other usage of response variable
});

it will not work because you're mixing asynchronous and synchronous code, so by the time console.log(response) executes, response is still undefined.

---

So if there's a better solution, please post it and I'll delete my answer.