Post
Ask Question

Handling Attributes Dropdowns in Cypress

Introduction

In this article, we will understand how to handle attributes, the text of elements, and dropdowns in the Cypress Automation Tool.

Prerequisite

While working in Test Automation, we will come across scenarios to get the value of attributes and text of elements from the webpage. We may need to use these values to apply assertions in your test.

Text of Element

The text of the element is the text which is found in between any HTML tag.

Example

<div id='test> tesing</div>

To get the text of an element using Cypress, you can use the invoke() command combined with the text() method

invoke function is a jquery function that allows you to interact with elements on a webpage or perform actions not directly supported by Cypress's built-in commands.

The invoke function can be used to call methods or access properties of DOM elements.

 then the () function is used to access the text value and perform further actions

Cypress code with an example

cy.get('.test')
  .invoke('text')
  .then(text => {
    // print the text
    console.log(text);
  });

getattribute of element

Attributes of web elements can be extracted using the same invoke function. Here we need to pass some additional arguments.

invoke('attr', 'attribute-name') function is used to invoke the attr() function on the selected element, passing the attribute name as the argument. This retrieves the value of the specified attribute.

.then() function is used to access the attribute value and perform further actions

Example

cy.get('.testinput')
  .invoke('attr', 'placeholder')
  .then(attributeValue => {
    // print the attribute value
    console.log(attributeValue);
  });

Get the CSS property of the element

To get the css property of the web element, we need to use  the invoke() command with the 'css' property argument.

invoke('css', 'property-name') function invokes the css() method on the selected element, passing the CSS property name as the argument. This retrieves the computed value of the specified CSS property.

Example

cy.get('.testinput').invoke('css', 'font-style').then(cssValue => {
  // print the css value
  console.log(cssValue);
});

Handling Dropdowns in Cypress

There are different types of dropdowns

Dropdown created with a select tag

If you encounter a dropdown that is developed with a select tag, then use,

select the command and pass the option value to select the dropdown value

cy.get('dropdown locator').select('option-value');

if you want to select the option with index, then use the index,

<select>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>
cy.get('select').select(0)

Select with option value.

<select>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>
cy.get('select').select('456')

If it's a autocomplete dropdown.

 We need to use the type() command to enter text and then use the contains() command to select the option

cy.get('element locator').type('search a text');
cy.contains('option text').click();

Example

 it.only('method three', () => {
         cy.visit("https://rahulshettyacademy.com/AutomationPractice/");
         cy.get('#dropdown-class-example').select('Option1');
         cy.get('#dropdown-class-example').select('option3');
         cy.get('#dropdown-class-example').select(0);
     
        
    });

Apply assertion to the selected value

In Cypress, the should method is used to apply assertions.

The should() command can be chained to a Cypress command to assert specific conditions.

Syntax

cy.get('locator').select('selected option').should('condition', 'expected value')

Here in the below example, we select the option apples and verify that the apple dropdown has the option value 456 in it.

cy.get('select').select('apples').should('have.value', '456')

Summary

I hope this article will be helpful in handling attributes, text, and CSS properties in a webpage using Cypress Test Automation Project. In Addition to that, I have covered how to handle dropdowns in Cypress as well.

Thanks, Happy learning.............................


Similar Articles