A Cheatsheet for Learning cypress.io

Download a cheatsheet of my favorite (most often used) cypress.io commands.

Why use cypress.io?

Using cypress.io gives me confidence that my web app continues working correctly after each coding change.

Cypress tests are live running documentation of my application’s features.

Now, to commit these commands to memory so I don’t need to look them up!

Finding Elements

In order to verify or interact with content on the page, your code needs to tell cypress how to find elements. Below are code examples for finding:

  1. a choice in a select box to click
  2. the contents of the first cell of a table
1
2
cy.get("span:contains('selectStr')").click();
cy.get("tbody>tr:eq(0)>td:eq(0)").contains(selectStr);

Verifying Content

Two ways to verify content is to check if it is contained on the page or it does not exist. It is common to use the data-cy attribute in your code to designate cypress test elements.

Note that in all examples, val should be a unique value, since that is what cypress will use to find the element.

1
2
cy.get("[data-cy=val]").contains(selectStr);
cy.get("[data-cy=val]").should("not.exist");

Verifying CSS properties

CSS properties such as background color can be verified, too.

1
cy.get("[data-cy=val]").should("have.backgroundColor", "#EF9A9A");

Entering Input

To interact with your input elements, clear() and type() are useful.

  1. Use clear() before replacing input.
  2. Use type() to replace the input.

You can even add {enter} or {esc} to your input string for pressing the enter or esc key. Adding {esc} is helpful for closing many input elements that may get in the way of the next command.

1
2
cy.get("[data-cy=val]").clear().type(inputStr);
cy.get("[data-cy=val]").type(inputStr{enter}, { force: true });

Waiting for http requests

For front end applications that rely on the timing of http requests, cypress offers a command, wait(), for waiting until a http requests finishes.

1
2
cy.intercept("GET", Cypress.env("testBaseUrl") + relativePath).as(waitStr);
cy.wait("@waitStr");

Reloading a page

To ensure your page has communicated with the server before running a test, you can use the reload() command.

1
cy.reload();

Documenting/Workflow

Adding logging to your tests can make them easier to understand and debug. To speed up debugging, I use the it.only() test specifier to run one test at a time.

1
2
cy.log("** read imported file **");
it.only("I am debuging only this test now"); // ( avoids running all tests )

Fixtures

Fixtures are json files that document the http requests you send to your application. Create fixtures in the cypress/fixtures directory. The example below uses a file called "fixtureFile.json".

1
2
3
    cy.fixture("fixtureFile").then(fixtureFile=> {
      cy.intercept(GET, Cypress.env("testBaseUrl") + relativePath, fixtureFile);
    });

Are you a cypress enthusiast?

I am always looking to improve my cypress skills and help when I can. Tweet me at @ardith_falkner about your cypress journey.