javascript Cypress获取多个DIV的内容,并组成一个长字符串

holgip5t  于 2022-10-30  发布在  Java
关注(0)|答案(2)|浏览(217)

我有一些这样的div:

<div class="customer-data-column">
   <h3>Title:</h3>
   <div>Name Lastname</div>
   <div>123 Address xxx yyy</div>
   <div>Chicago XY 33056</div>
   <div>Country name</div>
</div>

此内容由以下人员生成:

{customerData.replaceAll("/r", "").split("\n").map(item => <div key={item}>{item}</div>)}

此数据来自redux。在控制台日志(来自redux数据)中,地址显示为:

Name Lastname\n123 Address xxx yyy\nChicago XY 33056\nCountry name

我想在Cypress中检查这个地址是否正确,与redux中的地址相同。我需要某种方法将div的内容合并到一个字符串中,并在每个div之间添加\n
我想我可以这样开始:

cy.get('.customer-data-column').should($title => {
      const store = Cypress.store.getState();

  const reduxPath = store.customerData;

  expect("not sure what to put here... how to merge").to.equals(reduxPath)

有人能帮忙吗?
===编辑
我几乎是这样做的:我在内部div中添加了一个类,因此它们呈现为:

<div class="customer-data-column">
   <h3>Title:</h3>
   <div class="address-row">Name Lastname</div>
   <div class="address-row">123 Address xxx yyy</div>
   <div class="address-row">Chicago XY 33056</div>
   <div class="address-row">Country name</div>
</div>

还有考验:

cy.get('.address-row').then($divList => {
    const textArray = Cypress.$.makeArray($divList).map(el => el.innerText)
    const actual = textArray.join(textArray, '\n') // use join to array of strings into single string
    expect(actual).to.eql(billToAddress)
  })

但是,它仍然失败,并显示以下消息:
Assert预期姓名姓氏,23地址xxx yyy,芝加哥XY 33056,国家名称23地址xxx yyy姓氏,23地址xxx yyy,芝加哥XY 33056,国家名称7楼姓氏,23地址xxx yyy,芝加哥XY 33056,国家名称NY布鲁克林11210姓名姓氏,23地址xxx yyy,芝加哥XY 33056,国家/地区名称国家/地区名称与姓名完全相同\n23地址xxx yyy\n7th Floor\nBrooklyn NY 11210\n国家/地区名称
编辑2:我找到的解决方案是这样的:

.then(users => {
  const billToAddress = users.response.body.filter(el => el.orderNumber === '3-331877')[0]
    .billTo

  cy.get('.address-row').each((item, index) => {
    cy.log(cy.wrap(item).should('contain.text', billToAddress.split('\n')[index]))
  })
})

当然,如果有人有更好的方法来完成这个测试,我愿意学习更多,编写更好的代码。

axkjgtzd

axkjgtzd1#

如果Cypress函数产生多个元素,我们可以连接这些元素的文本来创建字符串。

cy.get('.custom-data-column').find('div').then(($divList) => {
  const store = Cypress.store.getState();
  const reduxPath = store.customerData;
  const textArray = $divList.map((x) => x.text()); // get the text values as an array
  const actual = textArray.join(textArray, '\n'); // use join to array of strings into single string
  expect(actual).to.eql(reduxPath);
});
waxmsbnn

waxmsbnn2#

如果你制作了一个存储数据的数组,一个.each()循环可以比较它们。

const store = Cypress.store.getState()
const reduxData = store.customerData    // expect 'Name Lastname\n123 Address xxx yyy\nChicago XY 33056\nCountry name'
const reduxDataArray = reduxData.split('\n')

cy.contains('.customer-data-column', 'Title:')
  .find('div')                         // only divs inside '.customer-data-column'
  .each(($div, index) => {
    expect($div.text()).to.eq(reduxDataArray[index])
  })

从其他评论来看,cy.get('.custom-data-column')似乎不足以隔离您需要处理的HTML。
也许cy.contains('.customer-data-column', 'Title:')更好。

一次显示所有文本

在这种特殊情况下,您可以通过全局删除\n来一次测试所有文本

const store = Cypress.store.getState()
const reduxData = store.customerData    // expect 'Name Lastname\n123 Address xxx yyy\nChicago XY 33056\nCountry name'
const reduxAllTexts = reduxData.replace(/\n/g, '')

cy.contains('.customer-data-column', 'Title:')
  .find('div')
  .invoke('text')
  .should('eq', reduxAllTexts)

相关问题