通过 cypress JS 进行分页测试答案

【问题标题】：Pagination testing via cypress JS通过 cypress JS 进行分页测试
【发布时间】：2021-10-08 06:00:54
【问题描述】：

我需要测试一下，当我选择某款车型的时候，结果我所有页面都只有那个车型。所以基本上我做分页测试。但是我做错了，尽管选择器是正确的，但它并没有移动到另一个页面。请告诉我我做错了什么。

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);
}

【问题讨论】：

标签： node.js pagination cypress

【解决方案1】：

一个没有别名、异步函数等的简单示例，仅使用递归和单个 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元素，在引导情况下，它有子a标签，子标签有span标签，其中包含一个图标»。到达最后一页后，通过将 .disabled 类添加到在每个页面上检查的 li 标记来禁用按钮。使用它，如果您有 3 页或 33 页以及是否使用 ... 隐藏了某些数字，则无关紧要

参考：https://glebbahmutov.com/blog/cypress-recurse/

【讨论】：

好答案，但我建议在内部调用 findInPage() 之前进行检查，以确保下一页已完成加载。