NodeJS 通过Cypress JS进行分页测试

myzjeezk  于 2023-06-29  发布在  Node.js
关注(0)|答案(2)|浏览(101)


我需要测试,当我选择一些模型车,结果,我只有该模型在所有页面。所以基本上我做分页测试。但是我做错了一些事情,它不会移动到另一个页面,虽然选择器是正确的。请告诉我我做错了什么。

findItem("AUDI")
   });
   async function findItem(value) {
       async function findInPage(index) {
           let found = false;
           cy.get("li.page-item:not(.page-pre):not(.page-next)").as("pages");
           await cy.get("@pages")
               .its("length")
               .then(async (len) => {
                   if (index >= len) {
                       return false;
                   } else {
                       await cy.get("@pages")
                           .eq(index)
                           .click();
                       await cy.get("table tr > td:nth-child(5) p")
                           .each(async ($itemNameEl, index) => {
                               const itemText = $itemNameEl.text().toUpperCase();
                               cy.log('item ', itemText);
                               if (itemText.includes(value)) {
                                   found = true;
                                   await cy.wrap($itemNameEl).eq(index);
                                   //cy.get('.chakra-text.css-0').should('include', value)
                                   cy.get('.css-1b4k5p > .chakra-text.css-0')
                                   .each(($el) => {
                                       expect($el.text().toUpperCase()).to.include(value)
                                    
                                   })
                                   return false;
                               }
                           })
                           .then(() => {
                               if (!found) {
                                   findInPage(++index);
                               }
                           });
                   }
               });
       }
       findInPage(0);
}
slmsl1lt

slmsl1lt1#

一个简单的例子,没有别名,异步函数等,只是使用递归和一个单独的NEXT PAGE按钮(我看到你在屏幕截图中)看起来像这样(测试和工作在bootstrap pagination示例上):

it('Some test', () => {
    cy.visit('/')
    const findInPage = () => {
        cy.get('li:has(a.page-link:has(span:contains(»)))').then((el) => {
            // do your test
            if (el.hasClass('disabled')) {
                // on last page, break out
                return
            }
            cy.wrap(el).click()
            findInPage()
        })
    }
    findInPage()
});

如何工作:查找表示单个分页下一页按钮的li元素,在 Bootstrap 中,它有一个子a标记,该标记又有一个子span标记,该标记包含一个图标»。一旦你到达最后一页,按钮得到的禁用添加.disabled类到li标记,这是检查每一页。使用这个方法,不管你有3页还是33页,也不管一些数字是用...隐藏的
参考:https://glebbahmutov.com/blog/cypress-recurse/

ruarlubt

ruarlubt2#

const nextPageArrow = '[aria-label="next page"]'
  const findInPage = () => {
    cy.get(nextPageArrow).then((el) => {
      if (el.hasClass('disabled')) {
        return
      }
      cy.intercept('POST', '**/v1/getrecords*').as('records')
      cy.wrap(el).click()
      cy.wait('@records')
      findInPage()
    })
  }
  findInPage()

相关问题