如何从cypress中的整个父div中获取开关或切换处于打开状态的产品名称？

这是一个我想要执行的测试用例，但我不知道如何在其中放入if条件。父div html代码。

<div class="row collection-listing pro-list-collection"><div class="col-md-3 add-a-product"><a class="bg-white text-center"><div class="table-cell"><img src="/images/add-product.svg" alt="" loading="lazy"><span>Add a product</span></div></a></div><div class="col-md-3 added-product"><div class="bg-white text-center"><button class="btn-default">Click to edit</button><div class="pro-title">Women T-shirt with V-Neck</div><div class="image-bg-set d-inline-block"><div class="product-design"><div class="product-design-output"><img src="https://pci-designer-steps-server.shirtee.cloud/product-images/3/651?backgroundColor=%2300000&amp;size=s" style="width: 150px; height: 150px; background-color: rgb(0, 0, 0);"></div></div></div><div class="product-switch"><label class="switch"><input type="checkbox" checked=""><span class="slider round"></span></label><em>Use as Main Product</em></div></div></div><div class="col-md-3 added-product"><div class="bg-white text-center"><button class="btn-default">Click to edit</button><div class="pro-title">Beanie with Embroidery</div><div class="image-bg-set d-inline-block"><div class="product-design"><div class="product-design-output"><img src="https://pci-designer-steps-server.shirtee.cloud/product-images/19/651?backgroundColor=%2300000&amp;size=s" style="width: 150px; height: 150px; background-color: rgb(0, 0, 0);"></div></div></div><div class="product-switch"><label class="switch"><input type="checkbox"><span class="slider round"></span></label><em>Use as Main Product</em></div></div></div><div class="col-md-3 added-product"><div class="bg-white text-center"><button class="btn-default">Click to edit</button><div class="pro-title">Men Tanktop</div><div class="image-bg-set d-inline-block"><div class="product-design"><div class="product-design-output"><img src="https://pci-designer-steps-server.shirtee.cloud/product-images/31/651?backgroundColor=%2300000&amp;size=s" style="width: 150px; height: 150px; background-color: rgb(0, 0, 0);"></div></div></div><div class="product-switch"><label class="switch"><input type="checkbox"><span class="slider round"></span></label><em>Use as Main Product</em></div></div></div><div class="col-md-3 added-product"><div class="bg-white text-center"><button class="btn-default">Click to edit</button><div class="pro-title">Coffee Mug </div><div class="image-bg-set d-inline-block"><div class="product-design"><div class="product-design-output"><img src="https://pci-designer-steps-server.shirtee.cloud/product-images/38/651?backgroundColor=%2300000&amp;size=s" style="width: 150px; height: 150px; background-color: rgb(0, 0, 0);"></div></div></div><div class="product-switch"><label class="switch"><input type="checkbox"><span class="slider round"></span></label><em>Use as Main Product</em></div></div></div><div class="col-md-3 added-product"><div class="bg-white text-center"><button class="btn-default">Click to edit</button><div class="pro-title">Men Basic T-shirt</div><div class="image-bg-set d-inline-block"><div class="product-design"><div class="product-design-output"><img src="https://pci-designer-steps-server.shirtee.cloud/product-images/50/651?backgroundColor=%2300000&amp;size=s" style="width: 150px; height: 150px; background-color: rgb(0, 0, 0);"></div></div></div><div class="product-switch"><label class="switch"><input type="checkbox"><span class="slider round"></span></label><em>Use as Main Product</em></div></div></div><div class="col-md-3 added-product"><div class="bg-white text-center"><button class="btn-default">Click to edit</button><div class="pro-title">Women Basic T-shirt</div><div class="image-bg-set d-inline-block"><div class="product-design"><div class="product-design-output"><img src="https://pci-designer-steps-server.shirtee.cloud/product-images/345/651?backgroundColor=%2300000&amp;size=s" style="width: 150px; height: 150px; background-color: rgb(0, 0, 0);"></div></div></div><div class="product-switch"><label class="switch"><input type="checkbox"><span class="slider round"></span></label><em>Use as Main Product</em></div></div></div></div>

一个产品的div html代码

<div class="col-md-3 added-product">
  <div class="bg-white text-center">
    <button class="btn-default">Click to edit</button>
    <div class="pro-title">Women T-shirt with V-Neck</div>
    <div class="image-bg-set d-inline-block">
      <div class="product-design">
        <div class="product-design-output">
          <img
            src="https://pci-designer-steps-server.shirtee.cloud/product-images/3/651?backgroundColor=%2300000&amp;size=s"
            style="
              width: 150px;
              height: 150px;
              background-color: rgb(0, 0, 0);
            " />
        </div>
      </div>
    </div>
    <div class="product-switch">
      <label class="switch">
        <input type="checkbox" checked="" />
        <span class="slider round"></span>
      </label>
      <em>Use as Main Product</em>
    </div>
  </div>
</div>

前端看起来怎么样

有几种方法可以做到这一点，对我来说，你需要识别卡片和它们包含的内容。
每张卡片上都有班级 added-product ，以便验证所选产品的说明

cy.get('input[checked]')                  // which is checked?
  .closest('.added-product')              // the card containing this switch
  .contains('Women T-shirt with V-Neck')  // has this description

检查是否有5种其他产品未被选中，并且有其他说明

cy.get('input:not([checked])')
  .closest('.added-product')
  .should('have.length', 5)
  .and('not.contain', 'Women T-shirt with V-Neck')

顺便提一下 .parents('.added-product') 它还可以扫描所有祖先，直到找到类。
检查一个产品时获取标题的步骤

cy.get('input[checked]')                  // which is checked?
  .closest('.added-product')              // the card containing this 
  .find('.pro-title')                     // the title element
  .its('text')                            // it's text
  .then(productText => {                  
    console.log(productText)
  })

你通常不这样做 if(...) {} else {} 在测试中，因为您没有编写应用程序，所以在设置某些状态（如切换产品开关）后，您正在测试页面上的预期条件。
测试要么满足条件，要么失败，像在注解中那样记录状态不是很有用。

如何从cypress中的整个父div中获取开关或切换处于打开状态的产品名称？

1条答案

相关问题

热门标签

最新问答