如何在柏树测试期间保持输入的重点答案

【问题标题】：How to keep an input focused during a cypress test如何在柏树测试期间保持输入的重点
【发布时间】：2021-05-28 10:07:39
【问题描述】：

我有一个文本框。当用户输入内容时，我会点击 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)
      });

赛普拉斯测试找不到cy.get('ul[class*="category-list"]')。因为，当 cypress 到达这一行时，我的文本框失去了焦点。所以，ul 标签会自动移除。

有人可以帮忙吗？提前致谢。

【问题讨论】：

尝试将其链接到 .should() 中，例如：cy.get('#category').click().type('o').should(()=>{cy.get('ul[class*="category-list"]').its('length').should('eq', 10)})。还请调整问题的标题，以免误导。我建议：如何在柏树测试中保持输入的重点@
@RosenMihaylov 文本框仍然失去焦点:(。感谢您的编辑建议
@Siva 你能发布你得到的错误吗？
我在这里找到了建议的 JS 解决方案：stackoverflow.com/questions/15670277/…

标签： javascript focus cypress e2e-testing

【解决方案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

);

【讨论】：