Cypress is a cool end-to-end testing tool, here are some tips for debugging.

Locally – dev tools

When running locally, a dev tools pane can always be opened – though it can be a bit unreliable. When it has a bad moment, best to close it and open by right-clicking on the browser to “Inspect element”.

On a Continuous Integration server

Issues which occur on CI, but do not appear locally, are especially tricky. The only windows into the process are the uploaded artifacts and SSH connection. On the videos Cypress produces, the logging pane is visible. To log something in there, the cy.log() method can be used. Here’s how to inspect an HTML element contents:

cy.get(".some-div").then((el) => cy.log(el.get(0).innerHTML))

Or, when the situation is more involved, any text (such as an HTTP response) can be saved to a file in the artifacts folder:

cy.intercept("GET", /some-path/).as("myRequest");
cy.wait("@myRequest").then((req) => {
      const data = JSON.stringify(req);
      cy.exec(
        `echo '${data}' > ./artifacts/log-${req.request.headers.host}-${req.id}.json`
      );
});