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

7 Principles of Software Testing

7 Principles of Software Testing with Examples

Software testing plays a crucial role in the software development life cycle as it helps ensure the quality, reliability, and performance of the final product. Software testing is not just about finding defects; it also provides valuable insights into the overall quality of the software. By conducting effective software testing, it shows how well the application behaves in different scenarios and whether it meets user expectations.

Read More »
Differences Between CI/CD and DevOps

Key Differences Between CI/CD and DevOps

Software development is far from a simple journey that involves merely executing code and launching applications. It often presents challenges, as it’s rare to get everything right from the start. Each time you implement new or frequent code changes, you inadvertently introduce potential issues that can be time-consuming to resolve. This complexity necessitates a structured approach to ensure smooth production.

Read More »