Cypress：Mocha 自动化框架：自定义命令：自定义命令未运行未在测试中运行

如何解决Cypress：Mocha 自动化框架：自定义命令：自定义命令未运行未在测试中运行

我创建了一个自定义命令，可以自动执行将商品添加到购物车的过程。我在测试 PRIOR 之前运行了 rand 代码，将其添加到自定义命令中，并且运行良好。我添加了“添加到购物车”代码并创建了名为 AddToCart 的自定义命令。我将命令添加到我的测试规范文件中并尝试运行测试。

虽然，原始自动化代码是正确的，因为我在测试规范文件中成功创建并在测试中运行它，它不会运行它不会作为自定义命令执行，因此测试挂起并且不会' t 将商品添加到购物车。你可以看here

我一直在查看这段代码，但我对自己可能出错的地方感到非常困惑。我很想再看一双眼睛。

提前致谢。

我很困惑这是怎么发生的

使用自定义命令测试规范

> /// <reference types="Cypress" />
>  
>      describe('My test feature',function() {
>  
>     beforeEach(function(){
>        cy.fixture('example').then(function(data){ 
>  
>              this.data=data 
>  
>             })
>  
>     })
>  
>     
>  
>     it('my first test scenario',function(){
>    
>         cy.visit('https://rahulshettyacademy.com/angularpractice/')
>         cy.get('input[name="name"]:nth-child(2)').type(this.data.name)
>         cy.get('select').select(this.data.gender)
>  
>         cy.get('input[name="name"]:nth-child(1)').should('have.value',this.data.name
> )  
>         cy.get('input[name="name"]:nth-child(2)').should('have.attr','minlength','2')
>         cy.get('input[id=inlineRadio3]').should('be.disabled')
>  
>         //custom command
>         cy.get('a[href="/angularpractice/shop"]').click()
>         cy.AddToCart('blackBerry')
>       
>  
>    
>      })//end of test case 
>    
>  
>  
>      })//end of describe

自定义命令

> // *********************************************** // This example
> commands.js shows you how to // create varIoUs custom commands and
> overwrite // existing commands. // // For more comprehensive examples
> of custom // commands please read more here: //
> https://on.cypress.io/custom-commands //
> *********************************************** // // // -- This is a parent command -- // Cypress.Commands.add('login',(email,password)
> => { ... }) //   Cypress.Commands.add("AddToCart",(productName) => { 
>  
>     cy.get('h4.card-title').each(($e1,index,$list) =>{//this go the the array of items for sale using an array
>  
>         if($e1.text().includes(productName))//find the product in the script
>       
>         {
>               cy.get('button.btn.btn-info').eq(index).click()//when you have found the product 'add to cart' button
>     
>         }
>     })   })
>     // // -- This is a child command -- // Cypress.Commands.add('drag',{ prevSubject: 'element'},(subject,> options) => { ... }) // // // -- This is a dual command -- //
> Cypress.Commands.add('dismiss',{ prevSubject: 'optional'},> options) => { ... }) // // // -- This will overwrite an existing
> command -- // Cypress.Commands.overwrite('visit',(originalFn,url,> options) => { ... })

解决方法

您可以使用正则表达式创建不区分大小写的搜索。最简单的方法是使用 .contains() 命令。

此外，定位整个卡片而不是标题，.contains() 将在卡片的所有子项中查找文本。然后按钮更容易找到。

it('adds an item to the cart',() => {

  Cypress.Commands.add("AddToCart",(productName) => {

    cy.contains('div.card',new RegExp(productName,'i'))
      .each($card => {
        cy.wrap($card)
          .find('button').contains('Add')
          .click()
      })
  })

  cy.viewport(1200,1200)
  cy.visit("https://rahulshettyacademy.com/angularpractice/shop");

  const productName = "blackberry";

  cy.get('a').contains('Checkout ( 0 )')
  cy.AddToCart(productName)
  cy.get('a').contains('Checkout ( 1 )')

});

,

这个条件如何：if($e1.text().includes(productName)) 在您的自定义命令中？我的意思是我可以在视频中看到“黑莓”，但“黑莓”是你的参数：

cy.AddToCart('blackberry')

大小写很重要，因此输入 cy.AddToCart('Blackberry') 可能会解决您的问题。