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

本文介绍了一种使用Cypress进行高效自动化测试的方法。通过利用JavaScript的强大功能，可以在单个测试中处理多种交互情况，实现代码复用并简化测试流程。文章以待办事项应用为例，展示了如何针对不同过滤条件下的列表变化进行测试。

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);
            })
    });