如何在 Jquery 或 Cypress 中选择和显示具有相同类的所有项目和元素？

如何解决如何在 Jquery 或 Cypress 中选择和显示具有相同类的所有项目和元素？

我正在尝试使用 jquery 获取 class=book 的所有元素。 我在开发控制台工具中尝试了 $('.store') 和 $('.bookStore .store')，但这仅返回一个元素，我如何获取 class="store" 的所有元素？

还是我误解了 Chrome 开发工具上的选择器的工作原理？

此外，我正在尝试编写 Cypress 测试，我可以调用 cy.get(".store").should('have.length',3) 以获得总长度，但我想看看里面有什么元素/属性，而不是总数。

我正在尝试使用 class=store 获取所有元素，以便我可以看到商店中有哪些书。我们如何做到这一点，或者有更好的方法吗？我无法更改页面上的 html，只能执行选择器或 Cypress 支持的内容。

感谢您的帮助！

<div class="bookStore">
  <div class="store">
     <button class="book">Book A</button>  
     <button class="book">Book B</button>
     <button class="book">Book C</button>
     <button class="book">Book D</button>
     <button class="book">Book E</button>
  </div>
  
  <div class="store">
     <button class="book">Fiction Book</button>
     <button class="book">Non-Fiction Book</button>
     <button class="book">Comics</button>
     <button class="book">Manga</button>
     <button class="book">Poetry</button>
  </div>
  
  <div class="store">
     <button class="book">Math</button>
     <button class="book">Physics</button>
     <button class="book">Computer Science</button>
     <button class="book">Biology</button>
     <button class="book">Chemistry</button>
  </div>
</div>

解决方法

这将为您提供第一个商店部分的所有元素：

cy.get('.store').eq(0).find('.book')

同样，对于第二个商店部分，您可以使用：

cy.get('.store').eq(1).find('.book')

获取一家商店的书籍：

cy.get('.store').eq(0).find('.book').each(($ele) => {
    cy.log($ele.text())
})

获取所有商店中的所有书籍：

cy.get('.book').each(($ele) => {
    cy.log($ele.text())
})

,

您可以像这样迭代商店和每个商店中的书籍，

cy.get('.store').each(($store,index) => {

  const storeName = 'Store ' + index;

  cy.wrap($store,{log:false}).find('.book',{log:false})
    .then($books => {
      const titles = [...$books].map(book => {
        const available = book.classList.contains('available')
        return `${book.innerText} ${available ? '(Available)' : ''}`
      })
      return `${storeName} has these titles: ${titles.join(',')}`
    })
    .then(cy.log)
})

哪个会退出

Store 0 has these titles: Book A (Available),Book B,Book C,Book D,Book E
Store 1 has these titles: Fiction Book,Non-Fiction Book,Comics,Manga,Poetry
Store 2 has these titles: Math,Physics,Computer Science,Biology,Chemistry

,

您可以获得所有书籍的简单数组

cy.get('.store')
    .then(elements => {
        let arrayOfBooks = []
        for (const element of elements) {
            cy.get(element)
                .find('.book')
                .each(bookElement => arrayOfBooks.push(bookElement.text()))
        }
        cy.wrap(arrayOfBooks).as('bookList')
    })

还可以通过店铺号和书号获取店铺对象数组

cy.get('.store')
    .then(elements => {
        let arrayOfBooks = []
        for (let i = 0; i < elements.length; i++) {
            cy.get(elements[i])
                .find('.book')
                .each((bookElement,bookIndexInStore) => {
                    arrayOfBooks.push({
                        storeNumber: i,bookIndexInStore: bookIndexInStore,bookName: bookElement.text()
                    })
                })
        }
        cy.wrap(arrayOfBooks).as('bookList')
    })

并在代码中进一步使用该值，如下所示：

cy.get('@bookList')
    .then(booklist => {
        //some actions with the bookList
    })