Cypress

tags:  javascript, tests

Common commands in Cypres

Type in an input

cy.get('[data-test-input="input"]').type('Example text')

Assert sent data to API

cy.intercept(
  {
    pathname: "/categories",
    method: "POST",
  },
  (req) => {
    const {
      body: { category },
    } = req;

    expect(category.name).to.be.equal("Name");

    req.reply({
      body: { category: { id: "1" } },
    });
  }
);

Note: it's better to follow the following use case: Check API query params on CypressCheck API query params on Cypress
Context

When developing a new feature in frontend, sometimes we want to assert that the data sent to the API is valid, not only the effects after the API is resolved.

In Cypress, we can inter...

Check an element exists in view

cy.get('[data-test-element="element"]').should('exist')

Run Cypress without stopping on first failure

cypress run ----auto-cancel-after-failures false --record

TBD It may require add configuration parameters in Cypress Cloud.

Load an static JSON fixture in an intercept

A real use case could be that we have two intercepts: one for collection and a different one for the specific element; and we want to retrieve the specific element from the collection JSON to avoid code repetition.

cy.fixture("blog/posts").then((json) => {
  cy.intercept(
    {
      pathname:
        "/blog/post/1",
      method: "GET",
    },
    (req) => {
      req.reply({ post: json.posts[0] });
    }
  );
});

Waiting for side effects doesn't happen

Using cy.wait(Number) is a bad practice according Cypress documentation.

Imagine we have the following use case:

  • we are waiting to a Promise that isn't dependable of an API query
  • we are checking that some side effect hasn't happened

For example, checking that a flash message hasn't appeared after saving doing an action in a webapp. The flash message is shown under a Promise (it has a timeout) so waiting for the API isn't enough. And, as we want to check nothing has happened, the test is going to pass wrongly always as we do the check just after the API has success.

In this case, it's ok to do the following in a Cypress:

// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(TIMEOUT_FLASH_MESSAGE);

cy.get('[data-test-data="element"]', {
  timeout: 0,
}).should("not.exist");

Notes

  • Write about good practices in Cypress/tests architectures

References