Form Input Fields | Selenide Tutorial Series

In this post, we will cover how to work with various input fields such as Text input, Dropdown input, Checkbox input as well as Date input fields in Selenide.

Text Input Fields

With Text input field, you can add in the text using the .val command in Selenide -

$(".support-name input").val("Luffy");
$(".support-email input").val("luffy@onepiece.com");

Dropdown Input Fields

With Dropdown input field, you need to provide the dropdown option you need to select either the text value or the int value -

$(".support-dropdown select").selectOption("Technical Team");
$(".support-dropdown select").selectOption(2);

Checkbox Input Fields

Checkbox input fields are pretty straightforward as you can just the checkbox element you need to interact with and just do a .click on it -

$(".support-checkboxes ul li:nth-child(2) input").click();

Date Input Fields

Date input fields are usually the trickiest to work with as the implementation differs from website to website -

$(".support-date input").click();
$(".flatpickr-day.nextMonthDay").click();

In this example, we are first clicking on the date input field and then selecting the next month day using the className. Typically, you will need to find different ways to select the date you want such as using aria-label or className.

To learn more about working with form input fields in Selenide, check out the video below –

📧 Subscribe to my mailing list to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well -

• Twitter
• LinkedIn

...

I love coffees! And, if this post helped you out and you would like to support my work, you can do that by clicking on the button below and buying me a cup of coffee -