Cypress Notes

Install Cypress

npm install cypress --save-dev

Run Cypress

npx cypress open

Run Cypress in headless mode

npx cypress run

Run Cypress headed mode

npx cypress run --headed

Run Cypress in headless mode with a specific browser

npx cypress run --browser chrome

Run Cypress in headless mode with a specific browser and record the test

npx cypress run --browser chrome --record

Run Cypress in headless mode with a specific browser and record the test with a specific key

npx cypress run --browser chrome --record --key 12345678-1234-1234-1234-123456789012

Cypress test

Create a test

npx cypress open

Create a test with a specific name

npx cypress open --spec "cypress/integration/mytest.spec.js"

Create a test with a specific name and run it

npx cypress run --spec "cypress/integration/mytest.spec.js"

Cypress Functions

To launch application

cy.visit("http://localhost:3000"); // whatever the URL is

To get the title of the page

cy.title();

To get the URL of the page

cy.url();

Here is a Example

describe("My First Test", () => {
  it("verify title-positive", () => {
    // lunch the app
    cy.visit("http://localhost:3000/");
    // check the title
    cy.title().should("eq", "Pitchspot");
  });

  it("verify title-negative", () => {
    // lunch the app
    cy.visit("http://localhost:3000/");
    // check the title
    cy.title().should("eq", "Pitchspot1");
  });
});

Locators

To get the element by ID

cy.get("#id");

To get the element by class

cy.get(".class");

To get the element by tag

cy.get("tag");

To get the element by attribute

cy.get("[attribute]");

To get the element by attribute and value

cy.get("[attribute='value']");

To get the element by attribute and value with wildcard

cy.get("[attribute*='value']");

To get the element by attribute and value with wildcard at the end

cy.get("[attribute$='value']");

To get the element by attribute and value with wildcard at the beginning

cy.get("[attribute^='value']");

To get the element by attribute and value with wildcard at the beginning and end

cy.get("[attribute*='value']");

Actions

To click on the element

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

To type in the element

cy.get("input").type("Faruk");

To clear the element

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

To select the element

cy.get("select").select("Faruk");

To check the element

cy.get("input").check();

To uncheck the element

cy.get("input").uncheck();

Assertions

To check the title of the page

cy.title().should("eq", "Pitchspot");

To check the URL of the page

cy.url().should("include", "http://localhost:3000");

To check the element is visible

cy.get("button").should("be.visible");

To check the element is not visible

cy.get("button").should("not.be.visible");

To check the element is enabled

cy.get("button").should("be.enabled");

To check the element is disabled

cy.get("button").should("be.disabled");

To check the element is checked

cy.get("input").should("be.checked");

To check the element is not checked

cy.get("input").should("not.be.checked");

To check the element is selected

cy.get("select").should("be.selected");

Code Snippets

To login

describe("Login Test", () => {
  it("Login with valid credentials", () => {
    cy.visit("http://localhost:3000/login");
    cy.get('input[name="email"]').type("sfaruk1137@gmail.com");
    cy.get('input[name="password"]').type("Faruk123@");
    cy.get('button[type="submit"]').click();
    cy.url().should("include", "http://localhost:3000/dashboard");
  });
});

To logout

describe("Logout Test", () => {
  it("Logout", () => {
    // remove the cookie
    cy.clearCookie("token");
  });
});

Before and After

describe("My First Test", () => {
  before(() => {
    // runs once before all tests in the block
  });

  after(() => {
    // runs once after all tests in the block
  });

  beforeEach(() => {
    // runs before each test in the block
  });

  afterEach(() => {
    // runs after each test in the block
  });

  it("verify title-positive", () => {
    // lunch the app
    cy.visit("http://localhost:3000/");
    // check the title
    cy.title().should("eq", "Pitchspot");
  });

  it("verify title-negative", () => {
    // lunch the app
    cy.visit("http://localhost:3000/");
    // check the title
    cy.title().should("eq", "Pitchspot1");
  });
});

Should vs Expect

describe("My First Test", () => {
  it("verify title-positive", () => {
    // lunch the app
    cy.visit("http://localhost:3000/");
    // check the title
    cy.title().should("eq", "Pitchspot");
    cy.title().should("include", "Pitch");
    cy.title().should("not.eq", "Pitchspot1");
    cy.title().should("not.include", "Pitch1");
  });

  it("verify title-positive", () => {
    // lunch the app
    cy.visit("http://localhost:3000/");
    // check the title
    expect(cy.title()).to.eq("Pitchspot");
    expect(cy.title()).to.include("Pitch");
    expect(cy.title()).to.not.eq("Pitchspot1");
    expect(cy.title()).to.not.include("Pitch1");
  });
});

Should all Methods

describe("My First Test", () => {
  it("verify title-positive", () => {
    // lunch the app
    cy.visit("http://localhost:3000/");
    // check the title
    cy.title().should("eq", "Pitchspot");
    cy.title().should("include", "Pitch");
    cy.title().should("not.eq", "Pitchspot1");
    cy.title().should("not.include", "Pitch1");
  });
});

