Cypress Basics

Cypress end-to-end testing fundamentals.

Basic Commands

Visit page
cy.visit("https://example.com");

Get element
cy.get(".my-class");
cy.get("#my-id");
cy.get("[data-testid=submit]");

Click
cy.get("button").click();

Type
cy.get("input").type("text");

Clear
cy.get("input").clear();

Selectors

By text
cy.contains("Submit").click();

Within
cy.get(".form").within(() => {
  cy.get("input").type("value");
});

Find
cy.get(".parent").find(".child");

First/Last
cy.get("li").first();
cy.get("li").last();
cy.get("li").eq(2);

Navigation

Go back/forward
cy.go("back");
cy.go("forward");
cy.reload();

URL
cy.url().should("include", "/login");

Viewport
cy.viewport(1280, 720);
cy.viewport("iphone-6");

Test Structure

Basic test
describe("My Test", () => {
  beforeEach(() => {
    cy.visit("/ ");
  });

  it("should work", () => {
    cy.get("h1").should("be.visible");
  });
});