Cypress

prepared by: Jed Dayo

https://www.cypress.io/

Test Automation Tool

Pure JavaScript-based front end testing tool
Designed for the modern web
Operates directly in the browser

Selenium (Alternative)

Selenium is an open source umbrella project for a range of tools and libraries aimed at supporting browser automation.

public static void main(String[] args) {  
        
    // declaration and instantiation of objects/variables  
    System.setProperty("webdriver.chrome.driver", "D:\\ChromeDriver\\chromedriver.exe");  
    WebDriver driver=new ChromeDriver();  
      
// Launch website  
    driver.navigate().to("http://www.google.com/");  
          
    // Click on the search text box and send value  
    driver.findElement(By.id("lst-ib")).sendKeys("javatpoint tutorials");  
          
    // Click on the search button  
    driver.findElement(By.name("btnK")).click();  
      
}

Challenges When Using Selenium

Slower compared to other tools

Complex learning curve and hard to read

https://www.browserstack.com/guide/cypress-vs-selenium

Performance Comparison

benchmark from automatenow.io

https://docs.cypress.io/guides/references/trade-offs

Folder Structure

Common Cy Functions

Cypress Selectors

Cypress Assertions

Cypress Commands

How To Start Testing

Custom Commands

What Can I Do, While API's Are not Ready

Fixtures

consistent sets of data input or response
usually used for Visual Regression Tests
similar to data driven framework

Example Code

API Testing

cy.request

Intercept

returning a mock response (fixtures)
intercepting an API request and testing the response

Example Code - Intercept and Mock Response

Example Code: Intercept and spy request and response

Page Object vs App Action Pattern

https://applitools.com/blog/page-objects-app-actions-cypress/

https://executeautomation.medium.com/selenium-page-object-model-vs-cypress-app-action-7e0739eeb672

Sample Page Object in Cypress

Cypress.Commands.add("login", (username, password, { rememberUser = false } = {}) => {
  const signinPath = "/signin";

  cy.intercept("POST", "/login").as("loginUser");
  cy.intercept("GET", "checkAuth").as("getUserProfile");

  cy.location("pathname", { log: false }).then((currentPath) => {
    if (currentPath !== signinPath) {
      cy.visit(signinPath);
    }
  });

  log.snapshot("before");

  cy.getBySel("signin-username").type(username);
  cy.getBySel("signin-password").type(password);

  if (rememberUser) {
    cy.getBySel("signin-remember-me").find("input").check();
  }

  cy.getBySel("signin-submit").click();
  cy.wait("@loginUser").then((loginUser: any) => {
    log.snapshot("after");
    log.end();
  });
});

describe('login user',()=>{
 it("should error for an invalid user", function () {
    cy.login("invalidUserName", "invalidPa$$word");

    cy.getBySel("signin-error")
      .should("be.visible")
      .and("have.text", "Username or password is invalid");
    cy.visualSnapshot("Sign In, Invalid Username and Password, Username or Password is Invalid");
  });

  it("should error for an invalid password for existing user", function () {
    cy.database("find", "users").then((user: User) => {
      cy.login(user.username, "INVALID");
    });

    cy.getBySel("signin-error")
      .should("be.visible")
      .and("have.text", "Username or password is invalid");
    cy.visualSnapshot("Sign In, Invalid Username, Username or Password is Invalid");
  });
})

Sample App Action Pattern in Cypress

Cypress with Cucumber

how to setup for cucumber (click here)

example usage of cypress and cucumber

When Looks and Responsiveness Is Important To You

Visual Regression Tests

Integration with CI/CD

Speed Up End to End Test

Parallel Tests in Cypress

https://docs.cypress.io/guides/guides/parallelization