在柏树中获取子元素答案

【问题标题】：get child element in cypress在柏树中获取子元素
【发布时间】：2020-07-06 06:41:30
【问题描述】：

我想获取属性名为“tag-test”且值为“tab”的子元素

我要测试的部分 html 如下所示

  ... 
  <ul
     tag-test="tab"
  >
   <li  />
   <li  />
   <li  />
  />

我怎样才能从 ul 获得最后一个 li 作为 jquery 对象？

我控制台记录的以下代码显示

... 我怎样才能从

... 走得更远？

cy.get('ul[tag-test]=tab')
  .then((ul) => { 
     console.log(ul)  // <ul> ... </ul> . 
   })

【问题讨论】：

标签： jquery cypress

【解决方案1】：

要在ul 中查找最后一个li，您可以使用CSS 伪选择器last-child。

例如，使用这个测试片段

<ul tag-test="tab">
  <li>1</li>
  <li>2</li>
  <li>3</li>        // test should find this one
</ul>

<ul tag-test="another">
  <li>4</li>
  <li>5</li>
  <li>6</li>        // test should ignore this one
</ul>

测试可能是

cy.get('ul[tag-test=tab]')
  .find('li:last-child')     // use find here to restrict search to previous subject
  .contains('3')

或抓取 jQuery 对象

cy.get('ul[tag-test=tab]')
  .find('li:last-child')
  .then($lastLI => {
    expect($lastLI).to.contain(3)
  })

【讨论】：

【解决方案2】：

从您的代码中我可以看到标签测试的定位器不正确，它应该如下所示：

cy.get('ul [tag-test="tab"]')

使用此定位器，您将获得所有具有tag-test="tab" 属性的ul 元素

【讨论】：

ul 和 [ 之间不应有空格。这里的空格表示匹配任何ul 元素，然后查找具有tag-test="tab" 属性的any child。如果没有空格，它将找到一个ul 元素具有属性tag-test="tab"

【解决方案3】：

你可以使用.find解决我们的问题

在你的情况下，

cy.get('ul[tag-test="tab"]')
.find('li')
  .then($li => {

     //$li will contain all the li elements inside your ul as an array
     cy.log($li)

     //if you want a specific li item use $li[index]
     cy.log($li[0])

     //if you want the last li item use the length of the returned li array
     cy.log($li[$li.lenght -1])

   })

【讨论】：