How to Fill and Submit Forms in Cypress

Web forms are widespread in web applications and are used to collect information or data from the user. Forms are typically built with input fields, checkboxes, radio buttons, etc.

Since automation is the best way to check the form filling and submitting actions, this guide explains how to fill and submit forms in Cypress.

Importance of Handling Forms in Cypress

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

By handling forms in Cypress tests, developers and QA teams can:

• Verify User Input Validation: Ensure fields accept correct input types, enforce required formats, and show appropriate error messages.
• Test Submission Flows: Validate that submitting a form triggers the intended API calls, page transitions, or user feedback.
• Automate Real-World Scenarios: Simulate user behavior by filling forms with different data sets, checking edge cases, and ensuring accessibility.
• Improve Confidence in Releases: Catch form-related bugs early in the pipeline, reducing the risk of broken flows in production.

How to handle Forms in Cypress

Cypress provides an easy way to handle the form elements such as input fields, checkboxes, and radio buttons, etc.  Cypress also provides a command to check and uncheck checkboxes and submit the form.

Handling input fields using Cypress

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

Example of user input fields

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

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

Understanding the input fields

Text Input Field

In the above HTML code, we can see the attribute “type=text” for the user name <input> tag, This means that the input field is the plain text input field.

Password input fields

The password HTML code has the attribute type=”password”, This is similar to text input fields but the character will be masked with asterisks (*).

