SDET Unicorns

Working with Input Fields in Cypress

Table of Content

In this tutorial, we will learn how to work with different types of form input fields in Cypress such as Text Inputs, Dropdown menu, Checkboxes, Date Picker, and Text Area.

Text Input

name input field

To type something into a text input element, you simply need to use the type command. This is how the code will look like — 

cy.get("#name").type("Automation Bro");

The type command can also take special characters such as {enter} {backspace} etc… You can find the entire list here.

Text Area would work similarly as well using the type command.


Dropdown Menu

1*aOh 13cE6AP0FydmB0VRfA
Dropdown menu

With the dropdown menu, you have to select a particular option from the list. For example, to select the second option from the list above, we’ll do this –

cy.get("#dropdown").select("Technical Team");

With select you can either select the dropdown option valueor the text itself to select an item.


Checkboxes

1*9TPGH2z 5UOc2bJoOm4woQ
Checkbox

Checkboxes are similar to dropdown where you are dealing with multiple options but unlike dropdown here you can pick multiple options as well. Let’s take a look at the sample code — 

cy.get("#checkboxlist input").check([
   "Integration Issue",
   "Software Issue",
]);

You can use the check command and pass in an array with all the options you need to check. Similarly, you can also do the reverse to uncheck options as well.


Date Picker

Date Picker

Date Picker would vary based on how it’s implemented by the developers, in the above example, you first need to click on the empty input field and then click on the date you want to select.

cy.get("#dateinput").click();
cy.get(".dayContainer span:nth-child(15)").click();

In the code above, I am selecting the 15th option from all the dates options, this is done to keep the selection dynamic regardless of what month it is. There are many other ways of automating this as well based on how the implementation is done.


Check out the video below to learn more about how to work with input fields in Cypress — 

Thanks for reading!

My Resources

Thrive Suite: The all-in-one WordPress theme I used to create my blog.
Jasper AI: My favorite AI writing tool.
Surfer SEO:  A tool to help you rank your content on the first page of Google.

Write Content Faster

5/5

Write blog posts that rank for affiliate terms!

Join our mailing list

Unlock the Secrets to Becoming a SDET Pro in the Industry!

Stay ahead of the curve! Join our mailing list for exclusive insights, tips, and the latest industry updates delivered straight to your inbox

Table of Content

Related Post

Functional vs Regression Testing

Functional Testing vs Regression Testing: Main Differences

Testing has increasingly become a requirement in the software development lifecycle in recent years. The realization that development is no longer a focal point for stakeholders but saving costs by catching defects early in their application makes it necessary to learn different testing types.

Read More »