El botón debe destacar con más claridad. Tras el cambio, la tarjeta de oferta se ve bien en una pantalla grande. Sin embargo, en una vista estrecha, el botón más ancho saca el precio de la fila. El cambio fue pequeño; su efecto afecta a toda una relación entre elementos de contenido.
Playwright documenta las comparaciones de capturas de pantalla con imágenes de referencia y señala cómo el entorno de captura puede influir en ellas. El método ofrece una buena ocasión para un ejercicio propio. No toda diferencia de píxeles es un error, y una imagen idéntica todavía no demuestra que la acción sea correcta. Lo que importa es qué expectativa visible quieres examinar con la comparación.
Anota qué debe cambiar y qué debe mantenerse
Para nuestra tarjeta ficticia, la intención es: el botón se reconoce con más facilidad, mientras que el título, el precio y la nota necesaria siguen siendo totalmente legibles. Esta frase contiene el cambio deseado y sus límites. «Mejora el botón» sería mucho más difícil de valorar.
Prepara tres casos de contenido: un título corto, un título largo y un título con una condición adicional. Usa los mismos datos antes y después del cambio. Una comparación con un texto de relleno cómodo puede ocultar justo la falta de espacio que aparece después con el contenido real.
Elige también al menos una vista ancha y una estrecha. Estos anchos forman parte de la pregunta y no son una afirmación general sobre todos los dispositivos. Un caso estrecho comprueba si la relación se mantiene cuando hay poco espacio.
La referencia necesita un entorno controlado
El navegador, el sistema operativo, las fuentes y otras condiciones pueden afectar a la captura. Por eso, una imagen previa de otro entorno es una referencia más débil. Mantén constante el entorno relevante y documéntalo junto con la prueba.
Un breve ejemplo propio de Playwright para una página de prueba preparada podría tener este aspecto. Presupone un proyecto ya configurado con una baseURL adecuada, y no se ha ejecutado para este artículo:
import { test, expect } from '@playwright/test';
test('Offer card stays readable when narrow', async ({ page }) => {
await page.setViewportSize({ width: 390, height: 844 });
await page.goto('/angebot-demo');
await expect(page).toHaveScreenshot('angebot-390.png');
});Los nombres de la página y del archivo pertenecen al ejemplo didáctico. La comparación de capturas de pantalla documentada contrasta una captura con la referencia. El trabajo editorial importante sigue siendo la interpretación: ¿la diferencia es intencionada o desplaza un elemento de contenido necesario?
Una desviación es, ante todo, una observación
No mires la imagen de diferencias solo alrededor del botón. Revisa el precio, los saltos de línea y la nota contigua. Quizá el botón más grande sea correcto, mientras que el diseño a su lado necesita más flexibilidad. Quizá la supuesta mejora solo tenía sentido en la vista ancha.
No aumentes por reflejo la desviación permitida hasta que la prueba vuelva a estar en verde. Eso cambiaría la pregunta sin entender el problema. Una tolerancia puede estar justificada, pero tiene que ajustarse al tipo de diferencias observadas.
Del mismo modo, una nueva referencia es una decisión. Un nuevo estado intencionado puede verse distinto. Solo debería convertirse en la base de comparación después de valorar su contenido. De lo contrario, un efecto secundario inadvertido se declara sin más la nueva imagen objetivo.
La apariencia sigue necesitando el recorrido real de clics
Un botón idéntico puede desencadenar la acción equivocada. Así que añade un recorrido a la comprobación visual: llega a él con el teclado, actívalo y observa el estado de destino esperado. Una captura de pantalla y una prueba de comportamiento responden a preguntas distintas.
Si haces el ejercicio en un sitio de WordPress propio, una copia de trabajo en KENJTEC WordPressBuilder ai puede mantener el estado que estás cambiando separado del sitio en vivo. La comparación de Playwright la ejecutas con tu propia herramienta fuera de KENJTEC. Trasladar los cambios desde la copia de trabajo es entonces un paso aparte, para el que hay que elegir el alcance adecuado.
La utilidad de las vistas de comparación fijas no consiste en impedir los cambios. Hacen visible si la mejora deseada respeta a sus vecinos. Solo la expectativa, la observación y el manejo real juntos permiten un juicio fundado sobre el nuevo botón.
Fuentes y estado
Investigación y documentación a fecha de 25 de octubre de 2026. Comparaciones visuales.
