Como rastrear coleções de produtos com rolagem infinita com Playwright

O Scrapeless Agent Browser executa sessões em nuvem conduzidas por Playwright, e os Scrapeless Residential Proxies fornecem rotas segmentadas por localização para trabalhos de coleta elegíveis.

Identifique o que carrega a próxima página da coleção

Uma coleção de produtos com rolagem infinita pede mais itens quando o usuário alcança um gatilho, que pode ser a borda da página, um elemento sentinela ou o final de um contêiner aninhado. A especificação Intersection Observer descreve como uma página pode observar um alvo cruzando um limite de viewport ou de contêiner. As DevTools podem ajudar você a identificar qual elemento realmente rola e se uma busca (fetch) ocorre após essa ação. Verifique também depois de uma mudança de filtro. Busca, ordenação e filtros de estoque podem cada um iniciar uma coleção separada.

Procure primeiro por uma fonte estruturada permitida. Um feed de propriedade da loja ou um endpoint de paginação compatível pode expor diretamente um cursor, um identificador de item estável e um sinal de término. Preserve quaisquer filtros que definam a coleção. Quando a própria experiência do usuário é o alvo, use o navegador para ver como o próximo lote é carregado e qual estado informa ao cliente que a coleção terminou. Trate os dados obtidos de cada superfície de acordo com o escopo acordado com o proprietário.

A altura aparente da página pode ser enganosa. Uma lista virtualizada mantém um pequeno conjunto de cards montados e os recicla conforme o usuário rola. Sua altura pode ser reservada desde o início. Nesse caso, o sinal de progresso é um novo ID de item observado ou cursor de lote, e o sinal de conclusão vem da aplicação. A posição da última linha visível é apenas uma pista.

Pré-requisitos e instalação

Use um ambiente Node.js com Playwright e Chromium. Adicione o pacote Playwright a um pequeno projeto, instale seu navegador Chromium ou use um executável Chromium configurado, e comece com um fixture de vitrine que você controla. Em uma integração real, inspecione o markup em busca de IDs de card duráveis e um sinal de conclusão. Os test IDs do exemplo são atributos do fixture. Espera-se que eles mudem quando você adaptar a função para uma loja real.

Use localizadores do Playwright para delimitar os elementos de produto à coleção. Um seletor amplo de links pode capturar navegação, cards editoriais e carrosséis de recomendação. Prefira um ID de produto imutável no card ou um padrão de URL verificado. Preserve o link original como evidência e normalize componentes de URL apenas sob regras conhecidas. O Padrão de URL descreve o comportamento do navegador de análise e serialização de URLs.

Colete cada lote antes que ele saia do DOM

Leia os cards atuais em um mapa indexado por ID estável antes de mover a posição de rolagem. Armazene o título exibido e a URL de produto resolvida com o ID. Quando um card reaparece porque o usuário rola de volta, o mapa retém uma linha de descoberta para aquele produto. Se múltiplas variantes aparecem intencionalmente como cards separados, use uma chave que represente a unidade de descoberta desejada.

O exemplo a seguir é executado contra um fixture de vitrine controlado com um painel rolável, um marcador de lote, dois cards de produto montados em sequência e um marcador de término explícito. Use o mesmo padrão com seletores específicos da loja após confirmar permissões e comportamento de paginação. Uma sessão ao vivo do Agent Browser requer uma conta Scrapeless e a configuração de conexão descrita no quickstart.

async function collect(page, targetUrl, maxRounds = 12) {
  await page.goto(targetUrl, { waitUntil: 'domcontentloaded' });
  const grid = page.getByTestId('collection');
  const cards = grid.locator('[data-product-id]');
  const scroller = page.getByTestId('scroll-pane');
  const seen = new Map();

  for (let round = 0; round < maxRounds; round += 1) {
    await cards.first().waitFor({ state: 'visible' });
    const batch = await cards.evaluateAll(nodes => nodes.map(node => ({
      id: node.getAttribute('data-product-id'),
      title: node.querySelector('a')?.textContent.trim(),
      url: node.querySelector('a')?.href
    })));
    for (const item of batch) {
      if (item.id && item.title && item.url) seen.set(item.id, item);
    }
    if (await page.getByTestId('collection-end').isVisible()) {
      return { status: 'complete', items: [...seen.values()] };
    }
    const batchId = await grid.getAttribute('data-batch');
    if (!batchId) throw new Error('Collection batch identifier is missing');
    await scroller.hover();
    await page.mouse.wheel(0, 240);
    try {
      await page.waitForFunction(previous => {
        const root = document.querySelector('[data-testid="collection"]');
        return root?.getAttribute('data-batch') !== previous;
      }, batchId, { timeout: 3000 });
    } catch (error) {
      if (error.name !== 'TimeoutError') throw error;
      return { status: 'no_progress', items: [...seen.values()] };
    }
  }
  return { status: 'round_limit', items: [...seen.values()] };
}

O fixture retorna os IDs de item A e B com um status de completo depois que o primeiro card é removido do DOM. O marcador de lote do exemplo é um detalhe de implementação do fixture. Para uma loja que você opera, uma requisição bem-sucedida vinculada ao mesmo filtro e cursor pode servir como um sinal útil de progresso assim que os cards correspondentes forem renderizados. Uma mudança atrasada deve resultar em um resultado limitado de nenhuma evolução. Esse resultado deixa a lista parcial disponível para inspeção.

Avance o contêiner de rolagem correto

A próxima ação deve ter como alvo o elemento responsável por carregar mais cards. Uma coleção incorporada em um modal ou painel de categoria pode ignorar a rolagem da janela. No exemplo, passar o mouse sobre o painel coloca a entrada da roda sobre a região correta. Use um incremento de rolagem que preserve a sobreposição entre as linhas montadas e meça se você perde IDs entre os passos. Grades virtualizadas podem pular cards intermediários quando o salto é muito grande.

Observe indicadores de carregamento e diferencie uma coleção vazia carregada de um render que nunca produziu cards. Um estado vazio intencional pode ser um resultado completo com zero produtos. Um esqueleto, desafio de acesso, diálogo de consentimento ou seletor quebrado deve gerar um resultado explicativo. Estenda o fixture para cobrir esses caminhos antes de tratar resultados vazios como saudáveis.

Um botão de carregar mais precisa de uma ação diferente, mas usa o mesmo modelo de progresso. Selecione o botão dentro da coleção, clique uma vez e então aguarde o novo lote ou o estado de término. Evite inatividade global como condição de conclusão. Requisições de longa duração fora da grade podem permanecer ativas enquanto a coleção visível já está pronta.

Acompanhe a Integridade Entre Filtros e Armazene Alterações

Um crawl é concluído para sua configuração de coleta e sua janela observada. Armazene a categoria solicitada, mercado, parâmetros de ordenação e filtro, URL final, contagem descoberta, motivo de conclusão e versão do coletor. Se existir uma contagem de resultados anunciada, registre-a como uma comparação separada. Uma vitrine pode mudar enquanto o job é executado, então uma incompatibilidade pode refletir rotatividade de catálogo ou exibição duplicada, bem como um defeito do coletor.

Mantenha a descoberta independente da extração de ofertas. Um card de coleção pode representar uma família de produtos e exibir um preço inicial. Passe IDs e links de descoberta estáveis para um worker separado de página de detalhes que resolva vendedor, variante, preço e estoque. O guia de scraping de infinite scroll cobre mais padrões de paginação, e a solução de monitoramento de preços para comparações regionais é relevante quando o conjunto de produtos descobertos depende do mercado.

Teste a paginação com uma coleção pequena que tenha identidades esperadas conhecidas. Adicione um fixture em que o número de nodes montados permaneça constante entre os lotes. Em seguida, exercite um marcador de fim ausente e um lote paralisado. Compare o status retornado e os IDs de itens com os dados do fixture. Adicione testes específicos de filtro se o mesmo adaptador cobrir uma categoria e seus resultados de busca.

Mova a Execução do Navegador para a Nuvem Quando Necessário

Um coletor Playwright pode ser executado em um navegador local ou no Scrapeless Agent Browser. O Agent Browser Playwright quickstart mostra a configuração de conexão compatível para sessões remotas. Use a Agent Browser solution for dynamic websites para planejar capacidade quando cada coleta precisar de controles renderizados e uma sequência de eventos de entrada. Mantenha o estado do crawl e seu último lote aceito em sua aplicação.

Use Residential Proxies quando a geografia for necessária para uma observação autorizada, e verifique o mercado que a vitrine realmente renderiza. Uma região fixada não especifica a ordenação ou o filtro da coleta. Armazene essas configurações de forma independente e mantenha cada execução por mercado isolada quando cookies puderem afetar o catálogo. Estime o tempo de navegador em nuvem e o tráfego de proxy em relação ao Scrapeless pricing após medir jobs concluídos e parciais na mesma amostra.

Relate o que o Crawl Realmente Observou

Use marcadores explícitos de progresso e mantenha um mapa de itens estável. Coloque o motivo de conclusão ao lado das URLs descobertas para que um job downstream consiga distinguir uma coleção completa de um resultado parcial. Comece com uma categoria conhecida e adicione fontes apenas depois que o fixture cobrir virtualização, uma coleção vazia e um loader paralisado.