October DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsPC HealthRecommendedCrashes, freezes, slowdowns? Check your PC nowSpot repairable issues before they interrupt work.Check PCOctober DealsAmazon USDeal season is back - check today's better picksAmazon US: current deals, useful picks and tech finds.See Picks×
Skip to content
World desk5 min

How to Fill and Submit Forms in Cypress

A practical Cypress pattern for filling fields, submitting forms, synchronizing on requests, and asserting the result.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Use Cypress to find form controls with stable selectors, enter or select values, submit the form through the interaction you want to test, and assert the result. A successful .click() or .type() alone does not prove that the application handled the submission correctly.

Fill out a form with Cypress

Visit the page, scope queries to the form, fill the controls, and check an outcome that matters to the user. This example assumes the page has fields named email and message, a submit button, and a status message after a successful submission; change those selectors and expected text to match your app.

As an Amazon Associate I earn from qualifying purchases.

cy.visit('/contact')

cy.get('form').within(() => {
  cy.get('[name="email"]').type('[email protected]')
  cy.get('[name="message"]').type('Please send the details.')
  cy.get('button[type="submit"]').click()
})

cy.get('[role="status"]').should('contain.text', 'Thank you')

cy.get() queries the document. Inside .within(), its queries are scoped to the selected form, helping avoid matching similarly named controls elsewhere on the page. Prefer selectors based on stable semantics—such as a field’s name, an associated label, or a dedicated test attribute—rather than fragile layout or styling details. Cypress documents query scope and .within().

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Use the command that matches the control

  • For text inputs and textareas, use .type(); use .clear() first when the test needs to replace an existing value.
  • For checkboxes and radio controls, use .check() or .uncheck().
  • For a native select control, use .select().

If the selected or checked state is important to the behavior, assert it rather than assuming the interaction produced the intended state. See the Cypress introduction for interaction and assertion examples.

Submit the form using the interaction under test

Click the submit button

Click the real submit control when the test is meant to cover the primary visible action:

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

Cypress checks actionability before acting: for example, the target must not be hidden, covered, disabled, or animating. If the action cannot be performed under those conditions, Cypress reports the issue instead of silently treating an unusable control as a successful interaction. Avoid { force: true } unless bypassing those checks is intentional. See Interacting with elements in Cypress.

Submit with Enter when keyboard behavior matters

To test keyboard submission, type Enter into an appropriate form input:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
cy.get('[name="password"]').type('example{enter}')

Enter does not submit every form in every configuration. Browser implicit submission depends on the form structure and submit control. Cypress documents that, in a multi-input form with a submit button, pressing Enter can submit the form, fire submit events, and trigger a synthetic click on the submit button. If the handler prevents the default action, the browser’s default submission does not occur. Choose this approach only when keyboard submission is part of the behavior you need to verify; details are in the cy.type() documentation.

Wait for a submission request and verify its effect

If submission makes a network request, register an intercept before interacting with the form, then wait for that matching request. Replace the example endpoint with the route used by your application.

cy.intercept('POST', '/api/contact').as('submitContact')

cy.get('form').within(() => {
  cy.get('[name="email"]').type('[email protected]')
  cy.get('[name="message"]').type('Please send the details.')
  cy.get('button[type="submit"]').click()
})

cy.wait('@submitContact')
cy.get('[role="status"]').should('contain.text', 'Thank you')

Waiting on the alias synchronizes the test with the matching request rather than an arbitrary elapsed time. Then assert the result the user should see: a confirmation, navigation, an updated record, or another application-specific outcome. Cypress retries queries and assertions such as .should('be.visible') and .should('contain.text', ...) until they pass or time out. A completed interaction is not itself evidence that the resulting application state is correct. See cy.click() for the intercept-and-wait pattern and Cypress assertions for retry behavior.

Troubleshoot common form-test failures

  • The wrong field is matched: A broad selector may match multiple controls. Use a stable, specific selector and scope related queries with .within().
  • The click fails because the button is covered, hidden, disabled, or moving: Check the rendered page and the control’s state. Do not force the click merely to get past an actionability failure unless that bypass is part of the intended test.
  • The click succeeds but the form does not appear to work: Assert the expected user-visible state or application change. A successful action command does not establish that the submit handler produced the right result.
  • The test proceeds before the request finishes: Register cy.intercept() before submitting and use cy.wait('@alias') for the request the test depends on.
  • Pressing Enter does not submit: Check the form structure, submit control, and whether application code prevents the default action. Test the actual keyboard behavior you expect rather than assuming every input submits on Enter.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Or skip the browser setup

If your task is to capture a screenshot of the page rather than test form behavior, ScreenshotNeo is a website screenshot API with a one-call request:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo documentation for setup and options. It accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000.

Sign up for ScreenshotNeo and get 1,000 free screenshots a month with no card.

Frequently Asked Questions

Should a Cypress form test check the network request or the page?

When submission makes a request, waiting for its intercept alias synchronizes the test with that request. Also assert the application outcome that matters to the flow, such as a confirmation or updated state.

Can Cypress submit a form by pressing Enter?

Yes, when the form structure permits the browser’s implicit submission behavior. Use Enter when keyboard submission is the behavior being tested.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
Windows Errors? Fix Them Before They SpreadFree repair scan
Crashes, No Sound, or Screen Glitches?Free driver scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.