賽普拉斯 V10。 不在 BDD 測試中讀取數據：TypeError：無法讀取未定義的屬性（讀取“mobileHandset”）

Question

我希望有人能提供幫助，我剛剛將 Cypress Mocha 框架轉換為 BDD。 在轉換之前它運行完美並且測試運行順利。 現在我已經轉換了它，我似乎收到一條錯誤消息Cannot read properties of undefined (reading 'mobileHandset') 。 我以前從未遇到過這個問題，所以我很困惑。 這是代碼並觀看此視頻

特征：

Feature: End to End Shopping Purchase Validation

 Registered user will be able to purchase an item and have it shipped to their country

    Scenario: Customer Purchase and delivery
    
    Given  I am on the eCommerce page
    When I add items to cart 
    And I confirm shopping cart total
    Then I select my delivery country and see a thank for your order notification

步驟定義

import { Given, And, Then, When } from "@badeball/cypress-cucumber-preprocessor";
import Homepage from '../../../support/pageObjects/Homepage'
import orderSummaryPage from '../../../support/pageObjects/orderSummaryPage'
import completeOrderPage from '../../../support/pageObjects/completeOrderPage'
const data = require ('../../../fixtures/example.json');

const homepage = new Homepage()
const StartCheckout = new orderSummaryPage()
const CompleteOrder = new completeOrderPage()



Given(/^I am on the eCommerce page$/, () => {
    cy.visit(``+"/angularpractice/")

});

When(/^I add items to cart$/, function() {
    
  homepage.getShopTab().click({force:true}) 

    this.data.mobileHandset.forEach(function(element) {// this custom commad will add items to your cart

          cy.AddToCart(element)  
        }); 

        StartCheckout.getBasketCheckoutButton().click()

});

When(/^I confirm shopping cart total$/, () => {

    let sum=0
   
    CompleteOrder.getProductCost().each(($e1, index, $list) =>{

      const unitCost=$e1.text()  
      let res= unitCost.split(" ") 
      res= res[1].trim() 
      sum=Number(sum)+Number(res)
      
  }).then(function() 
  {
      cy.log(sum)
  
  })
});

Then(/^I select my delivery country and see a thank for your order notification$/, () => {
    
    StartCheckout.getStartCheckoutButton().click()
    CompleteOrder.getShippingCountry().type('United Kingdom')
    CompleteOrder.getShippingCountryConfirm().click()
    CompleteOrder.getTermsConditionsCheckbox().click({force: true})
    CompleteOrder.getPurchaseButton().click()
    
    CompleteOrder.getPurchaseAlert().then(function(element){

      
       const actualText= element.text()
      expect(actualText.includes('Success')).to.be.true
   
     }) 
    
});

這是數據

{
  "name": "MY_NAME",
  "gender": "Female",
  "mobileHandset": ["Blackberry", "Nokia Edge"]
  
  
}

每個之前

beforeEach(function()
{

    cy.fixture('example').then(function(data){ 
 
        this.data=data 

       })

})

經過討論，我將 BeforeEach 文件移至 Support。 仍然得到原來的錯誤

Answer 1

如果cypress/fixtures 文件夾中已有數據夾具，則無需導入它。

您可以在測試之前將夾具加載到 Before 掛鈎中。

import { 
    Given,
    And,
    Then,
    When,
    Before 
} from "@badeball/cypress-cucumber-preprocessor";
//...

Before(function() {
    cy.fixture('example').then((data) => {
        this.data = data;
    });
});
//...

Answer 2

您的beforeEach()應該可以正常工作，但是您不必只引用data而不是this.data 。

const data = require ('../../../fixtures/example.json');  // data available anywhere in this step
...
When(/^I add items to cart$/, () => {
  ...
  data.mobileHandset.forEach(element => {
    cy.AddToCart(element)  
  })
  ...
})

---

慣例是使用cy.fixture()

When(/^I add items to cart$/, () => {
  ...
  cy.fixture('example.json').then(data => {    // no ../.. needed
    data.mobileHandset.forEach(element => {
      cy.AddToCart(element)  
    })
  }) 
  ...
});