Cómo rastrear colecciones de productos con desplazamiento infinito con Playwright

Scrapeless Agent Browser ejecuta sesiones en la nube impulsadas por Playwright, y Scrapeless Residential Proxies proporcionan rutas dirigidas por ubicación para trabajos de colecciones elegibles.

Identifica qué carga la siguiente página de la colección

Una colección de productos con desplazamiento infinito pide más ítems cuando el usuario alcanza un disparador, que puede ser el borde de la página, un elemento centinela o la parte inferior de un contenedor anidado. La especificación de Intersection Observer describe cómo una página puede observar que un objetivo cruce un límite de viewport o de contenedor. DevTools puede ayudarte a identificar qué elemento realmente se desplaza y si una solicitud fetch sigue a esa acción. Compruébalo también después de un cambio de filtro. Búsqueda, ordenación y filtros de stock pueden iniciar cada uno una colección separada.

Busca primero una fuente estructurada permitida. Un feed propiedad de la tienda o un endpoint de paginación compatible puede exponer directamente un cursor, un identificador de ítem estable y una marca de finalización. Conserva cualquier filtro que defina la colección. Cuando la propia experiencia del usuario sea el objetivo, usa el navegador para ver cómo se carga el siguiente lote y qué estado le indica al cliente que la colección terminó. Trata los datos obtenidos de cada superficie de acuerdo con el alcance acordado con el propietario.

La altura aparente de la página puede ser engañosa. Una lista virtualizada mantiene un pequeño conjunto de tarjetas montadas y las recicla a medida que el usuario se desplaza. Su altura puede reservarse desde el principio. En ese caso, la señal de progreso es un ID de ítem recién observado o un cursor de lote, y la señal de finalización proviene de la aplicación. La posición de la última fila visible es solo una pista.

Requisitos previos e instalación

Usa un entorno Node.js con Playwright y Chromium. Añade el paquete Playwright a un proyecto pequeño, instala su navegador Chromium o usa un ejecutable de Chromium configurado, y empieza con un fixture de escaparate que controles. En una integración real, inspecciona el marcado en busca de IDs de tarjeta duraderos y una señal de finalización. Los IDs de prueba del ejemplo son atributos del fixture. Se espera que cambien cuando adaptes la función a una tienda real.

Usa Playwright locators para limitar los elementos de producto a la colección. Un selector de enlaces amplio puede incluir navegación, tarjetas editoriales y carruseles de recomendaciones. Prefiere un ID de producto inmutable en la tarjeta o un patrón de URL verificado. Conserva el enlace original como evidencia y normaliza los componentes de la URL solo bajo reglas conocidas. El URL Standard describe el comportamiento del navegador al analizar y serializar URLs.

Recopila cada lote antes de que salga del DOM

Lee las tarjetas actuales en un mapa indexado por un ID estable antes de mover la posición de desplazamiento. Almacena el título mostrado y la URL de producto resuelta junto con el ID. Cuando una tarjeta reaparece porque el usuario se desplaza hacia atrás, el mapa conserva una fila de descubrimiento para ese producto. Si múltiples variantes aparecen intencionadamente como tarjetas separadas, usa una clave que represente la unidad de descubrimiento deseada.

El siguiente ejemplo se ejecuta contra un fixture de escaparate controlado con un panel desplazable, un marcador de lote, dos tarjetas de producto montadas en secuencia y un marcador de finalización explícito. Usa el mismo patrón con selectores específicos de la tienda después de confirmar permisos y el comportamiento de paginación. Una sesión en vivo de Agent Browser requiere una cuenta de Scrapeless y la configuración de conexión descrita en el 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()] };
}

El fixture devuelve los IDs de ítem A y B con un estado de completado después de que la primera tarjeta se elimine del DOM. El marcador de lote del ejemplo es un detalle de implementación del fixture. Para una tienda que operes, una solicitud exitosa vinculada al mismo filtro y cursor puede servir como una señal de progreso útil una vez que se rendericen las tarjetas correspondientes. Un cambio retrasado debería producir un resultado acotado de falta de progreso. Ese resultado deja la lista parcial disponible para su inspección.

