E2E测试中步进表单跨步骤数据一致性验证方法咨询

Nice question! I’ve run into this exact scenario with stepper forms before—when the review step renders data in non-standard elements that cy.get().contains() can’t target, you need to get a bit creative with Cypress. Here are the most reliable approaches I’ve used:

1. Save Your Initial Input Data First #

Start by storing the exact data you enter in Step 1 so you have a reference to compare against later. This keeps your test consistent and avoids hardcoding values twice.

// Define your test data upfront
const step1FormData = {
  username: 'test_user_123',
  number: 98765,
  time: '09:15',
  date: '2024-06-10'
};

// Enter data in Step 1
cy.get('[data-testid="username-field"]').type(step1FormData.username);
cy.get('[data-testid="number-field"]').type(step1FormData.number.toString());
cy.get('[data-testid="time-field"]').type(step1FormData.time);
cy.get('[data-testid="date-field"]').type(step1FormData.date);

// Save to a Cypress alias to access across steps
cy.wrap(step1FormData).as('step1Data');

2. Check Your App's Internal State #

If your app uses a framework like React, Vue, or Angular, you can access the app's state directly. For example, in React, you might expose your form's context or state to the window object temporarily for testing:

// In Step 3, pull the app's state and compare
cy.get('@step1Data').then(savedData => {
  cy.window().its('appState.formData').should('deep.equal', savedData);
});

Note: Just remember to remove any code that exposes state to the window in your production build!

3. Verify Local/Session Storage #

Many apps persist form data in local or session storage between steps. You can retrieve that stored data and compare it to your initial input:

cy.get('@step1Data').then(savedData => {
  cy.window().its('localStorage.stepperFormData').then(storedData => {
    expect(JSON.parse(storedData)).to.deep.equal(savedData);
  });
});

4. Intercept the API Request (If Data Is Fetched) #

If Step 3 pulls the data from an API, intercept that request and validate the response matches your initial input:

// Set up the intercept before navigating to Step 3
cy.intercept('GET', '/api/stepper-review').as('getReviewData');

// Move to Step 3
cy.get('[data-testid="next-to-step3"]').click();

// Wait for the API call and check the response
cy.wait('@getReviewData').then(interception => {
  cy.get('@step1Data').then(savedData => {
    expect(interception.response.body).to.deep.equal(savedData);
  });
});

5. Check Hidden DOM Attributes #

Sometimes data is stored in hidden data-* attributes even if it’s not visible on the page. You can access these with Cypress’s invoke() method:

cy.get('@step1Data').then(savedData => {
  cy.get('[data-testid="review-section"]')
    .invoke('attr', 'data-form-values')
    .then(reviewData => {
      expect(JSON.parse(reviewData)).to.deep.equal(savedData);
    });
});

Pick the method that fits your app’s architecture best—most teams find saving the initial data to an alias and checking against state or storage works seamlessly.

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