如何使用产品名称获取数组变量中的所有属性值？

101

克里娜·莫迪

在父 div 中，有 2 个产品可用。我想获得产品名称和产品价格。产品价格将通过属性值获得，产品名称将通过同一 div 中的 h4 标签获得

<span class="price-bg"><div><input type="number" minlength="9" value="22.95"></div></span>
<h4>Men Basic T-shirt</h4>

这是整个 div 的 HTML

<div class="product-list-sidebar">
   <div class="box-product">
      <h4>Men Basic T-shirt</h4>
      <span class="close-img"><i class="fas fa-times"></i></span>
      <div class="row">
         <div class="col-md-8">
            <div class="pro-title-sidebar">Define Product Colors (1/21)</div>
            <div class="color-select-list">
               <div class="list-color" style="background-color: rgb(191, 0, 0); color: rgb(255, 255, 255);"><i class="fa fa-check" style="color: rgb(255, 255, 255);"></i></div>
               <div class="list-color-add"><i class="fa fa-plus" aria-hidden="true"></i></div>
            </div>
            <div class="row price-profit">
               <div class="col-md-6">
                  <form>
                     <label for="">Price</label>
                     <span class="price-bg">
                        <div><input type="number" minlength="9" value="22.95"></div>
                     </span>
                  </form>
               </div>
               <div class="col-md-6"><label for="">Profit Per Sale</label><span>€ 13.95</span></div>
            </div>
         </div>
         <div class="col-md-4">
            <div class="pro-sidebar-img text-center">
               <div class="product-design">
                  <div class="product-design-output"><img src="https://pci-designer-steps-server.shirtee.cloud/product-images/51/837?backgroundColor=%2300000&amp;size=s" style="width: 150px; height: 150px; background-color: rgb(0, 0, 0);"></div>
               </div>
            </div>
         </div>
      </div>
      <div class="d-none">
         <span class="close-img"><i class="fas fa-times"></i></span>
         <div class="favourite-product-color">
            <h5>Please select your favourite product colors</h5>
            <div class="fav-color-list">
               <div class="list-color" style="background-color: rgb(191, 0, 0); color: rgb(255, 255, 255);"><i class="fa fa-check" style="color: rgb(255, 255, 255);"></i></div>
               <div class="list-color" style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(5, 57, 12); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(33, 5, 0); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(2, 65, 80); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(245, 217, 2); color: rgb(0, 0, 0);"></div>
               <div class="list-color" style="background-color: rgb(0, 92, 9); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(6, 8, 43); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(206, 206, 206); color: rgb(0, 0, 0);"></div>
               <div class="list-color" style="background-color: rgb(224, 184, 110); color: rgb(0, 0, 0);"></div>
               <div class="list-color" style="background-color: rgb(145, 211, 237); color: rgb(0, 0, 0);"></div>
               <div class="list-color" style="background-color: rgb(197, 2, 66); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(42, 88, 110); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(212, 35, 0); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(21, 147, 158); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"></div>
               <div class="list-color" style="background-color: rgb(11, 37, 128); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(205, 205, 207); color: rgb(0, 0, 0);"></div>
               <div class="list-color" style="background-color: rgb(71, 0, 20); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(255, 78, 0); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(42, 42, 1); color: rgb(255, 255, 255);"></div>
            </div>
         </div>
         <div class="favourite-product-color">
            <h5>Please select your main product colors</h5>
            <div class="fav-color-list color-select-list">
               <div class="list-color" data-optionid="89" style="background-color: rgb(191, 0, 0);"><i class="fa fa-check" style="color: rgb(255, 255, 255);"></i></div>
            </div>
         </div>
      </div>
   </div>
   <div class="box-product">
      <h4>Women Basic T-shirt</h4>
      <span class="close-img"><i class="fas fa-times"></i></span>
      <div class="row">
         <div class="col-md-8">
            <div class="pro-title-sidebar">Define Product Colors (1/10)</div>
            <div class="color-select-list">
               <div class="list-color" style="background-color: rgb(44, 187, 222); color: rgb(0, 0, 0);"><i class="fa fa-check" style="color: rgb(0, 0, 0);"></i></div>
               <div class="list-color-add"><i class="fa fa-plus" aria-hidden="true"></i></div>
            </div>
            <div class="row price-profit">
               <div class="col-md-6">
                  <form>
                     <label for="">Price</label>
                     <span class="price-bg">
                        <div><input type="number" minlength="9" value="22.95"></div>
                     </span>
                  </form>
               </div>
               <div class="col-md-6"><label for="">Profit Per Sale</label><span>€ 13.95</span></div>
            </div>
         </div>
         <div class="col-md-4">
            <div class="pro-sidebar-img text-center">
               <div class="product-design">
                  <div class="product-design-output"><img src="https://pci-designer-steps-server.shirtee.cloud/product-images/333/857?backgroundColor=%2300000&amp;size=s" style="width: 150px; height: 150px; background-color: rgb(0, 0, 0);"></div>
               </div>
            </div>
         </div>
      </div>
      <div class="d-none">
         <span class="close-img"><i class="fas fa-times"></i></span>
         <div class="favourite-product-color">
            <h5>Please select your favourite product colors</h5>
            <div class="fav-color-list">
               <div class="list-color" style="background-color: rgb(44, 187, 222); color: rgb(0, 0, 0);"><i class="fa fa-check" style="color: rgb(0, 0, 0);"></i></div>
               <div class="list-color" style="background-color: rgb(28, 165, 31); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(6, 8, 43); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(191, 0, 0); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"></div>
               <div class="list-color" style="background-color: rgb(4, 38, 150); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(255, 203, 0); color: rgb(0, 0, 0);"></div>
               <div class="list-color" style="background-color: rgb(255, 78, 0); color: rgb(255, 255, 255);"></div>
               <div class="list-color" style="background-color: rgb(205, 205, 207); color: rgb(0, 0, 0);"></div>
            </div>
         </div>
         <div class="favourite-product-color">
            <h5>Please select your main product colors</h5>
            <div class="fav-color-list color-select-list">
               <div class="list-color" data-optionid="1026" style="background-color: rgb(44, 187, 222);"><i class="fa fa-check" style="color: rgb(0, 0, 0);"></i></div>
            </div>
         </div>
      </div>
   </div>
   <div class="empty-box-product">&nbsp;</div>
   <div class="bottom-btn">
      <div class="row">
         <div class="col-md-6"><a class="back-btn">Back</a></div>
         <div class="col-md-6"><a class="next-btn">Next</a></div>
      </div>
   </div>
