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

【问题标题】：Scraping infinite scroll href with Cypress用赛普拉斯刮取无限滚动href
【发布时间】：2019-06-24 16:37:05
【问题描述】：

我正在使用 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
    })
  });
});

【问题讨论】：

标签： web-scraping infinite-scroll cypress

【解决方案1】：

您没有详细说明到目前为止您已经尝试过什么以及您目前在滚动方面遇到了什么问题，但我认为向下滚动窗口然后添加一些逻辑以等待更多链接变得可见就足够了。此命令将整个窗口向下滚动到底部超过 5000 毫秒：

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

请注意，它没有与以下元素链接：

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

我搜索了一个页面，该页面具有一些类似的动态无限滚动行为，也许您可以将您的代码基于以下 sn-p：

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

【讨论】：