英文:
Cypress: Verify value of multiple <td> in same row on Table
问题
I noticed an issue in your code. You have a typo in the variable name "staus." It should be "status." Here's the corrected code:
verifyRowValue(class, items, status) {
const secondTd = cy.get('table').find('tbody tr').find('td:nth-child(3)');
const span = secondTd.find('span');
const classToCheck = 'Birds'; // Corrected variable name
const itemsToVerify = ['Eagle', 'Duck', 'Parrot']; // Corrected variable name
const statusToVerify = 'BLue'; // Corrected variable name
const type = status === 'Rare' ? 'Red' : 'BLue';
if (span.contains(classToCheck)) {
const tr = secondTd.closest('tr');
// Check 4th <td>
tr.find('td').eq(3)
.find('span').invoke('text').then(text => {
const spanText = text.trim();
for (let item of itemsToVerify) { // Corrected "in" to "of"
expect(spanText).to.include(item);
}
}).then(() => { // Check 5th <td>
tr.find('td').eq(4)
.find('span').invoke('text')
.then(selType => {
expect(selType).to.eq(type);
});
});
}
}
The corrections include using the correct variable names and fixing the loop from for (let item in items) to for (let item of itemsToVerify) for iterating through the itemsToVerify array.
英文:
I tried to verify the value in [Item] and [Status] columns based on [Class] column value as below table.
Detail is I find <tr> contain value of 3rd <td> 'Birds' then verify items = ['Eagle', 'Duck', 'Parrot'] and staus = 'BLue'
Here is HTML of the row I will check.
<tr class="animal">
<td>
<div>
<i aria-hidden="true"
class="theme--light">
</i>
<input
aria-checked="false" role="checkbox" type="checkbox" value="">
</div>
</td>
<td>
<div>2</div>
</td>
<td>
<div class="text-truncate">
<span>
Birds
</span>
</div>
<span><!----></span>
</td>
<td>
<div class="text-truncate"><span><!---->
Eagle , Duck , Parrot
</span></div>
<span><!----></span></td>
<td><span class="blue--text">BLue</span></td>
</tr>
Here my code:
verifyRowValue(class, items, status) {
const secondTd = cy.get('table').find('tbody tr').find('td:nth-child(3)')
const span = secondTd.find('span');
const class= 'Birds';
const items = ['Eagle', 'Duck', 'Parrot'];
const staus= 'Normal';
const type = status === 'Rare' ? 'Red' : 'BLue';
if (span.contains(class)) {
const tr = secondTd.closest('tr')
//Check 4th <td>
tr.find('td').eq(3)
.find('span').invoke('text').then(text => {
const spanText = text.trim();
for (let item in items) {
expect(spanText).to.includes(items[item])
}
}).then(() => { // => Check 5th <td>
tr.find('td').eq(4)
.find('span').invoke('text')
.then(selType => {
expect(selType).to.eq(type);
});
})
}
}
I run verify 4th <td> ok, but 5th <td> is failed.
Maybe I used then() in the wrong way?
答案1
得分: 4
你忘了在第五列上使用.trim()。
.then(selType => {
expect(selType.trim()).to.eq(type);
});
英文:
You forgot to use .trim() on column 5.
.then(selType => {
expect(selType.trim()).to.eq(type);
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论