Cypress中如何将fixture不同JSON对象映射到spec文件对应测试用例

问题根因 #

你当前的实现逻辑是遍历fixture数组，每一条fixture数据都会触发一次完整的spec文件执行，会出现两次运行：

• 第一次运行：传入的env.fixture是搜索测试数据{"searchKeyword":"cypress"}，执行两个测试用例时，第二个登录用例读取testData.username自然返回undefined
• 第二次运行：传入的env.fixture是登录测试数据{"username":"QATesting","password":"testprofile"}，执行两个测试用例时，第一个搜索用例读取testData.searchKeyword也会返回undefined
  完全不符合「第一组数据对应第一个用例、第二组数据对应第二个用例」的需求。

另外注意你存在笔误：描述中提到fixture文件夹下存放的是Input.json，但runner.js中引入的是./cypress/fixtures/Test.json，需要先修正文件名保持一致，否则会出现读取不到fixture数据的问题。

方案1：直接在spec内读取fixture（推荐） #

无需修改runner逻辑，直接在spec文件中读取完整的fixture数组，按需取对应下标的数据即可，一次运行就能跑完两个测试用例，逻辑更简洁。
修改后的test.spec.js代码如下：

describe("How to map two different data set with respective test function",() =>{
    const baseUrl = "https://www.google.com/";
    // 存储完整的fixture数据
    let testDatas;

    // 所有用例执行前先读取fixture
    before(() => {
        cy.fixture('Input.json').then(datas => {
            testDatas = datas;
        })
    })

    beforeEach("",()=>{
        cy.visit(baseUrl);
    });

    it("Test Case1: Search the keyword", function () {
        // 取下标为0的第一组搜索数据
        const searchData = testDatas[0];
        cy.xpath("//input[@name='q']").type(searchData.searchKeyword);
        cy.xpath("//input[@value='Google Search']").click();
        cy.get("//ul/li[2]").should("be.visible");
    });

    it("Test Case2: login to the gmail account", function(){
        // 取下标为1的第二组登录数据
        const loginData = testDatas[1];
        cy.xpath("//a[contains(text(),'Sign in')]").click();
        cy.xpath("//div[contains(text(),'Use another account')]").click();
        cy.xpath("#identifierId").type(loginData.username);
        cy.xpath("//*[contains(text(),'Next')]").click();
        cy.xpath("#password").type(loginData.password);
        cy.xpath("#submitbtn").click();
    })
});

方案2：保留runner传参逻辑的实现方式 #

如果你需要保留runner批量传入参数的运行逻辑，可以给fixture数据新增场景标识，在spec中判断场景跳过不匹配的用例即可。

1. 首先修改Input.json新增type字段区分场景：

[
    {
        "type": "search",
        "searchKeyword":"cypress"
    },
    {
        "type": "login",
        "username":"QATesting",
        "password":"testprofile"
    }
]

2. 修改test.spec.js增加场景判断：

describe("How to map two different data set with respective test function",() =>{
    const baseUrl = "https://www.google.com/";
    const testData = Cypress.env('fixture')

    beforeEach("",()=>{
        cy.visit(baseUrl);
    });

    it("Test Case1: Search the keyword", function () {
        // 非搜索场景直接跳过当前用例
        if(testData.type !== 'search') this.skip();
        cy.xpath("//input[@name='q']").type(testData.searchKeyword);
        cy.xpath("//input[@value='Google Search']").click();
        cy.get("//ul/li[2]").should("be.visible");
    });

    it("Test Case2: login to the gmail account", function(){
        // 非登录场景直接跳过当前用例
        if(testData.type !== 'login') this.skip();
        cy.xpath("//a[contains(text(),'Sign in')]").click();
        cy.xpath("//div[contains(text(),'Use another account')]").click();
        cy.xpath("#identifierId").type(testData.username);
        cy.xpath("//*[contains(text(),'Next')]").click();
        cy.xpath("#password").type(testData.password);
        cy.xpath("#submitbtn").click();
    })
});

调整后runner两次运行时，会分别执行对应场景的测试用例，不会出现属性读取undefined的问题。

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