web-scraping - 用 Cypress 抓取无限滚动 href

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(...)

我用谷歌搜索了一个页面，该页面具有一些类似的动态无限滚动行为，也许您可​​以将您的代码基于以下代码段:

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 请求完成。它本身不是很有用，但您明白了。