赛普拉斯：如何将文本列表转换为数组？

Question

我有一个 HTML 这样的代码

<ul class="menu-main-nav-container">
    <li>Home</li>
    <li>About</li>
        <ul>
            <li>About1</li>
            <li>About2</li>
            <li>About3</li>
        </ul>
    <li>Contact</li>
    <li>Links</li>
</ul>

我想要实现的是获取 li's 的所有文本并将其转换为数组，以便我可以使用每个数组与其他值进行比较。但扭曲的是 li 的 不断变化

到目前为止我在 cypress 上有这段代码

it('List to array', () => {
        cy.get('*[class^="menu-main-nav-container"]').eq(0).then($text => {
            const text = $text.text().toString().slice('')
            cy.log(text[0])
})
})

它现在只记录文本 'H' 但我想要实现的是 text = ["Home", "About", "Contact", Links" ] 这样我就可以编写 text[0] 我可以使用

我现在很困

Answer 1

你可以这样做：

it('List to array', () => {
  var list = []

  cy.get('ul[class="menu-main-nav-container"] > li')
    .each(($ele) => {
      list.push($ele.text().trim())
    })
    .then(() => {
      cy.log(list[0]) //prints Home
    })
})

或者，您也可以这样做：

var list = []
cy.get('ul[class="menu-main-nav-container"] > li')
  .then(($ele) => {
    const list = Array.from($ele, (el) => el.innerText)
  })
  .then(() => {
    cy.log(list[0]) //prints Home
  })

Answer 2

一种方法，您可以利用 Cypress 选择多个元素，然后将元素转换为文本

cy.get('.menu-main-nav-container')
  .find('li')   // gets all li including sub-menu ones!
  .then($els => {
    return Array.from($els).map(el => el.innerText)
  })
  .should('deep.eq', ['Home', 'About', 'About1', 'About2', 'About3', 'Contact', 'Links'])

或仅限顶级

cy.get('.menu-main-nav-container')
  .children('li')   // gets main menu options
  .then($els => {
    return Array.from($els).map(el => el.innerText)
  })
  .should('deep.eq', ['Home', 'About', 'Contact', 'Links'])

Docs reference

赛普拉斯：如何将文本列表转换为数组？

Cypress: How to convert list of text into arrrays?

arrays

cypress