Cypress夹具- TypeError:无法读取未定义的属性“travelData”

Question

Cypress test execution with fixture - "TypeError: Cannot read property 'travelData' of undefined"中的误差获取

以下是几个步骤：

1-创建一个travelData.json文件并将其放入fixtures文件夹中：

{
  "FIRSTNAME": "TESTTRAVEL",
  "LASTNAME": "USER",
  "MOBILE": "581234567",
  "EMAIL": "test@test.com",
  "PASSPORT": "AB1234",
  "CURRENCY": "AED"
}

2-编写一个Cypress测试并放入integration文件夹。代码如下：

context('Travel Portal Regression Test', () => {
  beforeEach(function () {
    cy.fixture('travel.testData').then((travelData) => {
      this.travelData = travelData;
    });
  });
  beforeEach(() => {
    // cy.viewport('iphone-6')
    cy.viewport(360, 640);
    cy.visit('https://thoughtcoders.com/');
  });

  it('Testing ThoughtCoders Homepage', () => {
    cy.log('Testing ThoughtCoders Homepage');
    cy.log(this.travelData.FIRSTNAME);
  });
});

当我运行Cypress测试时，我得到错误"TypeError:无法读取未定义的“的属性'travelData‘。

请纠正我。

Answer 1

解决方案1:

如果wrap()方法的解析方式如下所示，则可以使用该方法生成作为param传递的object：

context('Travel Portal Regression Test', () => {
  beforeEach(() => {
    cy.fixture('travelData').then((data) => cy.wrap(data).as('getTravelData'));
    // cy.viewport('iphone-6')
    cy.viewport(360, 640);
    cy.visit('https://thoughtcoders.com/');
  });

  it('Testing ThoughtCoders Homepage', () => {
    cy.log('Testing ThoughtCoders Homepage');
    cy.get('@getTravelData').then((res) => cy.log(res.FIRSTNAME));
  });
});

解决方案2:

您可以在测试规范的上限上声明一个名为travelData的变量&将其值重新分配到从json文件接收到的data，如下所示：

context('Travel Portal Regression Test', () => {
  let travelData;

  beforeEach(() => {
    cy.fixture('travelData').then((data) => {
      travelData = data;
      return travelData;
    });
    // cy.viewport('iphone-6')
    cy.viewport(360, 640);
    cy.visit('https://thoughtcoders.com/');
  });

  it('Testing ThoughtCoders Homepage', () => {
    cy.log('Testing ThoughtCoders Homepage');
    cy.log(travelData.FIRSTNAME);
  });
});

这是带有测试结果的截图：

​

​

Answer 2

看看夹具示例配方，它展示了一种简单的方法，只加载一次，然后在规范中的每个测试中持久化

模式是在您的beforeEach()和当前beforeEach()之间添加一个额外的beforeEach()。

示例配方

context('loading once and using @', () => {
  let city
  let country

  before(() => {
    // load fixtures just once, need to store in
    // closure variables because Mocha context is cleared
    // before each test
    cy.fixture('city').then((c) => {
      city = c
    })

    cy.fixture('country').then((c) => {
      country = c
    })
  })

  beforeEach(() => {
    // we can put data back into the empty Mocha context before each test
    // by the time this callback executes, "before" hook has finished
    cy.wrap(city).as('city')
    cy.wrap(country).as('country')
  })

  it('has loaded fixtures', function () {
    // again, the test has to use "function" callback
    // to make sure "this" points at the Mocha context
    expect(this.city).to.deep.equal({ name: 'Atlanta' })
    expect(this.country).to.deep.equal({ name: 'United States' })
  })
})

你需要的三个要点是

1. 使用闭包变量
2. 清除后使用beforeEach()将变量“放回”
3. 使用"function () {}“样式测试

在您的测试中

context('loading once and persisting the fixture', () => {

  let travelData                                                 // key point #1

  before(() => {
    cy.fixture('travelData').then((data) => {                  
      travelData = data;
    });
  })

  beforeEach(() => {                                             // key point #2
    cy.wrap(travelData).as('travelData')
  })

  beforeEach(() => {
    cy.viewport(360, 640);
    cy.visit('https://thoughtcoders.com/');
  });

  it('Testing ThoughtCoders Homepage', function () {             // key point #3 
    expect(this.travelData."FIRSTNAME").to.equal("TESTTRAVEL")   // passes
  })
})