Avanza el contenedor de desplazamiento correcto

La siguiente acción debe dirigirse al elemento responsable de cargar más tarjetas. Una colección incrustada en un modal o en un panel de categoría puede ignorar el desplazamiento de la ventana. En el ejemplo, pasar el ratón por encima del panel sitúa la entrada de la rueda sobre la región correcta. Usa un incremento de desplazamiento que preserve la superposición entre filas montadas y mide si te pierdes IDs entre pasos. Los grids virtualizados pueden omitir tarjetas intermedias cuando el salto es demasiado grande.

Observa los indicadores de carga y distingue una colección vacía cargada de un renderizado que nunca ha producido tarjetas. Un estado vacío intencional puede ser un resultado completo con cero productos. Un esqueleto, un desafío de acceso, un diálogo de consentimiento o un selector roto deberían generar un resultado explicativo. Amplía el fixture para cubrir esos caminos antes de tratar los resultados vacíos como correctos.

Un botón de "cargar más" necesita una acción diferente pero usa el mismo modelo de progreso. Selecciona el botón dentro de la colección, haz clic una vez y luego espera al nuevo lote o al estado de finalización. Evita la inactividad global como condición de finalización. Solicitudes de larga duración fuera del grid pueden permanecer activas mientras la colección visible ya está lista.

Rastrea la integridad a través de filtros y almacena los cambios

Un rastreo se completa para su configuración de colección y su ventana observada. Almacena la categoría solicitada, mercado, parámetros de ordenación y filtro, URL final, conteo descubierto, motivo de finalización y versión del recolector. Si existe un conteo de resultados anunciado, regístralo como una comparación separada. Una tienda puede cambiar mientras se ejecuta el trabajo, por lo que una discrepancia puede reflejar rotación del catálogo o visualización duplicada, así como un defecto del recolector.

Mantén el descubrimiento independiente de la extracción de ofertas. Una tarjeta de colección puede representar una familia de productos y mostrar un precio inicial. Pasa identificadores de descubrimiento y enlaces estables a un trabajador de página de detalle separado que resuelva vendedor, variante, precio y stock. El recorrido de scraping de desplazamiento infinito cubre más patrones de paginación, y la solución de monitoreo de precios para comparaciones regionales es relevante cuando el conjunto de productos descubiertos depende del mercado.

Prueba la paginación con una colección pequeña que tenga identidades esperadas conocidas. Agrega un fixture donde el número de nodos montados permanezca constante entre lotes. Luego ejercita un marcador final ausente y un lote detenido. Compara el estado devuelto y los IDs de ítems con los datos del fixture. Agrega pruebas específicas de filtros si el mismo adaptador cubre una categoría y sus resultados de búsqueda.

Mueve la ejecución del navegador a la nube cuando sea necesario

Un recolector de Playwright puede ejecutarse en un navegador local o en Scrapeless Agent Browser. El inicio rápido de Agent Browser Playwright muestra la configuración de conexión compatible para sesiones remotas. Usa la solución Agent Browser para sitios web dinámicos para planificar la capacidad cuando cada colección necesita controles renderizados y una secuencia de eventos de entrada. Mantén el estado del rastreo y su último lote aceptado en tu aplicación.

Usa Residential Proxies cuando la geografía sea necesaria para una observación autorizada, y verifica el mercado que la tienda realmente muestra. Una región fijada no especifica la ordenación ni el filtro de la colección. Almacena esas configuraciones de forma independiente y mantén cada ejecución por mercado aislada cuando las cookies puedan afectar el catálogo. Estima el tiempo de navegador en la nube y el tráfico de proxy frente a Scrapeless pricing después de medir trabajos completos y parciales en la misma muestra.

Informa lo que el rastreo realmente vio

Usa marcadores de progreso explícitos y conserva un mapa de ítems estable. Coloca el motivo de finalización junto a las URLs descubiertas para que un trabajo posterior pueda distinguir una colección completa de un resultado parcial. Comienza con una categoría conocida y agrega fuentes solo después de que el fixture cubra virtualización, una colección vacía y un cargador detenido.