[Internship] Cypress E2E Web Automation | Interacting with Elements | DropDowns

describe("handle dropdowns", () => {
  it("Dropdown with select", () => {
    cy.visit("https://www.zoho.com/commerce/free-demo.html");
    cy.get("#zcf_address_country")
      .select("Italy")
      .should("have.value", "Italy");
  });
});

it.skip("Dropdown without select", () => {
    cy.visit("https://www.dummyticket.com/dummy-ticket-for-visa-application/");
    cy.get("#select2-billing_country-container").click();
    cy.get(".select2-search__field").type("Italy").type("{enter}");
    cy.get("#select2-billing_country-container").should("have.text", "Italy");
  });

it.skip("Auto suggest dropdown", () => {
    cy.visit("https://www.wikipedia.org/");
    cy.get("#searchInput").type("Delhi");
    cy.get(".suggestion-title").contains("Delhi University").click();
  });
  it("Auto suggest dropdown", () => {
    cy.visit("https://www.google.com/");
    cy.get("#W0wltc").click();
    cy.get("textarea[name='q']").type("cypress automation");
    cy.wait(3000);
    cy.get("div.wM6W7d > span").should("have.length", 12);
    cy.get("div.wM6W7d > span").each(($el, index, $list) => {
      if ($el.text() == "cypress automation tool") {
        cy.wrap($el).click();
      }
    });
    cy.get("input[name='q']").should("have.value", "cypress automation tool");
  });

When each() is called, it passes two arguments to the callback function: the current element being iterated over, and its index. The callback function can take up to two parameters to receive these values.

 

cy.get('.button').each(($button) => {
  cy.wrap($button).click()
})

$button is the parameter that receives the current element being iterated over. It's a reference to the button element that's being clicked in each iteration of the loop.

By wrapping $button with cy.wrap(), Cypress allows us to perform commands on the button element. So in this case, cy.wrap($button).click() clicks each button element in turn.

 

 

 

Sources

https://docs.cypress.io/api/commands/each

each | Cypress Documentation