Automate Input fields using Cypress

  it('should type username and password', () => {

    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 code, cy.get() command returns the web elements, by identifying the element 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 area provides the multi-line input.

Example of Textarea

HTML Code

Unlike <input> tag the text area uses <textarea> tag, and provides the multi-line input.

Automate Text area Input Fields with Cypress

it('should type in textarea', () => {

    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 area element in the webpage and then typing the multiline text 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 clear already typed text or default text you can use the .clear() command. This works on input fields which allows typing the text. Example single text input fields or text area input fields

Syntax:

cy.get('<selector>').clear()

Example:

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

Checkboxes in Form controls

Checkboxes are very common in web forms, Checkboxes are defined with <input> tag and the attribute type=”checkbox”.

Example of Checkboxes in Forms

Checkbox HTML Code

Automate Checkboxes in Cypress

Cypress provides multiple options to automate checkboxes. The .check() and .uncheck() commands can be used to check or uncheck the checkbox.

  it('should check the checkbox', () => {

    cy.visit('https://example.cypress.io/commands/actions')

    cy.get('[class="action-multiple-checkboxes"] [type="checkbox"]').check("checkbox1");

  })

The .check() command is used for checking the checkbox, we are sending the attribute value “checkbox1” to .check() command.

Uncheck checkboxes using Cypress

.uncheck() command can be used for unchecking the checkboxes.

  it('should uncheck the checkbox', () => {

    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 check and uncheck.

  it('should checkboxes check using click', () => {

    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 check box is already checked.

Radio button in forms using Cypress

The radio button is generally provided to the user to choose a single option out of many. For example gender radio buttons you can either select male, female or other. The radio button in Cypress works the same way as checkboxes.

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

Radio Button Example

HTML Code

In the above HTML code, you can see the radio buttons are defined with <input> tag and attribute type=”radio”. When the attribute type is the radio, you can only have one radio button checked at any time.

Automate Radio buttons in Forms using Cypress

  it('should checkboxes check using click', () => {

    cy.visit('https://example.cypress.io/commands/actions')

    cy.get('[type="radio"]').check("radio1");

  })

In the above code, we are using the check() command, and the value of the first radio button is passed to the check command i.e “radio1”

Alternative way to check the Radio Button

Like Checkboxes, you can also use the click command to check the radio button

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

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

Drop Down in webforms

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

Example of Dropdown

The HTML code for the dropdown can be viewed below

As you can see in the above HTML code, the drop-down is defined using the <select> tag, and the child elements are defined using the <option>. The Cypress provides the select() command to select the drop-down

Automate Form Dropdown using Cypress

  it('should select oranges from dropdown', () => {

    cy.visit('https://example.cypress.io/commands/actions')

    cy.get('select').eq(0).select("oranges")

  })

In the above code, we are using the .select() command with values to choose the option from the dropdown. The .select() command accepts the “options” as a parameter in our case it is “oranges” and chooses the options accordingly.

Submit Form using Cypress

The Submit button in the Form is a button that of type=submit. Like the type of input based on the type attribute in the <input> tag, the type of button changes based on the type attribute of <button> tag.

Example of Form Submit

HTML Code for Submit

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

Automate the form submit button using Cypress

Submit action can be performed on Cypress using 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 means instead of using the locator of submit button you need to get the locator of <form> tag. In our case, the form locator is  form.action-form.

Cypress code to Automate Submit

  it('should submit the form', () => {

    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 is button[type=”submit”]

Cypress code to Automate the Form Submit using the Click

  it('should submit the form', () => {

    cy.visit('https://example.cypress.io/commands/actions')

    cy.get('button[type="submit"]').click();

  })

Form Reset and Cancel button In Cypress

The Reset button’s main functionality is to Reset the form to the default state. For example, if you have form fields to enter multiple inputs, if you want to clear them all at once, you can press the reset button.

Some forms allow for cancellation of the form, using the cancel button. When you click the Cancel button, the web page generally navigates to the previous screen.

Handling the Reset and Cancel button in Cypress

Handling reset and cancel is similar to handling any other button. So considering this

You need to get the button selector using the .get() command and perform the click action

Syntax:

cy.get('<selector>').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 even small issues, like a broken signup or checkout form, can impact conversions. Testing them across real browsers and devices is important to ensure reliability.

Benefits of testing with BrowserStack Automate:

• Real Device Cloud: Test on 3,500+ real devices and browsers in real user conditions for accurate results.
• Cross-Browser Testing: Ensure forms work consistently across supported environments.
• Parallel Execution: 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 parts of the web application. Web forms may greatly impact the business if it doesn’t work expectedly.

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

• Cypress tests are restricted to execute parallelly on local machines but Cypress tests can be executed parallelly on BrowserStack.
• Browserstack’s parallel testing executes the Cypress tests on multiple devices and provides the instant execution report.

Run Cypress Tests at Scale

Useful Resources for Cypress

Understanding Cypress

• Cross Browser Testing with Cypress : Tutorial
• Run Cypress tests in parallel without Dashboard: Tutorial
• Handling Test Failures in Cypress A Comprehensive Guide
• Cypress Test Runner: Tutorial
• Handling Touch and Mouse events using Cypress
• Cypress Automation Tutorial
• CSS Selectors in Cypress
• Performance Testing with Cypress: A detailed Guide
• Cypress Best Practices for Test Automation
• Test React Native Apps with Cypress
• Cypress E2E Angular Testing: Advanced Tutorial
• Cypress Locators : How to find HTML elements
• Maximizing Web Security with Cypress: A Step-by-Step Guide
• Conditional Testing in Cypress: Tutorial
• Cypress Web Testing Framework: Getting Started
• Cypress Disable Test: How to use Skip and Only in Cypress
• What’s new in Cypress 10? How it will change your current testing requirements

Use Cases

• How to Record Cypress Tests? (Detailed Guide)
• How to run your first Visual Test with Cypress
• How to Fill and Submit Forms in Cypress
• How to Automate Localization Testing using Cypress
• How to run Cypress Tests in Chrome and Edge
• How to use Cypress App Actions?
• How to Run Cypress Tests for your Create-React-App Application
• How to Run Cypress Tests in Parallel
• How to handle Click Events in Cypress
• How to Test React using Cypress
• How to Perform Visual Testing for Components in Cypress
• How to run UI tests in Cypress
• How to test redirect with Cypress
• How to Perform Screenshot Testing in Cypress
• How to write Test Case in Cypress: (with testing example)

Tool Comparisons

• Cypress vs WebdriverIO: Key Differences
• Cypress vs Selenium: Key Differences
• Playwright vs Cypress: A Comparison
• Cypress vs Selenium vs Playwright vs Puppeteer: Core Differences