Cómo capturar capturas de pantalla de páginas de producto para revisiones de disputas de precios

Scrapeless Agent Browser representa páginas de producto para la captura de capturas de pantalla, y Scrapeless Residential Proxies admite la recolección específica por ubicación donde las ofertas del escaparate varían según el mercado.

Definir la pregunta que la captura de pantalla debe responder

Una captura de pantalla de una página de producto ayuda a un revisor a determinar qué oferta mostró un escaparate dentro de un contexto de navegador registrado. Debe responder quién estaba vendiendo el artículo, qué variante estaba seleccionada, qué precio era visible y si el comprador necesitaba una membresía, cupón o cantidad mínima. Si la disputa se refiere al precio anunciado, el registro debe identificar la superficie de visualización. Un precio visto después de pasos de compra pertenece a una categoría de evidencia diferente.

Un monto en dólares recortado tiene poco contexto. Dos precios adyacentes podrían representar precios de oferta y de lista. Un recuadro de oferta puede mostrar a otro vendedor después de que cambie la región de entrega. Una página de zapatos podría mostrar un precio inicial antes de seleccionar una talla. Defina primero las preguntas en el formulario de revisión. Luego haga que la captura muestre los elementos necesarios para responderlas.

Use el Vocabulario de oferta para condiciones comerciales para estructurar el registro auxiliar. Una captura de pantalla muestra píxeles en un punto del flujo de trabajo. Los campos extraídos hacen que esos píxeles sean más fáciles de buscar. Ambos deben compartir un ID de captura, y ninguno debe editarse directamente para corregir una etiqueta de revisión. Registre las correcciones en una decisión de revisión separada.

Configurar un contexto de captura reproducible

Registre la URL de destino, la URL final, la región prevista, el mercado observado, la moneda, las dimensiones del viewport, la configuración regional y el intervalo de captura. Agregue los identificadores de vendedor y variante cuando la página los proporcione. Si una sesión aprobada comienza con configuraciones de mercado o entrega conocidas, registre las configuraciones que importan para la disputa. Deje las credenciales, cookies y detalles de cuenta personal fuera del manifiesto.

Use un viewport coherente cuando la revisión compare imágenes entre capturas. Los diseños móvil y de escritorio pueden mover las condiciones de la oferta a pestañas o colapsar la información del vendedor. Una captura de pantalla móvil es útil cuando el precio en disputa se mostró en móvil. Una captura de escritorio separada puede mostrar las divulgaciones en una disposición diferente, con su propia marca de tiempo y contexto.

Use Scrapeless Residential Proxies cuando una captura autorizada necesite enrutamiento específico por región. Un proxy puede seleccionar la ubicación de red. La sesión del navegador aún necesita que el escaparate muestre la moneda y la región de entrega previstas. Registre un desajuste como un desajuste y manténgalo separado de la evidencia principal.

Capturar la oferta resuelta en Playwright

Una captura de pantalla debe seguir a una comprobación de la oferta seleccionada exacta. La API de captura de pantalla de Playwright admite capturas de página y de localizadores. Use una captura acotada cuando una sola región contenga el precio y sus calificadores. Use una captura más amplia cuando el vendedor o la condición de compra estén fuera del panel de la oferta. Capture la vista original antes de derivar una copia recortada para un ticket o presentación.

Instale Playwright en un proyecto de Node.js con un runtime de Chromium. Comience con un fixture controlado de página de producto. El ejemplo asume un cuadro combinado de talla, una sección de oferta resuelta, una etiqueta de variante seleccionada y un precio. Reemplace esos selectores con controles verificados para su escaparate. Una ejecución en la nube requiere una cuenta de Scrapeless y la conexión de navegador compatible.

async function captureOffer(page, targetUrl, variant, filePath) {
  await page.goto(targetUrl, { waitUntil: 'domcontentloaded' });
  const offer = page.getByTestId('offer-panel');
  await offer.getByRole('combobox', { name: 'Size' }).selectOption(variant);
  const committed = offer.locator('[data-state="ready"]').filter({
    has: page.getByTestId('selected-variant').getByText(variant, { exact: true })
  });
  await committed.waitFor({ state: 'visible' });
  await committed.getByTestId('offer-price').waitFor({ state: 'visible' });

  const before = await committed.innerText();
  const startedAt = new Date().toISOString();
  const bytes = await committed.screenshot({ animations: 'disabled' });
  const finishedAt = new Date().toISOString();
  const after = await committed.innerText();
  if (before !== after) throw new Error('Offer changed during capture');

  const { createHash } = require('node:crypto');
  const { writeFile } = require('node:fs/promises');
  const sha256 = createHash('sha256').update(bytes).digest('hex');
  await writeFile(filePath, bytes, { flag: 'wx' });
  return { url: page.url(), variant, startedAt, finishedAt, text: after, sha256 };
}

