如何使用Cypress验证浏览器错误提示信息

Absolutely! Cypress is perfect for this kind of form validation test—here’s a step-by-step breakdown of how to verify that error prompt appears when a required field is left empty and the "continue" button is clicked:

Step 1: Set up the test flow #

First, navigate to your form page, ensure the target field is empty (in case it’s pre-filled), then trigger the form submission by clicking the "continue" button.

Step 2: Verify the error prompt #

How you target the error depends on whether it’s a custom UI error message or a native HTML5 validation prompt:

For custom error messages (most common) #

If your app displays a custom styled error (like a red text block), use a reliable selector to target it. Pro tip: Add data-testid attributes to your elements for stable, maintainable tests—this avoids breaking tests if text or styles change.

Example code:

it('displays required field error when continue is clicked with empty field', () => {
  // Go to the form page
  cy.visit('/path-to-your-form');

  // Clear the target field if it has default content
  cy.get('[data-testid="target-field"]').clear();

  // Click the continue button
  cy.get('[data-testid="continue-button"]').click();

  // Check that the error is visible and has the correct text
  cy.get('[data-testid="required-field-error"]')
    .should('be.visible')
    .and('contain', 'Please fill out this required field');
});

For native HTML5 validation prompts #

If your form uses browser-built-in validation (the small popup that appears when a required field is empty), you’ll need to check the element’s validationMessage property instead:

it('shows native HTML5 validation error for empty required field', () => {
  cy.visit('/path-to-your-form');
  cy.get('[data-testid="target-field"]').clear();
  cy.get('[data-testid="continue-button"]').click();

  // Verify the native validation message exists
  cy.get('[data-testid="target-field"]')
    .invoke('prop', 'validationMessage')
    .should('equal', 'Please fill out this field');
});

Bonus Best Practices #

• Always use specific selectors (like data-testid) instead of relying on text or CSS classes alone—this makes your tests more resilient to UI changes.
• If multiple fields are required, extend the test to validate each corresponding error message individually.
• You can also add a check to ensure the error disappears once the field is filled correctly:

  cy.get('[data-testid="target-field"]').type('Valid input');
  cy.get('[data-testid="required-field-error"]').should('not.exist');
  

内容的提问来源于stack exchange，提问作者SunAndMoon91