How to Fill and Submit Forms in Cypress

Web forms are far-flung in web application and are used to collect info or data from the exploiter. Forms are typically built with stimulant fields, checkboxes, radio push, etc.

Since automation is the best way to check the signifier filling and posit action, this guidebook explicate how to fill and subject forms in Cypress.

Importance of Handling Forms in Cypress

is a JavaScript-based testing framework that proffer an intuitive way to interact with and validate form elements through commands like various commands.

By care forms in Cypress test, developers and QA team can:

• Verify User Input Validation: Ensure field accept right input types, enforce required formats, and show appropriate error messages.
• Test Submission Flows: Validate that submit a form activate the intended API calls, page transitions, or user feedback.
• Automate Real-World Scenarios: Simulate user behavior by occupy forms with different information sets, checking edge lawsuit, and ensuring accessibility.
• Improve Confidence in Releases: Catch form-related bugs betimes in the pipeline, reducing the hazard of humbled flow in product.

How to handle Forms in Cypress

Cypress provides an leisurely way to handle the form constituent such as stimulus fields, checkboxes, and radio buttons, etc. Cypress also provides a command to check and uncheck checkboxes and subject the form.

Handling input fields using Cypress

The input fields are standard in web pattern, as it is effortless to capture the user comment. Input fields are generally text-based.

Example of user input battlefield

As you can see in the above model, usernames and passwords are input text box fields. The user name is a plain text box field, and the password is a disguised schoolbook box battlefield.

When you inspect the above field the HTML code looks as shown below.

Understanding the stimulation fields

Text Input Field

In the above HTML code, we can see the attribute& # 8220; type=text & # 8221;for the user name & lt; input & gt; tag, This means that the input battlefield is the plain text input battleground.

Password input battleground

The password has the propertytype= & # 8221; password & # 8221;, This is similar to text input fields but the character will be masked with star (*).

Automate Input fields using Cypress

