Cypress BDD：Cypress Cucumber 处理器：无法运行步骤定义 .js 文件

Posted 2023-02-16

【中文标题】Cypress BDD：Cypress Cucumber 处理器：无法运行步骤定义 .js 文件

【英文标题】：Cypress BDD: Cypress Cucumber processor: Cannot Run Step Definition .js file

【发布时间】：2021-09-16 00:48:10

【问题描述】：

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

我不知道该怎么想，所以I did another video 这是一个消除过程并查看 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 框架。

更新：

我刚刚被问到我的 package.json 中的 non global step definitions（我只从“脚本”部分开始复制）。 快速看一下，我什至看不到它。

 "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"
  

【问题讨论】：

"nonGlobalStepDefinitions" 在cypress.json 中设置的标志是什么？

@AlapanDas 这是nonGlobalStepDefinitions 我已将它们添加到我原来的问题中。快速浏览一下，我没有看到任何突然出现在我身上的东西，表明我拥有它们。

对不起我的错，我的意思是你能检查你的package.json 是否提到nonGlobalStepDefinitions 吗？是真的还是假的？

@AlapanDas 没问题 :0) 。让我用这些信息更新我的问题

@AlapanDas 刚刚按要求添加了package.json信息。

【参考方案1】：

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

我发现很多人都遇到了同样的问题，因此我向开发者提出了投诉。开发人员发现他们有一个错误，修复它并发布了一个新版本。

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

我在 BDD 下创建了一个名为购物车的新文件夹。所以它@98​​7654321@

然后我在 package.json 中添加了以下内容

 ,
  "cypress-cucumber-preprocessor": 
    "nonGlobalStepDefinitions": false,
    "stepDefinitions": "cypress/integration/BDD"
  ,

【参考方案2】：

根据TheBrainFamily/cypress-cucumber-preprocessor/issues/596，使用与特征文件匹配的文件夹

【讨论】：

谢谢。它正在读取步骤定义文件。所以我终于可以摆脱这个问题了。！！

【参考方案3】：

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

步骤文件应该在哪里？

基本上，在loader.jsthis line

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

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

深入研究getStepDefinitionsPaths，暂时忽略常用步骤，this line

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

然后将this linenonGlobalPath 转为 glob 模式以获取所有 .js、.ts 或 .tsx 类型的文件

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

给了

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

结论：步骤文件必须位于与功能文件同名的文件夹中（在您的情况下为cypress/integration/examples/BDD/shoppingCart/） - 除了 em> 如果您修改 commonPath 设置（见下文）。

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

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

修复 #1

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

---

配置设置

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

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

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

修复 #2

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

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

您的测试将起作用。

【讨论】：

哇！感谢您的回复。所以你是说我有这个问题，因为它看起来像我的功能和步骤定义文件似乎与插件位于不同的位置？但是，特征和步骤定义文件都在同一个文件夹中。我很困惑为什么它看不到它们。我完全不解。原谅我的无知，我脑子里有很多事情，你能用最简单的方式告诉我“我该如何解决这个问题？”

是的，很抱歉它的长度。我会做一些模组。

附注，因为此插件使用文件预处理器，您需要在更改配置之间重新启动 Cypress 运行程序。

还有一个pull request 看起来会修复配置路径中的错误。

所以基本上这个错误不在于我的编码。它实际上是使用这个版本的插件 - 我发现了一个错误。那正确吗？所以，你正在修复，当我重新启动我的 VS 工作室并再次运行 BDD 代码时，它应该可以工作了。这对吗？

【参考方案4】：

将stepDefinitions 选项添加到配置中，

"cypress-cucumber-preprocessor": 
  "nonGlobalStepDefinitions": true,
  "stepDefinitions": "cypress/integration/examples/BDD"
,

【讨论】：

我试过了，测试还是失败。不过，我感谢您的贡献。

刚刚又试了一次。有效。谢谢！谢谢！！！

【参考方案5】：

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

将integration/examples 的名称更改为integration。因为我从cypress pre-processor plugins page 看到的，测试正在cypress/integration 下搜索。

再次参考cypress pre-processor plugins page，编写步骤定义文件的推荐方法是从与.feature 文件同名的目录中搜索步骤定义。

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

【讨论】：

两个文件具有相同的名称，并且编写方式完全相同。但是，为了确定，我会仔细检查。谢谢你，我真的很感激你。

您的shoppingCartStepDef.js 文件应位于cypress/integration/BDD/shoppingCart 下。