通过Cypress JS进行分页测试 [英] Pagination testing via cypress JS

问题描述

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

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

推荐答案

一个没有别名、异步函数等的简单示例，只使用递归和单个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标记来禁用Get按钮，该标记在每一页上都会被检查。使用此功能，无论您有3页还是33页，如果使用...

隐藏了一些数字，都没有关系

引用：https://glebbahmutov.com/blog/cypress-recurse/

这篇关于通过Cypress JS进行分页测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！