Cypress tips and tricks

cypress-tips.md

Don't await Cypress methods

Given this backend task:

// plugins.ts
const plugin: Cypress.PluginConfig = (on, config) => {
  on('task', {
    async waitForMe(ms: number) {
      return new Promise((resolve) => {
        setTimeout(() => resolve(null), ms);
      });
    }
  }
};

WRONG

Intuitively an async task should be await'ed.

// feature.spec.ts
beforeEach(async () => {
  await cy.task('waitForMe');
});

CORRECT

However, the correct approach is to simply call it and let Cypress queue the task

// feature.spec.ts
beforeEach(() => {
  cy.task('waitForMe');
});

See Cypress Docs for details

Setup intercepts before opening the page

It is important that interceptors are setup before opening the page that fires the requests that are intercepted. If the interceptors are setup after the requests were made, they will not be captured and the test will timeout during cy.wait,

WRONG

it('calls the dependencies API', () => {
  cy.visit('/app/apm/services');
  cy.intercept('GET', '/internal/apm/dependencies/top').as('topDependencies');
  cy.wait('@topDependencies');
});

Correct

it('calls the dependencies API', () => {
  cy.intercept('GET', '/internal/apm/dependencies/top').as('topDependencies');
  cy.visit('/app/apm/services');
  cy.wait('@topDependencies');
});

Prefer cy.visitKibana instead of cy.visit

In most cases we should use cy.visitKibana instead of cy.visit. cy.visitKibana will wait for Kibana to have successfully loaded before moving on. This will reduce the risk of timing out later in the test because we split up the wait time in two parts: Kibana load time, and APM load time thus a time budget for each (by default 40 seconds).