赛普拉斯：摩卡自动化框架：自定义命令：自定义命令未运行未在测试中运行

Question

我创建了一个自定义命令，可以自动执行将商品添加到购物车的过程。我在测试 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'}, (subject,
> options) => { ... }) // // // -- This will overwrite an existing
> command -- // Cypress.Commands.overwrite('visit', (originalFn, url,
> options) => { ... })

Answer 1

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

cy.AddToCart('blackberry')

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

Answer 2

您可以使用正则表达式创建不区分大小写的搜索。最简单的方法是使用.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 )')

});