Question

我正在使用赛普拉斯（Cypress）刮擦无限滚动的网站。

该站点由React组成，当用户在输入中输入搜索词后，随着滚动，更多产品出现在与输入搜索词匹配的页面上。

到目前为止，我得到的代码打开一个URL，导航到该URL并收集所有当前可见的href。

我想知道如何才能使cypress进一步向下滚动，在其向下滚动页面时慢慢收集所有href，最后将href写入json。

这是我到目前为止的代码，减去滚动：

const arrayOfHrefs = [];

describe('Get links', () => {
  it.only('should do a product search', () => {
    cy.visit('https://www.testsite.com');
    cy.wait(5000);
    cy.get('#product_input').type('socks');
    cy.contains('socks').click(); // renders new content on the client side
    cy.wait(10000); 
    cy.get('a').each(($a) => {
      const link = $a.attr('href');
      arrayOfHrefs.push(link); // grabs all visible links and pushes them to array
    }).then(() => {
      console.log(arrayOfHrefs)
      cy.writeFile('data.json', { urls: arrayOfHrefs }) // writes array to disk
    })
  });
});

Answer 1

您没有详细介绍到目前为止已经尝试过的内容以及有关滚动的当前问题，但是我假设向下滚动窗口，然后添加逻辑以等待更多的链接可见就足够了。此命令在5000毫秒内将整个窗口向下滚动到底部：

cy.scrollTo('bottom', {duration: 5000})

请注意，它不是从像这样的元素上链接起来的：

cy.get('#some-scrollable-element').scrollTo(...)

我用Google搜索了一个具有类似动态无限滚动行为的页面，也许您可以将代码基于以下片段：

describe('', () => {
        before('', () => {
            cy.server()
            cy.route('GET', '**/blog/page/**').as('blog')
        })

        it('', () => {
            let numberOfChildren = 4
            cy.visit('http://www.drewleague.com/blog/')
            for (let i = 0; i < 5; i++) {
                cy.get('.posts--desktop')
                    .children()
                    .then(children => {
                        cy.wrap(children)
                            .its('length')
                            .should('eq', numberOfChildren)
                    })
             cy.scrollTo('bottom', {duration: 5000})
                 .wait('@blog')
                 .then(() => numberOfChildren += 4)
            }
        })
    })

此代码将页面向下滚动到底部5次，在每次迭代中，我们都会检查动态添加的子代数，我们还要等到xhr请求完成。单独使用它不是很有用，但是您可以理解。

用赛普拉斯刮取无限滚动href

1 个答案: