To fill and submit forms in Cypress, here are the detailed steps: You’ll typically use Cypress commands like .type to input text into fields, .select for dropdowns, and .check or .uncheck for checkboxes and radio buttons. After filling the relevant fields, you’ll use .click on the submit button to send the form data. For example, if you have an input field with the ID username, you’d type cy.get'#username'.type'JohnDoe'. For a submit button with the class submit-btn, you’d click it with cy.get'.submit-btn'.click. It’s a straightforward process, focusing on interacting with DOM elements just like a real user would.

👉 Skip the hassle and get the ready to use 100% working script (Link in the comments section of the YouTube Video) (Latest test 31/05/2025)

Check more on: How to Bypass Cloudflare Turnstile & Cloudflare WAF – Reddit, How to Bypass Cloudflare Turnstile, Cloudflare WAF & reCAPTCHA v3 – Medium, How to Bypass Cloudflare Turnstile, WAF & reCAPTCHA v3 – LinkedIn Article

Table of Contents

Setting Up Your Cypress Test Environment for Forms

Getting started with form testing in Cypress is less about voodoo and more about solid preparation.

Think of it like prepping your gear before a big trek – you wouldn’t just wing it.

First off, ensure you have Cypress installed in your project.

If not, npm install cypress --save-dev or yarn add cypress --dev will get you squared away.

Once installed, fire up Cypress with npx cypress open, and let it generate the example files if it’s your first time.

Next, you’ll want to structure your test files logically. For form submissions, it often makes sense to have a separate spec file, say forms.cy.js, under your cypress/e2e directory. Inside this file, you’ll write your test suites describe and individual tests it. The key here is to make sure Cypress can actually see and interact with the form you’re targeting. This means ensuring your application under test is running and accessible at the URL you specify in your cy.visit command.

Finally, think about data. Are you submitting static data, or do you need dynamic inputs? For static data, hardcoding values in your .type commands is fine. For dynamic or more complex scenarios, consider using fixtures cy.fixture to load data from JSON files, which keeps your tests clean and reusable. According to a 2023 survey by Testim, about 65% of test automation engineers leverage data-driven testing for forms, significantly increasing test coverage and maintainability. This practice ensures your tests are robust and can handle various input scenarios, not just the happy path.

Identifying Form Elements and Locators

This is where the rubber meets the road. Before you can fill a form, you’ve got to find the elements on the page. Cypress, much like a seasoned detective, needs clues – and those clues are called locators. The most reliable locators are often unique IDs. If an input field has an id="email", you can target it directly with cy.get'#email'. It’s the gold standard because IDs are supposed to be unique on a page, making your selectors resilient to changes in the page structure.

When IDs aren’t available, or you’re dealing with multiple similar elements, CSS selectors are your next best friend. You can target elements by their class cy.get'.input-field', by their tag name cy.get'input', or by their attributes cy.get''. For instance, if you have a form where all input fields share a common class like form-control, you could use cy.get'.form-control' and then chain commands like .eq0 to target the first one, or .first or .last. A recent study from BrowserStack indicated that over 70% of Cypress users primarily rely on CSS selectors due to their flexibility and readability.

Sometimes, elements might be dynamically generated, or their attributes change. In such cases, text content can be a fallback, though less ideal due to its volatility. For example, cy.contains'button', 'Submit' would find a submit button by its text. However, be cautious with this approach. Imagine if the button text changed from “Submit” to “Send Now” – your test would break. The rule of thumb here: prioritize IDs, then robust CSS selectors, and use text only as a last resort for truly unique elements. Inspecting the DOM in your browser’s developer tools is your secret weapon here. it’s where you’ll uncover the IDs, classes, and attributes you need.

Filling Text Input Fields with `.type`

Alright, let’s get down to business: typing into those text fields.

The cy.type command is your bread and butter here.

It simulates a user typing into an input or textarea element.

It’s incredibly versatile and handles various scenarios, from simple text entry to complex key presses.

The basic syntax is straightforward: cy.get'your-selector'.type'your-text'. For example, if you have an email input field with the ID userEmail, you’d write cy.get'#userEmail'.type'[email protected]'. What’s neat is that type also clears the field by default before typing, which is usually what you want for a fresh test run. If you need to append text instead of overwriting, you can pass { append: true } as an option.

Beyond simple text, type can handle special characters and control keys. Want to simulate hitting Enter after typing? cy.get'#searchBox'.type'Cypress testing{enter}'. Need to clear a field without typing? You can use cy.get'#oldInput'.clear. This granular control is what makes Cypress so powerful for form automation. Imagine a login form: you’d typically have cy.get'#username'.type'myUser' followed by cy.get'#password'.type'mySecureP@ssword'. A report by Gartner found that automated form filling, particularly for registration and login, can reduce manual testing time by up to 40% in typical web applications. This efficiency allows teams to focus on more complex, exploratory testing.

Handling Checkboxes, Radio Buttons, and Dropdowns

Forms aren’t just about typing. they often involve choosing options.

Cypress provides specific commands for these interactive elements, making them a breeze to automate.

Checkboxes with `.check` and `.uncheck`

For checkboxes, cy.check and cy.uncheck are your go-to commands. They simulate clicking a checkbox.

If you have a checkbox with name="subscribe", you can check it with cy.get''.check. If you need to uncheck it, simply use cy.get''.uncheck. These commands also handle checking multiple checkboxes if they share the same selector by default.

For instance, cy.get''.check can check specific values if your checkboxes have value attributes.

This is incredibly efficient, especially when dealing with lists of preferences or terms and conditions.

Radio Buttons with `.check`

Radio buttons are similar to checkboxes but enforce a single selection. You still use cy.check for them.

For example, if you have radio buttons for gender with values male, female, and other, selecting ‘female’ would be cy.get''.check'female'. Cypress intelligently handles the radio button group, ensuring only the selected one is checked.

This command understands the value attribute of the radio input.

It’s crucial for forms that require mutually exclusive choices, like payment methods or service tiers.

Dropdowns Select Elements with `.select`

Dropdowns, or <select> elements, use the cy.select command.

You can select an option by its text content, its value attribute, or its index.

By Text: cy.get'#country'.select'United States'
By Value: cy.get'#country'.select'US' if the option has value="US"
By Index: cy.get'#country'.select2 selects the third option, as indexes are zero-based

The select command also supports selecting multiple options if the <select> element has the multiple attribute. For instance, cy.get'#colors'.select. This flexibility makes handling diverse dropdown scenarios very straightforward. A 2022 report on web accessibility highlighted that incorrect handling of dropdowns and checkboxes is a common barrier for automated testing tools without dedicated commands, underscoring the value of Cypress’s specialized approach.

Submitting Forms and Assertions

Once you’ve filled out your form, the next crucial step is to submit it and then verify that the submission was successful.

This is where clicking the submit button and making assertions come into play.

Submitting the Form with `.click`

The most common way to submit a form in Cypress is to click the submit button.

You’ll use cy.get'your-submit-button-selector'.click. This selector could be an ID, a class, or even the type attribute:

cy.get'#submitButton'.click
cy.get'.form-submit'.click
cy.get'button'.click

Cypress automatically waits for the element to be actionable visible and not disabled before attempting the click, which is a major time-saver compared to manual waits.

After the click, Cypress will then wait for the page to navigate or for new elements to appear, such as a success message or a redirection to a thank-you page.

Making Assertions After Submission

Simply clicking submit isn’t enough.

You need to verify that the submission had the intended effect. This is where assertions shine.

Cypress leverages Chai and jQuery assertions, giving you a powerful toolkit.

Common assertions after form submission include:

URL Assertion: Verify that the page has redirected to a specific URL.
cy.url.should'include', '/success-page'
Element Visibility/Text Assertion: Check for a success message on the page.

cy.get'.success-message'.should'be.visible'.and'contain', 'Form submitted successfully!'
Absence Assertion: Ensure error messages are not present.
cy.get'.error-message'.should'not.exist'
API Interception Advanced: For single-page applications SPAs that use AJAX for form submission, you might want to intercept the API call to verify the request payload and the response. This is a powerful technique using cy.intercept.
```
cy.intercept'POST', '/api/submit-form'.as'submitForm'
cy.get'button'.click


cy.wait'@submitForm'.its'response.statusCode'.should'eq', 200
```
This method allows you to assert on the network request itself, which is crucial for robust SPA testing. According to a recent State of Frontend report, 80% of modern web applications use API calls for form submissions, making API interception a critical skill for automated testing.

By combining click with robust assertions, you ensure not just that the form was submitted, but that the submission resulted in the correct application state or response.

Handling Dynamic Forms and Conditional Logic

Not all forms are static beasts.

Many modern web applications feature dynamic forms where fields appear or disappear based on previous selections, or where validation rules change on the fly.

Cypress is well-equipped to handle these complexities, but it requires a slightly more nuanced approach.

Waiting for Elements to Appear

When fields are dynamically loaded or conditional, you can’t just cy.get them immediately.

Cypress commands automatically retry until the element is found or a timeout occurs, which is helpful.

However, explicitly waiting for an element’s visibility can make your tests more robust and readable, especially if the dynamic loading takes a moment.

Waiting for an element to be visible: cy.get'#conditionalField'.should'be.visible'
Clicking a radio button that reveals new fields:
cy.get”.check’dynamic’
cy.get’#newlyAppearedInput’.should’be.visible’.type’Dynamic data’
This ensures Cypress doesn’t try to type into #newlyAppearedInput before it’s actually rendered on the DOM.

Chaining Commands with `then`

For more complex conditional logic or when the outcome of one action dictates the next, the .then command is invaluable.

It allows you to perform an action and then, based on the result, execute subsequent Cypress commands or even regular JavaScript.



cy.get'input'.check'premium'.then => {


 // Now that premium is selected, a new discount field might appear
 cy.get'#discountCode'.should'be.visible'.type'PREMIUM20'
}

This pattern is particularly useful when you need to inspect an element’s state before proceeding. For example, checking if a field is disabled before attempting to type:
cy.get’#submitButton’.should’not.be.disabled’.click
According to data from Applitools, over 45% of critical bugs in web applications are related to dynamic content and conditional rendering, underscoring the importance of testing these scenarios thoroughly with tools like Cypress. Don’t just test the happy path. explore the branches of your form logic.

Best Practices for Robust Form Testing in Cypress

You’ve got the tools. now let’s talk about the craftsmanship.

Building robust, maintainable Cypress tests for forms isn’t just about knowing the commands.

It’s about applying best practices that save you headaches down the line.

Prioritize Data Attributes for Selectors

While IDs and CSS classes are often used, the gold standard for Cypress selectors, especially in larger applications, is data-cy or data-test, data-qa, etc. attributes. Instead of cy.get'#username' or cy.get'.form-control', you’d use cy.get''. Why?

Stability: These attributes are explicitly for testing and are less likely to change due to styling or refactoring, unlike IDs and classes which might be altered by developers or designers.
Readability: They clearly indicate the purpose of an element from a testing perspective.
Isolation: They help isolate your tests from implementation details.

This practice is heavily advocated by the Cypress team themselves. In fact, a recent poll among Cypress users showed that 60% who adopted data-cy attributes reported a significant reduction in selector-related test failures.

Use Custom Commands for Reusable Form Logic

If you find yourself repeating the same sequence of form filling steps across multiple tests e.g., logging in, submitting a common contact form, it’s a prime candidate for a custom command.

Custom commands encapsulate common workflows, making your tests cleaner, more readable, and easier to maintain.

You define custom commands in cypress/support/commands.js:
// cypress/support/commands.js

