[Cypress] Test Variations of a Feature in Cypress with a data-driven Test-优快云博客

本文介绍了一种使用Cypress进行自动化测试的方法，通过利用JavaScript的数据结构来简化测试代码，实现对多种交互行为的有效验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Many applications have features that can be used with slight variations. Instead of maintaining multiple tests with nearly identical code, we can take advantage of the JavaScript runtime and use normal data structures and plain old JavaScript to test and make assertions for multiple interactions in a single test.

we have a new fixture:

// cypress/fixtures/mixed_todos.json

[
  { "id": 1, "name": "One", "isComplete": false },
  { "id": 2, "name": "Two", "isComplete": true },
  { "id": 3, "name": "Three", "isComplete": true },
  { "id": 4, "name": "Four", "isComplete": false }
]

In the app, when we click different visibility filter, the list will change accordingly.

To test this behavior in clean code, we can use '.wrap().each()' to test it

    it('should Footer todos', function () {
        cy.seedAndVisit('fixture:mixed_todos');

        const filters = [
            { link: 'Active', expectedLength: 2 },
            { link: 'Completed', expectedLength: 2 },
            { link: 'All', expectedLength: 4 }
        ];

        cy.wrap(filters)
            .each(filter => {
                // contains(): find the element contains the text
                cy.contains(filter.link).click();
                cy.get('.todo-list li').should('have.length', filter.expectedLength);
            })
    });