En el fixture controlado de zapatos, seleccionar M cambia el panel a USD 45.00 antes de la captura. La función escribe la imagen bajo una ruta de archivo única proporcionada por el llamador y devuelve su digest y texto. El ejemplo compara el texto del panel antes y después de la captura de pantalla para detectar un cambio visible durante la captura. En una tienda en vivo, amplíe la comprobación de preparación para incluir vendedor, moneda, disponibilidad y estado de divulgación según sea necesario. Un digest de los bytes exactos ayuda a detectar cambios posteriores en ese archivo.

Vincular la imagen y los campos extraídos al mismo evento

Un manifiesto de revisión debe describir el alcance de la captura de pantalla, el inicio y el fin de la captura, la URL de origen y los valores visibles. Use marcas de tiempo RFC 3339 para mantener coherente la interpretación de zonas horarias. Defina un momento de observación dentro del intervalo registrado según su flujo de trabajo, y mantenga el momento de una acción posterior del revisor en un registro separado.

Usar un algoritmo documentado del Secure Hash Standard para calcular el resumen cuando almacenes la imagen original. El resumen verifica que un archivo coincide con los bytes que has resumido previamente. Registra por separado el origen y los controles de recopilación para establecer cómo se produjo la imagen. Restringe las escrituras en el almacén de evidencias y da a los revisores acceso de solo lectura a través de tu sistema de casos.

Cuando una captura de pantalla contiene un identificador de cliente, dirección o información de sesión no relacionada, restringe el acceso al original y crea una versión redactada para la revisión general. Etiqueta la derivada con el ID de captura de origen y su propio resumen. Establece un periodo de retención basado en el proceso de revisión y la política. Cuando exista una disputa formal, coordina los requisitos de retención con el equipo responsable.

Pide a un revisor que reconstruya un evento sin acceso a la sesión original del navegador. Debería poder decir en qué moneda mostraba precios la tienda, qué partes de la captura de pantalla contienen las condiciones de la oferta y si el contexto capturado coincide con el caso. Si tiene que deducir el vendedor a partir de un nombre de archivo, añade el campo de vendedor o amplía la captura. Mantén los detalles no relacionados fuera de la copia para revisión.

Gestionar la deriva del escaparate y las pruebas incompletas

Las capturas de pantalla deben tener estados explícitos de captura completa, variante poco clara, desajuste de mercado y no disponible. Una página intersticial, un muro de inicio de sesión o una pantalla de consentimiento pueden producir un archivo de imagen sin mostrar la oferta. Marca esa evidencia como incompleta para que un revisor pueda ver el motivo. Si la tienda rediseña el panel, actualiza las reglas de preparación y compara las imágenes resultantes con los casos conocidos.

Las páginas de producto pueden actualizarse mientras el navegador realiza una captura de pantalla. Una comparación de antes y después detecta algunos cambios. Prefiere una señal de preparación más sólida si la tienda expone un identificador de oferta comprometido o una versión de estado, y guarda un intervalo de captura en lugar de implicar un solo instante. Conserva una segunda imagen cuando un cambio observado sea en sí mismo relevante para el caso.

Usa Agent Browser para ejecutar capturas automatizadas mediante scripts en la nube. La managed web automation solution se ajusta a flujos de trabajo que necesitan seleccionar opciones y esperar a la oferta renderizada. Para capturas repetidas en distintos escaparates, combínala con la proxy solution for regional price monitoring. El Playwright connection walkthrough explica el transporte del navegador, y Scrapeless pricing ayuda a estimar la carga de trabajo tras medir la diferencia entre ejecuciones de solo texto y capturas de evidencias.

Dar a los revisores una oferta reconstruible

Empieza con un escenario en disputa que tu equipo pueda reproducir en una página de prueba aprobada. Confirma la variante y la moneda, captura la oferta con suficiente contexto y adjunta un original inmutable y un manifiesto al caso. Un revisor debería poder encontrar el original, ver por qué el recopilador lo seleccionó y determinar si representa la disputa.