如何在柏树测试中保持输入的重点

Question

我有一个文本框。当用户键入某个内容时，我会点击api并将一个项目列表<ul>插入DOM。关于文本框模糊，我将从DOM中删除<ul>。

it('Category search', () => {
cy.intercept('GET', `http://localhost:3000/categories/query**`, {fixture: 'categories.json'})
cy.visit(`http://localhost:3000/items`)
cy.clock()
cy.tick(2000)
cy.get('#category').click().type('o')
cy.get('ul[class*="category-list"]').its('length').should('eq', 10)
});

Cypress测试找不到cy.get('ul[class*="category-list"]')。因为，当赛柏到达这一行时，我的文本框失去了焦点。因此，ul标签自动删除。

有人能帮忙吗？提前谢谢。

Answer 1

输入可能没有失去焦点。将.focused((添加到测试中以检查

cy.get('#category').type('o');     // Note, docs say type() has click() built in
cy.focused().then(console.log);    // check the dev console to see which element has focus

测试<ul>的方式看起来不正确，通常有一个<ul>和几个<li>，所以请尝试

cy.get('#category').type('o');     
cy.focused().then($el => {
expect($el[0].id).to.eq('category');     // confirm focus still on input
cy.get('ul[class*="category-list"]')     // just to be sure, repeats if testing too early
.should('be.visible');                 // (maybe delayed by api call)
cy.get('ul[class*="category-list"] li')  // get the <li> not the <ul>
.should('have.length', 10);            // repeats if list not yet filled
// Note need to avoid "its('length')"
// for retry of <li> query to work
);