Соскоб бесконечной прокрутки - PullRequest
Новая
       30

Соскоб бесконечной прокрутки

0 голосов
/ 24 июня 2019

Я использую Cypress, чтобы очистить сайт с бесконечной прокруткой.

Сайт создан с использованием React, и после того, как пользователь вводит поисковый термин во ввод, по мере прокрутки на странице появляется больше товаров, соответствующих введенному поисковому запросу.

Код, который я получил до сих пор, открывает URL-адрес, переходит к URL-адресу и собирает все ссылки, которые в настоящее время видны.

Мне интересно, как я могу сказать кипарису прокрутить вниз, медленно собирая все hrefs, когда он прокручивает страницу, и, наконец, записывая hrefs в 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
    })
  });
});

1 Ответ

1 голос
/ 25 июня 2019

Вы не детализировали то, что вы пробовали до сих пор, и какие у вас проблемы с прокруткой в ​​настоящее время, но я предполагаю, что прокрутки вниз по окну и добавления некоторой логики для ожидания, пока больше ссылок не станет видно, достаточно. Эта команда прокручивает все окно вниз до 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. Не очень полезно само по себе, но вы поняли идею.

...