如何在jquery或cypress中选择和显示同一类中的所有项和元素?

62lalag4  于 2021-09-13  发布在  Java
关注(0)|答案(3)|浏览(397)

我试图使用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>
omqzjyyz

omqzjyyz1#

你可以像这样迭代每个商店的商店和书籍,

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
wa7juj8i

wa7juj8i2#

这将获得第一个存储区中的所有元素:

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())
})
ppcbkaq5

ppcbkaq53#

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

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
    })

相关问题