赛普拉斯得到几个DIV的内容，并组成一个长字符串

Question

我有一些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 Lastnamen123 Address xxx yyynChicago XY 33056nCountry 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)
})

然而，它仍然失败了，并发出这样的消息：

断言预期的Name LastnameName Lastname，23 Address xxx yyy，ChicagoXY 33056，国家/地区名称23地址xxx yyyName姓氏，23地址xxxyyy，Chicago XY 33056，国家/地区名称第7层姓名姓氏，23地址xxxyyy，芝加哥XY 33056，国名布鲁克林NY 11210姓名，23地址xxx yyy，芝加哥XY 33056，国家名称国家名称深入equal Name姓氏\n23地址xxx yyy\n7th Floor\nBrooklyn NY11210\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]))
})
})

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

Answer 1

如果您制作一个存储数据数组，.each()循环可以对它们进行比较。

const store = Cypress.store.getState()
const reduxData = store.customerData    // expect 'Name Lastnamen123 Address xxx yyynChicago XY 33056nCountry 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 Lastnamen123 Address xxx yyynChicago XY 33056nCountry name'
const reduxAllTexts = reduxData.replace(/n/g, '')
cy.contains('.customer-data-column', 'Title:')
.find('div')
.invoke('text')
.should('eq', reduxAllTexts)

Answer 2

如果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);
});