0

我正在尝试构建一个柏树 BDD 框架。我认为我已经正确创建了功能和步骤定义文件。当我使用 运行测试时,我在此视频中npx cypress run --spec cypress/integration/examples/shoppingCart.feature --headed --browser chrome得到以下结果,视频长约 20 秒。

我不知道该怎么想,所以我制作了另一个视频,这是一个消除过程并查看 BDD 设置的过程。我仍然不确定(这个大约 8 分钟长)。

我将添加功能文件、步骤定义文件和错误消息。

我完全不解。

错误信息

`1) End to End shopping cart
       User can purchase items and have them delivered to shipping address:
     Error: Step implementation missing for: I am on the Ecommerce page
      at Context.resolveAndRunStepDefinition (http://localhost:54824/__cypress/tests?p=cypress/integration/examples/shoppingCart.feature:12277:11)
      at Context.eval (http://localhost:54824/__cypress/tests?p=cypress/integration/examples/shoppingCart.feature:11603:35)
`

特征文件

场景:用户可以购买商品并将其交付到送货地址

Given I am on the Ecommerce page
When I add the mobile handsets to the shopping cart
And I verify the total price of shopping cart
Then I select the checkout button
When I will select my shipping location
And I agree to the terms and conditions checkbox
When I select the Purchase button
Then I will see an alert stating my order was successful, plus an ETA delivery

步骤定义文件

/// <reference types="Cypress" />

import { Given,When,Then,And } from "cypress-cucumber-preprocessor/steps";
import Homepage from "../../../support/pageObjects/Homepage";
import orderSummaryPage from "../../../support/pageObjects/orderSummaryPage";
import completeOrderPage from "../../../support/pageObjects/completeOrderPage";
 
const homepage = new Homepage()
const StartCheckout = new orderSummaryPage()
const CompleteOrder = new completeOrderPage()
 
Given ( 'I am on the Ecommerce page', () => {
 
    cy.visit(Cypress.env('url')+"/angularpractice/")
    
    })
 
When('I add the mobile handsets to the shopping cart',function () {
 
        homepage.getShopTab().click() 
    
        this.data.mobileHandset.forEach(function(element) {// this custom commad will add items to your cart
    
              cy.AddToCart(element)  
            }); 
    
    
    StartCheckout.getBasketCheckoutButton().click()
    
    } )//end of step 
 
And('I verify the total price of shopping cart',() => {
 
    //calculate shopping cart here
    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)
    
    })
    
    CompleteOrder.getBasketTotalCost().then(function(element)
    {
      const shopCartTotal=element.text()  
      var res= shopCartTotal.split(" ") 
      var total= res[1].trim() 
      expect(Number(total)).to.equal(sum)
    
    })
    
    
    } )//end of step
 
Then('I select the checkout button',() => {
 
    StartCheckout.getStartCheckoutButton().click()
 
} )//end of step
 
When('I will select my shipping location',() => {
 
    CompleteOrder.getShippingCountry().type('United Kingdom')
    CompleteOrder.getShippingCountryConfirm().click()
 
} )//end of step
 
And('I agree to the terms and conditions checkbox',()=> {
 
    CompleteOrder.getTermsConditionsCheckbox().click({force: true})
 
})//end of step 
 
When('I select the Purchase button',()=> {
 
    CompleteOrder.getPurchaseButton().click()
 
})
 
Then('I will see an alert stating my order was successful, plus an ETA delivery',()=> {
 
    CompleteOrder.getPurchaseAlert().then(function(element){
 
      
        const actualText= element.text()
       expect(actualText.includes('Success')).to.be.true
    
      }) 
 
})

我确信我什至在正确的地方创建了 BDD 框架。

在此处输入图像描述

更新:

我刚刚被问到non global step definitions我的 package.json 中的内容(我只从“脚本”部分开始复制)。
快速浏览我什至没有看到它。

 "scripts": {
    "open": "cypress open",
    "scripts": "cypress run",
    "headTest": "cypress run --headed ",
    "chromeTest": "cypress run --browser chrome",
    "firefoxTest": "cypress run --browser firefox",
    "edgeTest": "cypress run --browser edge",
    "testDashboard": "cypress run --record --key 1642c226-ca7f-49c3-b513-da4ee9222ca8 --parallel",
    "clean:reports": "rm -R -f cypress/reports && mkdir cypress/reports && mkdir cypress/reports/mochareports",
    "pretest": "npm run clean:reports",
    "combine-reports": "mochawesome-merge ./cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
    "generate-report": "marge cypress/reports/mochareports/report.json -f report -o cypress/reports/mochareports",
    "posttest": "npm run combine-reports && npm run generate-report",
    "test": "npm run scripts || npm run posttest"
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true
  },
  
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cypress": "^7.4.0",
    "cypress-cucumber-preprocessor": "^4.1.3"
  },
  "dependencies": {
    "cypress-multi-reporters": "^1.5.0",
    "mocha": "^9.0.0",
    "mochawesome": "^6.2.2",
    "mochawesome-merge": "^4.2.0",
    "mochawesome-report-generator": "^5.2.0",
    "start-server-and-test": "^1.12.5"
  }
}
4

