通过 cypress JS 进行分页测试

Question

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

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

Answer 1

一个没有别名、异步函数等的简单示例，仅使用递归和单个下一页按钮（我在屏幕截图中看到）将如下所示（经过测试并正在处理引导分页示例）：

\n

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

\n

这是如何工作的：查找li代表单个分页下一页按钮的元素，在引导程序情况下，它具有子a标签，该子span标签具有包含 icon 的子标签\xc2\xbb。到达最后一页后，通过向每个页面上检查的标记添加.disabled类来禁用该按钮。li使用此功能，无论您有 3 页还是 33 页，以及是否隐藏了某些数字，都没有关系...

\n

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

\n