Cypress.Commands.add’login’, username, password => {
cy.visit’/login’
cy.get’#username’.typeusername
cy.get’#password’.typepassword
cy.get’button’.click
cy.url.should’include’, ‘/dashboard’
Then, in your tests:
// cypress/e2e/my-test.cy.js
describe’Dashboard Access’, => {

it’should allow a logged-in user to view the dashboard’, => {
cy.login’testUser’, ‘securePassword123’
// Continue with dashboard specific assertions
}

This approach drastically reduces duplication and makes your tests feel more like a story.

Test Edge Cases and Validation

Don’t just test the “happy path” where everything works perfectly.

Robust form testing involves exploring edge cases and validation scenarios:

Invalid Inputs: Test what happens when users enter incorrect data e.g., invalid email format, too short password, non-numeric age.
Required Fields: Ensure that submitting a form with empty required fields triggers appropriate error messages.
Boundary Conditions: For numeric inputs, test the minimum and maximum allowed values.
Length Limits: For text inputs, test at the minimum and maximum character limits.
Error Message Assertions: Crucially, assert that the correct error messages are displayed and that the form does not submit successfully with invalid data.
cy.get'#emailError'.should'be.visible'.and'contain', 'Please enter a valid email address.'

A comprehensive quality assurance report from Capgemini found that tests covering negative scenarios and edge cases uncover 2.5 times more critical defects than positive-only tests. So, don’t shy away from breaking things – that’s how you make them stronger.

Frequently Asked Questions

What is Cypress used for in form testing?

Cypress is primarily used for end-to-end testing of web applications, and a significant part of that involves testing forms.

It allows developers and QAs to simulate user interactions like typing into fields, selecting dropdown options, checking boxes, and submitting forms, then asserting on the outcomes, ensuring the form behaves as expected from a user’s perspective.

How do I type into an input field in Cypress?

To type into an input field in Cypress, you use the .type command. First, you locate the input element using a selector e.g., ID, class, or attribute, and then you chain the .type command with the text you want to input. For example: cy.get'#username'.type'JohnDoe'.

How do I select an option from a dropdown in Cypress?

To select an option from a dropdown a <select> element in Cypress, you use the .select command. You can select an option by its visible text, its value attribute, or its index. For instance: cy.get'#countrySelect'.select'United States' or cy.get'#countrySelect'.select'US' if value is ‘US’.

How do I click a checkbox or radio button in Cypress?

For checkboxes and radio buttons, you use the .check command. Locate the element and then call .check. For example: cy.get'#termsAndConditions'.check. For radio buttons, you often specify the value: cy.get''.check'female'. To uncheck a checkbox, use .uncheck.

How do I submit a form in Cypress?

The most common way to submit a form in Cypress is to locate the submit button and use the .click command on it. For example: cy.get'button'.click or cy.get'#submitBtn'.click. Cypress will then wait for the page to navigate or for new elements to appear.

How do I verify form submission success in Cypress?

After submitting a form, you verify success by making assertions.

Common assertions include checking the URL for redirection cy.url.should'include', '/success-page', verifying the visibility and text of a success message cy.get'.success-message'.should'be.visible'.and'contain', 'Form submitted successfully!', or intercepting API requests to check the response status.

Can Cypress handle dynamic forms where fields appear conditionally?

Yes, Cypress can handle dynamic forms.

Its commands automatically retry until elements are found and actionable. Browser compatibility of semantic html

For complex dynamic scenarios, you can use .should'be.visible' to explicitly wait for elements to appear, or chain commands with .then to execute logic after a condition is met e.g., clicking a button reveals new fields.

What are the best practices for Cypress selectors in form testing?

The best practice for Cypress selectors, especially for robust form testing, is to use data-cy or data-test, data-qa attributes.

These attributes are explicitly for testing purposes and are less likely to change due to styling or refactoring, making your tests more stable and maintainable. Example: cy.get''.

How do I simulate hitting the Enter key in an input field?

To simulate hitting the Enter key after typing into an input field, you append {enter} to the .type command. For example: cy.get'#searchBox'.type'Cypress best practices{enter}'. This is useful for search bars or single-line form submissions.

How do I clear an input field in Cypress?

To clear an input field in Cypress before typing new content, you can use the .clear command. For example: cy.get'#oldValueInput'.clear. Note that .type often clears the field by default, but .clear is explicit.

Can I test form validation messages with Cypress?

Yes, testing form validation messages is a crucial part of robust form testing. You can submit a form with invalid data, then use cy.get to locate the error message elements and assert their visibility and content. Example: cy.get'#emailErrorMessage'.should'be.visible'.and'contain', 'Invalid email format.'.

How do I handle file uploads in Cypress forms?

Cypress doesn’t directly interact with the operating system’s file picker.

For file uploads, you typically use a third-party plugin like cypress-file-upload. After installing, you can use cy.fixture to load a file and then the attachFile command on the input element: cy.get''.attachFile'example.pdf'.

Should I use `cy.wait` for form submissions?

While cy.wait can be used, it’s generally discouraged for arbitrary pauses in favor of Cypress’s built-in retryability and explicit assertions.

Instead of cy.wait2000, it’s better to wait for specific elements to appear, a URL to change, or an API request to complete. How to use github bug reporting

For API calls, cy.intercept.as'alias' followed by cy.wait'@alias' is the recommended approach.

How can I make my form tests more reusable in Cypress?

To make your form tests more reusable, define custom commands for common form-filling sequences e.g., Cypress.Commands.add'fillLoginForm', user, pass => { ... }. You can also use fixtures to load test data, preventing hardcoding values directly in your tests and allowing for data-driven testing.

What if my form submits via an AJAX request SPA?

For forms in Single Page Applications SPAs that submit data via AJAX requests, you can use cy.intercept to mock or monitor the network request.

This allows you to assert on the request payload and the server’s response, providing more granular control over the test.

Example: cy.intercept'POST', '/api/submit-data'.as'formData'. Then, after submitting, cy.wait'@formData'.

How do I test forms with multiple steps or wizard flows?

Testing multi-step forms involves chaining commands and assertions for each step.

After completing one step filling fields, clicking “Next”, you would assert that the application has navigated to the next step e.g., checking for new visible elements or a URL change before proceeding to fill the fields for that step.

Custom commands can be very helpful here to encapsulate each step.

Can Cypress interact with disabled form fields?

Cypress commands like .type or .click will not work on disabled elements by default. If you try to interact with a disabled field, Cypress will throw an error, which is the expected behavior as a user cannot interact with them. If you need to test the state of a disabled field, you would assert its disabled state: cy.get'#myField'.should'be.disabled'.

What if a form field is hidden?

Cypress commands generally only interact with visible elements. Cypress 10 features

If a form field is hidden e.g., display: none or visibility: hidden, Cypress will not be able to type into it or click it.

If you expect a field to become visible later, you’d use .should'be.visible' before interacting.

If you need to interact with a hidden field for a specific test scenario rare, you might need to force the action with { force: true }, but this is generally discouraged as it doesn’t simulate real user behavior.

How do I handle dropdowns that are not `<select>` elements e.g., custom dropdowns?

For custom dropdowns implemented with div, ul, li, etc., you cannot use cy.select. Instead, you will typically click the dropdown “trigger” element to open it, and then click the specific option element that becomes visible.

Example: cy.get'.custom-dropdown-trigger'.click. cy.get'.custom-dropdown-option:contains"Option Name"'.click.

Can Cypress fill forms that require CAPTCHA or reCAPTCHA?

No, Cypress cannot solve CAPTCHA or reCAPTCHA challenges directly. These are designed to prevent automated bots.

For testing purposes, you typically need to bypass CAPTCHA in your test environment.

This can be done by configuring your development environment to disable CAPTCHA for specific test users, using environment variables to switch it off, or mocking the CAPTCHA API response for automated tests.

Do not attempt to use any service that claims to “solve” CAPTCHAs, as this often involves unethical practices.

Cross browser compatibility testing checklist

How to fill and submit forms in cypress