</div>

如何在cypress中获取数组中的两个值？我的代码是：

cy.get('h4').then(($ele) => {
    const texts = Array.from($ele, el => el.innerText);
    texts.forEach(text => cy.log(text));
})

// Get price value
cy.get(step.product_list_sidebar).invoke('attr', 'value').then(($style) => {
    const styl = $style
    cy.log(styl)
})

艾克罗伊德

我会分别处理每个数据的提取，然后合并结果。

这假设标题总是有价格（每个价格相同）。

cy.get('h4')
.then($titles => {
  return [...$titles].map(title => title.innerText)
})
.as('titles')

// Wait for prices
cy.get('.price-bg input').eq(0)
  .should('not.have.attr', 'value', '')

cy.get('.price-bg input')
.then($prices => {
  return [...$prices ].map(price => price.getAttribute('value'))
})
.as('prices')

// Merge results
cy.get('@titles').then(titles => {
  cy.get('@prices').then(prices => {
    const titlesAndPrices = titles.map((title, index) => {
      return { title, price: prices[index]}
    })
    console.log(titlesAndPrices)
  })
})

从你的最后一条评论，如果你想要一个字符串

// Merge results
cy.get('@titles').then(titles => {
  cy.get('@prices').then(prices => {
    const titlesAndPrices = titles.map((title, index) => {
      return `${title} - ${prices[index]}`
    })
    console.log(titlesAndPrices)
  })
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-09-4

我来说两句

0 条评论

登录后参与评论

上一篇：如何避免与 Google Tag Manger 相关的页面速度问题以提高性能？

如何使用产品名称获取数组变量中的所有属性值？

如何使用产品名称获取数组变量中的所有属性值？

蓝屏死机没有修复解决方案

计算数据帧中每行的NA

UITableView的项目向下滚动后更改颜色，然后快速备份

Node.js中未捕获的异常错误，发生调用

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

Linux的官方Adobe Flash存储库是否已过时？

验证REST API参数

ggplot：对齐多个分面图-所有大小不同的分面

Mac OS X更新后的GRUB 2问题

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

带有错误“ where”条件的查询如何返回结果？

用日期数据透视表和日期顺序查询

VB.net将2条特定行导出到DataGridView

如何从视图一次更新多行（ASP.NET - Core）

Java Eclipse中的错误13，如何解决？

尝试反复更改屏幕上按钮的位置 - kotlin android studio

离子动态工具栏背景色

应用发明者仅从列表中选择一个随机项一次

当我尝试下载 StanfordNLP en 模型时，出现错误

python中的boto3文件上传

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID