如何测试柏树中某一元素的孩子

Question

如果我有这些元素

<div class="diffed-chunks">
<div class="diffed-chunk diffed-chunk--pending"></div>
<div class="diffed-chunk">1</div>
<div class="diffed-chunk">2</div>
</div>

有没有比这样做更简单的测试方法？

cy.get('.diffed-chunks .diffed-chunk').as('diffed-chunks');
cy.get('@diffed-chunks')
.eq(0)
.should('have.class', 'diffed-chunk--pending');
cy.get('@diffed-chunks')
.eq(1)
.should('have.text', '1');
cy.get('@diffed-chunks')
.eq(2)
.should('have.text', '2')

Answer 1

这是一个意见问题，但我喜欢的模式是

• 定义期望的数组
• 按未测试的属性选择所有子项
• 将实际数组与预期数组进行比较

const expected = [
{
text: '',
classes: 'diffed-chunk diffed-chunk--pending',
},
{
text: '1',
classes: 'diffed-chunk',
},
{
text: '2',
classes: 'diffed-chunk',
},
];
const getText = el => el.textContent.trim()
it('should have expected text', () => {
cy.get('.diffed-chunks div').then(els => { 
const texts = [...els].map(getText)
expect(texts).to.deep.eq(expected.map(x => x.text))
})
});
const getClasses = el => el.className
it('should have classes', () => {
cy.get('.diffed-chunks div').then(els => { 
const classes = [...els].map(getClasses)
expect(classes).to.deep.eq(expected.map(x => x.classes))
})
});