it ('should type username and password ', () = & gt; {cy.visit ('https: //www.browserstack.com/users/sign_in ') cy.get (`` # user_email_login '') .type (`` someone @ example.com '') cy.get (`` # user_password '') .type (`` somepassword '')})

In the above codification,cy.get()command returns the web elements, by identifying the component uniquely on the webpage. The type () command performs the type action on the element.

Text area Input field

The text input fields provide the single-line input, similarly, the text region supply the multi-line stimulation.

Example of Textarea

HTML Code

Unlike & lt; input & gt; tag the text area uses& lt; textarea & gt;tag, and provides the multi-line input.

Automate Text country Input Fields with Cypress

it ('should type in textarea ', () = & gt; {cy.visit ('https: //mdbootstrap.com/docs/standard/extended/textarea/ ') cy.get (`` # textAreaExample1 '') .type (`` This is firstline\n This is the second line '')})

In the above code, using the cy.get () we are locating the text region element in the webpage and then typing the multiline schoolbook inside the text area using the .type () command.

Clear the form fields in Cypress

Cypress provides a.clear()command to clear the input fields, which means if you wish to unclutter already typed text or default text you can use the .clear () command. This works on input fields which allow typewrite the text. Example single schoolbook remark fields or text area input fields

Syntax:

cy.get (' & lt; selector & gt; ') .clear ()

Example:

cy.get (' # textarea1 '') .clear ()

Checkboxes in Form controls

Checkboxes are very common in web sort, Checkboxes are defined with& lt; remark & gt;tag and the attributetype= & # 8221; checkbox & # 8221;.

Example of Checkboxes in Forms

Checkbox HTML Code

Automate Checkboxes in Cypress

Cypress provides multiple selection to automatise checkboxes. The .check () and .uncheck () commands can be used to ascertain or uncheck the checkbox.

it ('should check the checkbox ', () = & gt; {cy.visit ('https: //example.cypress.io/commands/actions ') cy.get (' [class= '' action-multiple-checkboxes ''] [type= '' checkbox ''] ') .check (`` checkbox1 '');})

The .check () command is used for ascertain the checkbox, we are sending the dimension value& # 8220; checkbox1 & # 8221; to .check() command.

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

Uncheck checkboxes using Cypress

.uncheck () bid can be used for unchecking the checkboxes. it ('should uncheck the checkbox ', () = & gt; {cy.visit ('https: //example.cypress.io/commands/actions ') cy.get (' [type= '' checkbox ''] ') .uncheck (`` checkbox1 '');})})

An alternative way to check and uncheck checkboxes

As you can see when you click on the checkboxes it toggles between check and uncheck, you can simply send the click () event to perform the cheque and uncheck.

it ('should checkboxes insure using click ', () = & gt; {cy.visit ('https: //example.cypress.io/commands/actions ') cy.get (' [class= '' action-multiple-checkboxes ''] [type= '' checkbox ''] [value= '' checkbox1 '' ') .click ();})

In the same way, you can use the .click () command to uncheck if the assay box is already checked.

Radio push in forms using Cypress

The radio button is generally provided to the user to choose a single choice out of many. For example sexuality radio button you can either select male, female or early. The tuner button in Cypress act the same way as checkboxes.

The .check () and uncheck () dictation can be used for radio buttons as well.

Radio Button Example

HTML Code

In the above HTML codification, you can see the radiocommunication button are delimit with & lt; input & gt; tag and propertytype= & # 8221; radio & # 8221;.When the attribute eccentric is the radio, you can only have one radio button ensure at any time.

Automate Radio buttons in Forms using Cypress

it ('should checkboxes check using click ', () = & gt; {cy.visit ('https: //example.cypress.io/commands/actions ') cy.get (' [type= '' radio ''] ') .check (`` radio1 '');})

In the above code, we are using the cheque () bidding, and the value of the first wireless button is passed to the check command i.e & # 8220; radio1 & # 8221;

Alternative way to check the Radio Button

Like Checkboxes, you can also use the click dictation to ensure the radio button

For illustration, the above code can be rewrite to use the .click () command as below

cy.get (' [type= '' wireless ''] [value= '' radio1 ''] ') .click ();

Drop Down in webforms

The Dropdown helps to take the option from the available list, for example, I have a yield drop-down with options like apples, oranges, and bananas. From this I can choose the fruit I like use the drop-down.

Example of Dropdown

The HTML code for the dropdown can be catch below

As you can see in the above HTML code, the drop-down is defined using the& lt; quality & gt;tag, and the child elements are defined habituate the& lt; option & gt;.The Cypress supply the select () dictation to select the drop-down

Automate Form Dropdown habituate Cypress

it ('should select oranges from dropdown ', () = & gt; {cy.visit ('https: //example.cypress.io/commands/actions ') cy.get ('select ') .eq (0) .select (`` oranges '')})

In the above code, we are using the.select() dictation with values to choose the option from the dropdown. The .select () bidding accept the & # 8220; options & # 8221; as a argument in our case it is “ oranges ” and choose the options accordingly.

Submit Form using Cypress

The Submit push in the Form is a button that of type=submit. Like the eccentric of stimulus base on the type attribute in the & lt; input & gt; tag, the case of button changes based on the type attribute of & lt; button & gt; tag.

Example of Form Submit

HTML Code for Submit

As you can see in the above image, we hold one text field and a submit push. When we visit the Submit button HTML code looks as shown below

Automate the form submit button using Cypress

Submit action can be performed on Cypress habituate two ways

• .submit () command
• .click () command

Method 1: Using .submit () command

Using this method you need to perform the submit action for the form. That entail instead of using the locater of submit button you need to get the locator of & lt; form & gt; tag. In our case, the form locater isform.action-form.

Cypress code to Automate Submit

it ('should state the form ', () = & gt; {cy.visit ('https: //example.cypress.io/commands/actions ') cy.get ('form.action-form ') .submit ();})

Method 2: Using .click () command

In this method, you need to perform a click action using the Submit button locator. In our case it isbutton [type= & # 8221; submit & # 8221;]

Cypress codification to Automate the Form Submit utilise the Click

it ('should submit the descriptor ', () = & gt; {cy.visit ('https: //example.cypress.io/commands/actions ') cy.get ('button [type= '' submit ''] ') .click ();})

Form Reset and Cancel push In Cypress

The Reset button & # 8217; s primary functionality is to Reset the descriptor to the default state. For example, if you have form battlefield to enter multiple inputs, if you want to clear them all at erst, you can press the reset button.

Some forms permit for cancellation of the form, expend the cancel push. When you click the Cancel push, the web page generally navigates to the premature blind.

Handling the Reset and Cancel button in Cypress

Handling reset and cancel is similar to handling any other push. So regard this

You want to get the button picker using the .get () command and perform the click action

Syntax:

cy.get (' & lt; selector & gt; ') .click ()

Example:

cy.get (' # reset ') .click () cy.get (' # cancel ') .click ()

Test on Real Device Cloud with BrowserStack Automate

Web forms are essential to any web application, and yet small topic, like a broken signup or checkout descriptor, can impact conversions. Testing them across existent browsers and devices is important to secure reliability.

Benefits of testing with BrowserStack Automate:

• : Test on 3,500+ existent devices and browsers in for accurate answer.
• : Ensure forms act consistently across indorse environments.
• : Run Cypress tests simultaneously to accelerate feedback loops.
• Detailed Reports: Access real-time results with clear insights for faster debugging.
• Stable Infrastructure: Avoid local test flakiness with a dependable cloud grid.

Talk to an Expert

Conclusion

Though web forms are fundamental functionality, it is one of the most critical part of the web application. Web forms may greatly impact the line if it doesn & # 8217; t work expectedly.

For example, if you have a web form to ratify up the user, and if it is not working. Webforms require to be tested thoroughly on all supported browsers and platforms. Browserstack provides existent devices on the cloud and helps to get accurate results that you can swear on.

• Cypress tryout are restricted to fulfil parallelly on local machine but Cypress test can be execute parallelly on BrowserStack.
• Browserstack ’ s parallel prove executes the Cypress tests on multiple device and provides the.

Useful Resources for Cypress

Understanding Cypress

Use Cases

Tool Comparisons

Related Guides