Working with the select box/dropdowns in CypressIO

In cypress, working with a select box is super easy. We can select a single value or multiple values from the dropdown using the select() command.

We can select using the text value or by using visible text. But cypress majorly selects based on the value. If the value is not present or the given value does not match it selects based on the visible text.

Syntax :

.select(value)
.select(values)
.select(value, options)
.select(values, options)

Selecting based on the value in CypressIO

As highlighted in the below image the word Yahoo is present in value as well as in option without any case mismatch. Now let us understand whether the cypress selects by the value or by the option with the help of an example.

dropdown-css-cypress

Example program :

describe("select box", () => {
  it("should load website with selectbox", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit("https://chercher.tech/practice/dropdowns");
  });
  it("should select an option from the select box", () => {
    cy.get("#first.col-lg-3").select("Yahoo");
  });
});

Output: Even though the word Yahoo is present as a value and as an option but the option[This is a visible text] which has the value as a Yahoo is got in the output.

selected-majorly-value-cypress

In this way, we can confirm that the cypress selects data majorly based upon the value.

Selecting based on options/visible text in CypressIO

Let us understand another example where the cypress selects based on the options.

Example program :

describe("select box", () => {
  it("should load website with selectbox", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit("https://chercher.tech/practice/dropdowns");
  });
  it("should select an option from the select box", () => {
    cy.get("#first.col-lg-3").select("Iphone");
  });
});

Output: Though there is no value like Iphone, the cypress selects based on the visible text or from the options

select-visibletext-option-cypress

Selecting based on the Index value in CypressIO

In cypress, we can not select the data from the drop-down using the index value. If we try to select using the index value, an error occurs like the below image.

selecting-using-index-cypress

Selecting a single option from the dropdown in CypressIO

We are selecting the option Yahoo, form the products dropdown and the dropdown is fetched using the CSS selector #first.col-lg-3.This is an example of selecting using the visible text.

Example program :

describe("select box", () => {
  it("should load website with selectbox", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit("https://chercher.tech/practice/dropdowns");
  });
  it("should select an option from the select box", () => {
    cy.get("#first.col-lg-3").select("Yahoo");
     //selecting using the visible text
    cy.get("#first.col-lg-3").should("have.value", "Yahoo");
    //have.value checks whether the value is present or not.
  });
});

Output :

dropdown-selection

Selecting multiple options from the dropdown

Let us learn, how to select multiple options using the values in a single program.

css-multiple-select

Example program:

describe("select box", () => {
  it("should load website with selectbox", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit("https://chercher.tech/practice/dropdowns");
  });

  it("should select multiple option from the select box", () => {
    cy.get("#second.col-lg-3")
      .select(["Pizza", "Burger"])
      .invoke("val")
      .should("deep.equal", ["pizza", "burger"]);
     //selecting using the values
  });
});

Output :

multiple-selection

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions