将 POM 和命令与 Cucumber 框架一起使用时出现 Cypress 错误

Cypress Error when using POM and Commands with Cucumber framework

提问人:Pavithran 提问时间:11/17/2023 更新时间:11/17/2023 访问量:29

问:

我在使用页面对象模型 (POM)、自定义命令和 data.json 文件进行 Cypress Cucumber 测试时遇到了问题。该测试似乎跳过了第一个 When 语句。我的代码结构如下:

Step-Def 代码:

import { When, Then, Given } from "@badeball/cypress-cucumber-preprocessor";
import homepage from '../../../pageObjects/homepage'

const HomePage = new homepage()

describe('Some Test', () => {
    let data; //closure variable
beforeEach(function()
{
    cy.fixture('cypressdata').then(function(fdata)
    {
        data=fdata;
    })
});
});

Given('I open home page', () => {
    cy.visit('https://rahulshettyacademy.com/angularpractice/')
})

When('I add products to cart', function () {
    // Product Page
        HomePage.shopmenu().click();
        this.data.product.forEach((element) => {
            cy.selectproduct(element);
        });
})

Then('validate the price', function () {
    it('calculate total price', function () {
        var sum = 0;
        cy.get("tr td:nth-child(4) strong").each(($el, index, $list) => {
            const Actualprice = $el.text();
            var result = Actualprice.split(" ");
            var result = result[1].trim();
            sum = Number(sum) + Number(result);
        }).then(function () {
            cy.log(sum);
        });

        var amt;
        cy.get('td[class="text-right"] h3 strong').then(function (element) {
            const totalamount = element.text();
            var amount = totalamount.split(" ");
            var amount = amount[1].trim();
            amt = Number(amount);
            expect(amt).to.be.equal(sum);
        }).then(function () {
            cy.log(amt);
        });

        it('click purchase button', function () {
            cy.get("button[class='btn btn-success']").click();
        });
    });
})

Then('select the country and submit and verify thank you message', function () {
    cy.get('#country').type('india');
    cy.get('div[class="suggestions"] ul li a').click();
    cy.get('#checkbox2').check({ force: true });
    cy.get('input[value*="Purchase"]').click();
    cy.get('.alert').then(function (element) {
        const AlertText = element.text();
        expect(AlertText.includes('Success')).to.be.true;
    });
})

When('I fill the form details', function () {
    it('fill form details', function () {
        HomePage.getEditbox().type(this.data.name);
        HomePage.getGender().select(this.data.gender).should('have.value', this.data.gender);
    });
})

Then('validate the form', function () {
    it('validate form details', function () {
        HomePage.twowayDataBind().should('have.value', this.data.name);
        HomePage.getEditbox().should('have.attr', 'minlength', '2');
        HomePage.empStatus().should('be.disabled');
    });
})

Then('select the shop page', function () {
    it('select the shop page', function () {
        HomePage.shopmenu().click();
    });
})

before每个代码:

describe('Some Test', () => {
    let data; //closure variable
beforeEach(function()
{
    cy.fixture('cypressdata').then(function(fdata)
    {
        data=fdata;
    })
});
});

功能文件:

功能:E2E电子商务验证

Application Regression

Scenario: Ecommerce product delivery
    Given I open home page
    When I add products to cart
    Then validate the price
    Then select the country and submit and verify thank you message

Scenario: Filling the Home Page Form
    Given I open home page
    When I fill the form details
    Then validate the form
    Then select the shop page

错误图像

问题详细信息 我怀疑该问题可能与不同组件(POM、自定义命令data.json)之间的设置或交互有关。但是,我很难确定根本原因。

其他详细信息:

赛普拉斯版本:^13.5.1 相关依赖项: “dependencies”: { “@badeball/cypress-cucumber-preprocessor”: “最新”, “@cypress/browserify-preprocessor”: “最新”, “黄瓜”:“^6.0.7”, “赛普拉斯-iframe”:“^1.0.1” } 控制台输出或错误消息:

 Running:  ecommerce.feature                                                               (1 of 1)


  E2E Ecommerce Validation
    1) Ecommerce product delivery
    √ Filling the Home Page Form (183ms)


  1 passing (3s)
  1 failing

  1) E2E Ecommerce Validation
       Ecommerce product delivery:
     TypeError: Cannot read properties of undefined (reading 'product')
      at Context.eval (https://rahulshettyacademy.com/__cypress/tests?p=cypress\integration\examples\BDD\ecommerce.feature:15805:19)
      at Registry.runStepDefininition (https://rahulshettyacademy.com/__cypress/tests?p=cypress\integration\examples\BDD\ecommerce.feature:8554:48)
      at Object.fn (https://rahulshettyacademy.com/__cypress/tests?p=cypress\integration\examples\BDD\ecommerce.feature:15015:43)
      at runStepWithLogGroup (https://rahulshettyacademy.com/__cypress/tests?p=cypress\integration\examples\BDD\ecommerce.feature:14627:29)
      at Context.eval (https://rahulshettyacademy.com/__cypress/tests?p=cypress\integration\examples\BDD\ecommerce.feature:15011:62)


采取的步骤 已检查自定义命令的配置。 已验证data.json文件是否已正确加载。 检查了 POM 结构,以确保正确选择页面元素。

请求协助 我将不胜感激任何帮助来识别问题和解决问题。如果您需要更具体的信息,或者我应该采取其他步骤,请告诉我。

提前感谢您的帮助!

cypress cypress-cucumber-preprocessor cypress-custom-commands

评论


答:

2赞 Lola Ichingbola 11/17/2023 #1

TypeError:无法读取未定义的属性(读取“product”)是指此行。

this.data.product.forEach((element)

这意味着该部件是未定义的部件。this.data

您可以通过以下方式修复它:

  • 通过删除和使用 since 不放置 scope 的数据变量。thisdata.product.forEach((element)let datathis

    let data;
    beforeEach(function() {
      cy.fixture('cypressdata').then(function(fdata) {
        data = fdata;
      })
    ...
    
    When('I add products to cart', function () {
      ...
      data.product.forEach((element) => {
        cy.selectproduct(element);
    ...
    

  • 通过设置一个别名,该别名将在作用域上设置变量cy.fixture('cypressdata').as('data')datathis

    let data;
    beforeEach(function() {
      cy.fixture('cypressdata').as('data')
    })
    ...
    
    When('I add products to cart', function () {
      ...
      this.data.product.forEach((element) => {
        cy.selectproduct(element);
    ...
    

  • 通过搬进去并摆脱cy.fixture()When()beforeEach()

    When('I add products to cart', function () {
      cy.fixture('cypressdata').then(data => {
        data.product.forEach((element) => {