Horje
How to Handle Dropdown in Cypress?

Cypress is an open-source website testing tool that is used to automate tests for JavaScript web applications. It is designed for end-to-end testing and it can be used for unit tests and integration tests as well. It is fast, reliable, and can run in real-time directly in the browser.

It’s built to work with any front-end framework or website, including React, Angular, and Vue. In this article, we will learn about how to do testing for Dropdown in Cypress.

Table of Content

Before, we note that Cypress uses a CSS selector to identify the element. You can target any element just like selecting an element for styling.

We use the .select() function in Dropdown testing to select the options.

Syntax:

//Select
cy.get('css selector').select( Value , Options );

In this,

  • Value: It can be a String or an Array, To select a single option or multiple options.
  • Options (optional): It is an object to change the default behavior of .select().

Commands in Cypress

To select a specific elements

cy.get('selector');

To select a option by it’s value, text or index.

//Select by value
cy.get('#selector').select('gfg');

//Select by Text
cy.get('#selector').select('Geeks For Geeks');

//Select by Indnex
cy.get('#selector').select(1);

To verify the state value of dropdown

cy.get('selector').should('have.value', 'gfg');

To select multiple options by value, text and index.

//Select by value
cy.get('selector').select(['value1', 'value2']);

//Select by text
cy.get('selector').select(['text1', 'text2']);

//Select by Index
cy.get('selector').select(['1', '2']);

Installation

Before we begin make sure node.js in installed in your system.

Open the Windows Command Prompt, Powershell or a similar command line tool, and type

“node -v”

Step 1: Create a Project Folder and move to it by using following command.

mkdir cypress cd cypress

Step 2: Initialize a project and Install Cypress.

npm init -y npm install cypress –save-dev

Step 3: After Creating a Project, Run this command to start cypress.

npx cypress open

Step 4: Testing type, Configuration and creating a spec.

  • Choose a E2E Testing or Component Testing, then after quick configuration choose browser.
  • After that create a new spec then click on your spec name to open your spec in any IDE.

Step 5: Testing HTML File.

  • Create a HTML File and open it with any live server extension.
  • copy that live server file serve link, for later use.

Example of Handling Dropdown in Cypress

The below example demonstrate the testing with Dropdown.

HTML 
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dropdown Example</title>
</head>
<body>
  <h1>Dropdown Example</h1>

  <!-- Multi-Select Dropdown -->
  <label>Multi-Select Dropdown:</label>
  <select id="languagesSelect" multiple>
    <option value="javascript">JavaScript</option>
    <option value="python">Python</option>
    <option value="java">Java</option>
    <option value="csharp">C#</option>
    <option value="ruby">Ruby</option>
    <option value="go">Go</option>
  </select>
  
</body>
</html>
JavaScript 
//gfg.cy.js

describe('Multiple Dropdown Example', () => {
    before(() => {
        // Load the HTML file before running tests
        cy.visit('http://127.0.0.1:5500/index.html');
    });

    it('Select Multiple Dropdown options', () => {
        // Select options
        cy.get('#languagesSelect').select(['javascript','python', 'java']);
    });

});

Output

cypress dropdown output

Cypress Dropdown Output

Conclusion

In conclusion, Cypress is a end-to-end automated testing tool that enables efficient and reliable testing of web applications. It includes interactions with dropdown elements. By following this guide, you can create and validate single-select and multi-select dropdowns Cypress commands are easy-to-write that make it an ideal choice for automating the testing of dropdowns and other web components.

Frequently Asked Questions on Handling Dropdown in Cypress

How to handle the dropdown in Cypress?

To handle a dropdown in Cypress in one line, you can use the .select() function.

What is Cypress?

Cypress is a end-to-end testing framework that allows you to write tests script that interact with the application in a way that simulates user behavior.

How do I select a drop down list?

To select a dropdown list in Cypress, you can use the .select() command, which allows you to select an option by its value, text, or index. 




Reffered: https://www.geeksforgeeks.org

Software Testing

Related
Introduction to TestRail Review Introduction to TestRail Review
Agile Testing vs Traditional Testing Agile Testing vs Traditional Testing
What Comes After Beta Testing? What Comes After Beta Testing?
What is Regression Testing in Agile? What is Regression Testing in Agile?
Baseline Testing Baseline Testing

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 15



 

Horje