首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Cypress BDD: Cypress黄瓜处理器:无法运行步骤定义.js文件

Cypress BDD: Cypress黄瓜处理器:无法运行步骤定义.js文件
EN

Stack Overflow用户
提问于 2021-07-05 16:12:30
回答 5查看 1.2K关注 0票数 0

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

我不知道该怎么想,所以I did another video,这是一个淘汰的过程,看着BDD的设置。我仍然不确定(这个大概有8分钟长)。

我将添加特征文件、步骤定义文件和错误信息。

我完全迷惑了。

错误消息

代码语言:javascript
运行
复制
`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)
`

特征文件

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

代码语言:javascript
运行
复制
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

步骤定义文件

代码语言:javascript
运行
复制
/// <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 (我只是从“脚本”部分复制过来的)。

快速看一眼,我甚至没有看到它。

代码语言:javascript
运行
复制
 "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"
  }
}
EN

回答 5

Stack Overflow用户

发布于 2021-07-05 17:23:32

我认为这些变化会有所帮助。从你的错误中我可以看出特征文件不能找到你的步骤定义。

  1. integration/examples的名称更改为integration。根据我从cypress pre-processor plugins page中看到的,测试是在cypress/integration.

下进行搜索的

  1. 再次提到cypress pre-processor plugins page,建议编写步骤定义文件的方法是从与.feature文件同名的目录中搜索步骤定义。

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

票数 1
EN

Stack Overflow用户

发布于 2021-07-05 17:26:35

stepDefinitions选项添加到配置中,

代码语言:javascript
运行
复制
"cypress-cucumber-preprocessor": {
  "nonGlobalStepDefinitions": true,
  "stepDefinitions": "cypress/integration/examples/BDD"
},
票数 1
EN

Stack Overflow用户

发布于 2021-07-06 21:15:32

我设置了你的文件并调试了源代码。

step文件应该放在哪里?

基本上,在loader.js this line

代码语言:javascript
运行
复制
const stepDefinitionsToRequire = getStepDefinitionsPaths(filePath)
  .map((sdPath) => `require('${sdPath}')`); 

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

深入研究getStepDefinitionsPaths,暂时忽略常见步骤,this line

代码语言:javascript
运行
复制
let nonGlobalPath = getStepDefinitionPathsFrom(filePath);

负责确定steps文件的来源(filePath是特征文件的完整路径)。

getStepDefinitionPathsFrom.js只是

代码语言:javascript
运行
复制
return filePath.replace(path.extname(filePath), "")

它只是将扩展从

代码语言:javascript
运行
复制
.../cypress/integration/examples/BDD/shoppingCart.feature

给予

代码语言:javascript
运行
复制
.../cypress/integration/examples/BDD/shoppingCart

然后在this line上将nonGlobalPath转换为glob模式,以获取.js、.ts或.tsx类型的所有文件

代码语言:javascript
运行
复制
const nonGlobalPattern = `${nonGlobalPath}/**/*.+(js|ts|tsx)`;

这给了我们

代码语言:javascript
运行
复制
.../cypress/integration/examples/BDD/shoppingCart/**/*.+(js|ts|tsx)

结论:如果修改设置,step文件必须位于与特征文件同名的文件夹中(在本例中为cypress/integration/examples/BDD/shoppingCart/) -,但除外(见下文)。

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

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

解决方案#1

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

配置设置

  • stepDefinitions本身对步骤的位置没有影响,但从文档中可以清楚地看出这一点。这看起来像是由某些更改引入的错误。

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

只要直接指向步骤定义,

  • commonPath似乎就可以工作。glob模式**/*.+(js|ts|tsx)的用法也有一个缺陷--该模式省略了尾随的/,这意味着**部分(指示任何子文件夹)是无效的(参见line 28和前面的26行之间的区别)

解决方案#2

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

代码语言:javascript
运行
复制
"commonPath": "cypress/integration/examples/BDD/"

这样你的测试就可以工作了。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68252722

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档