Class prasent or not

describe("My First Test", () => {
  it("verify title-positive", () => {
    // lunch the app
    cy.visit("http://localhost:3000/");
    // check the title
    cy.get("button").should("have.class", "btn");
    cy.get("button").should("not.have.class", "btn1");
  });
});

ID prasent or not

describe("My First Test", () => {
  it("verify title-positive", () => {
    // lunch the app
    cy.visit("http://localhost:3000/");
    // check the title
    cy.get("button").should("have.id", "btn");
    cy.get("button").should("not.have.id", "btn1");
  });
});

Attribute prasent or not

describe("My First Test", () => {
  it("verify title-positive", () => {
    // lunch the app
    cy.visit("http://localhost:3000/");
    // check the title
    cy.get("button").should("have.attr", "type", "submit");
    cy.get("button").should("not.have.attr", "type", "button");
  });
});

Value prasent or not

describe("My First Test", () => {
  it("verify title-positive", () => {
    // lunch the app
    cy.visit("http://localhost:3000/");
    // check the title
    cy.get("button").should("have.value", "Submit");
    cy.get("button").should("not.have.value", "Submit1");
  });
});

Text prasent or not

describe("My First Test", () => {
  it("verify title-positive", () => {
    // lunch the app
    cy.visit("http://localhost:3000/");
    // check the title
    cy.get("button").should("have.text", "Submit");
    cy.get("button").should("not.have.text", "Submit1");
  });
});

To check color of the element

describe("My First Test", () => {
  it("verify title-positive", () => {
    // lunch the app
    cy.visit("http://localhost:3000/");
    // check the title
    cy.get("button").should("have.css", "background-color", "rgb(0, 0, 255)");
    cy.get("button").should("not.have.css", "background-color", "rgb(0, 0, 0)");
  });
});

Add Environment Variables

First we have to create a file called cypress.env.json

{
  "baseUrl": "http://localhost:3000"
}

Then we can use it in our test

describe("My First Test", () => {
  it("verify title-positive", () => {
    // lunch the app
    cy.visit(Cypress.env("baseUrl"));
    // check the title
    cy.title().should("eq", "Pitchspot");
  });
});

Mouse and Keyboard Events

describe("My First Test", () => {
  it("verify title-positive", () => {
    // lunch the app
    cy.visit(Cypress.env("baseUrl"));
    // check the title
    cy.title().should("eq", "Pitchspot");
    cy.get("button").click();
    cy.get("button").dblclick();
    cy.get("button").rightclick();
    cy.get("button").trigger("mouseover");
    cy.get("button").trigger("mouseout");
    cy.get("button").trigger("mousedown");
    cy.get("button").trigger("mouseup");
    cy.get("button").trigger("mousemove");
    cy.get("button").trigger("mouseenter");
    cy.get("button").trigger("mouseleave");
    cy.get("button").trigger("keydown");
    cy.get("button").trigger("keyup");
    cy.get("button").trigger("keypress");
    cy.get("button").trigger("focus");
    cy.get("button").trigger("blur");
    cy.get("button").trigger("change");
    cy.get("button").trigger("submit");
    cy.get("button").trigger("scroll");
    cy.get("button").trigger("select");
    cy.get("button").trigger("drag");
    cy.get("button").trigger("dragend");
    cy.get("button").trigger("dragenter");
    cy.get("button").trigger("dragleave");
    cy.get("button").trigger("dragover");
    cy.get("button").trigger("dragstart");
    cy.get("button").trigger("drop");
    cy.get("button").trigger("copy");
    cy.get("button").trigger("cut");
    cy.get("button").trigger("paste");
    cy.get("button").trigger("input");
    cy.get("button").trigger("invalid");
    cy.get("button").trigger("reset");
    cy.get("button").trigger("search");
    cy.get("button").trigger("select");
    cy.get("button").trigger("touchcancel");
    cy.get("button").trigger("touchend");
    cy.get("button").trigger("touchmove");
    cy.get("button").trigger("touchstart");
    cy.get("button").trigger("wheel");
  });
});

Enter key

describe("My First Test", () => {
  it("verify title-positive", () => {
    // lunch the app
    cy.visit(Cypress.env("baseUrl"));
    // check the title
    cy.title().should("eq", "Pitchspot");
    cy.get("input").type("Hello");
    cy.get("input").type("{enter}");
  });
});

Enter Key and type some text

describe("My First Test", () => {
  it("verify title-positive", () => {
    // lunch the app
    cy.visit(Cypress.env("baseUrl"));
    // check the title
    cy.title().should("eq", "Pitchspot");
    cy.get("input").type("Hello");
    cy.get("input").type("{enter}");
    cy.get("input").type("World");
  });
});

Click Multiple Elements under Class or Data-Test

it("Click Multiple Elements under Class or Data-Test", () => {
  cy.get('div[dataTest="publishToServicesChecks"]')
    .find("span")
    .each(($el) => {
      cy.wrap($el).click({
        force: true,
        multiple: true,
      });
    });
});