5 回答 5

1

根据TheBrainFamily/cypress-cucumber-preprocessor/issues/596,使用与功能文件匹配的文件夹

在此处输入图像描述

于 2021-07-12T22:32:35.317 回答
1

我设置了您的文件并通过源代码进行了调试。

步骤文件应该在哪里?

基本上,在loader.js 这一行

const stepDefinitionsToRequire = getStepDefinitionsPaths(filePath)
  .map((sdPath) => `require('${sdPath}')`); 

使用您的设置返回一个空数组。

深入getStepDefinitionsPaths研究,暂时忽略常用步骤,这条线

let nonGlobalPath = getStepDefinitionPathsFrom(filePath);

负责决定steps文件从哪里来(filePath是特征文件全路径)。

而且getStepDefinitionPathsFrom.js只是

return filePath.replace(path.extname(filePath), "")

这只是从

.../cypress/integration/examples/BDD/shoppingCart.feature

给予

.../cypress/integration/examples/BDD/shoppingCart

然后在这一行 nonGlobalPath上变成一个 glob 模式来获取所有类型为 .js、.ts 或 .tsx 的文件

const nonGlobalPattern = `${nonGlobalPath}/**/*.+(js|ts|tsx)`;

这使

.../cypress/integration/examples/BDD/shoppingCart/**/*.+(js|ts|tsx)

结论:步骤文件必须位于与功能文件(在您的情况下)同名的文件夹中cypress/integration/examples/BDD/shoppingCart/-除非您修改commonPath设置(见下文)。

步骤定义文件可以任意命名,只要它们具有正确的扩展名。搜索该文件夹中的所有文件以查找步骤定义。

无需将文件向上移动到集成文件夹中。

修复 #1

创建一个新文件夹cypress/integration/examples/BDD/shoppingCart/并移入shoppingCartStepDef.js其中。


配置设置

  • stepDefinitions本身对步骤位置没有影响,但显然它应该来自文档。这看起来像是一些更改引入的错误。

  • nonGlobalStepBaseDir影响公共步骤路径(其中包含跨许多功能使用的步骤,例如登录),但不影响特定于 shoppingCart 功能的路径。同样,由于上述问题导致的错误。

  • commonPath只要它直接指向步骤定义,它似乎就可以工作。glob 模式的**/*.+(js|ts|tsx)使用也有一个错误 - 该模式省略了尾随/,这意味着该部分(指示任何子文件夹)无效(参见第28 行和前第 26 行**之间的区别)

修复 #2

将 commonPath 配置选项设置为包含步骤定义的文件夹

"commonPath": "cypress/integration/examples/BDD/"

你的测试会起作用。

于 2021-07-06T13:15:31.833 回答
1

我认为这些改变会有所帮助。从您的错误中,我可以看出功能文件无法找到您的步骤定义。

  1. 将 的名称更改integration/examplesintegration。因为我从cypress pre-processor plugins page看到了什么,所以正在搜索测试cypress/integration

  2. 再次参考cypress 预处理器插件页面,编写步骤定义文件的推荐方法是从与您的文件同名的目录中搜索步骤定义.feature

因此,在您的情况下,您的.feature文件位于cypress/integration/BDD/shoppingCart.feature. 现在在 BDD 文件夹中创建一个与功能文件同名的文件夹cypress/integration/BDD/shoppingCart,并在其中放置您的步骤定义文件。

于 2021-07-05T09:23:32.223 回答
1

stepDefinitions选项添加到配置中,

"cypress-cucumber-preprocessor": {
  "nonGlobalStepDefinitions": true,
  "stepDefinitions": "cypress/integration/examples/BDD"
},
于 2021-07-05T09:26:34.643 回答
0

我能够通过执行以下操作来解决此问题:

我向开发人员提出了一张票,因为我注意到很多人都遇到了同样的问题。开发人员发现他们有一个错误,修复它并发布了一个新版本。

新版本发布后我遇到了另一个问题,并且能够通过以下方式解决该问题:

我在 BDD 下创建了一个名为购物车的新文件夹。所以integrations/BDD/shoppingCart

然后我将以下内容添加到 package.json

 },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": false,
    "stepDefinitions": "cypress/integration/BDD"
  },
于 2021-07-09T13:02:19.233 回答