我有一些这样的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]))
})
})
当然,如果有人有更好的方法来完成这个测试,我愿意学习更多,编写更好的代码。
2条答案
按热度按时间axkjgtzd1#
如果Cypress函数产生多个元素,我们可以连接这些元素的文本来创建字符串。
waxmsbnn2#
如果你制作了一个存储数据的数组,一个
.each()
循环可以比较它们。从其他评论来看,
cy.get('.custom-data-column')
似乎不足以隔离您需要处理的HTML。也许
cy.contains('.customer-data-column', 'Title:')
更好。一次显示所有文本
在这种特殊情况下,您可以通过全局删除
\n
来一次测试所有文本