Les proves visuals són una part essencial de l'automatització de proves, ja que permeten verificar que la interfície d'usuari d'una aplicació es mostra correctament en diferents dispositius i navegadors. En aquest tema, aprendrem com utilitzar Playwright per realitzar proves visuals efectives.
Què són les Proves Visuals?
Les proves visuals consisteixen en comparar la representació visual d'una pàgina web o aplicació amb una imatge de referència per detectar canvis inesperats. Aquestes proves són útils per assegurar-se que els canvis en el codi no afectin negativament l'aparença de l'aplicació.
Avantatges de les Proves Visuals
- Detecció de regressions visuals: Identifica canvis no desitjats en la interfície d'usuari.
- Compatibilitat entre navegadors: Assegura que l'aplicació es veu correctament en diferents navegadors.
- Millora de la qualitat del producte: Ajuda a mantenir una experiència d'usuari consistent.
Configuració de Proves Visuals amb Playwright
Instal·lació de Playwright i Llibreries Necessàries
Abans de començar, assegura't que Playwright està instal·lat en el teu projecte. Si no ho està, pots instal·lar-lo amb el següent comandament:
També necessitaràs una llibreria per a la comparació d'imatges, com pixelmatch o resemblejs. Instal·lem pixelmatch:
Creant una Prova Visual Bàsica
A continuació, crearem una prova visual bàsica que captura una captura de pantalla d'una pàgina i la compara amb una imatge de referència.
import { test, expect } from '@playwright/test';
import fs from 'fs';
import pixelmatch from 'pixelmatch';
import { PNG } from 'pngjs';
test('Prova visual de la pàgina d\'inici', async ({ page }) => {
// Navega a la pàgina
await page.goto('https://example.com');
// Captura una captura de pantalla
const screenshot = await page.screenshot();
// Llegeix la imatge de referència
const referenceImage = fs.readFileSync('path/to/reference-image.png');
const referencePNG = PNG.sync.read(referenceImage);
// Compara les imatges
const { width, height } = referencePNG;
const diff = new PNG({ width, height });
const numDiffPixels = pixelmatch(
referencePNG.data,
screenshot,
diff.data,
width,
height,
{ threshold: 0.1 }
);
// Guarda la imatge de diferències si hi ha canvis
if (numDiffPixels > 0) {
fs.writeFileSync('path/to/diff-image.png', PNG.sync.write(diff));
}
// Assert que no hi ha diferències
expect(numDiffPixels).toBe(0);
});Explicació del Codi
- Captura de pantalla: Utilitzem
page.screenshot()per capturar l'estat actual de la pàgina. - Comparació d'imatges:
pixelmatchs'utilitza per comparar la captura de pantalla amb la imatge de referència. - Gestió de diferències: Si es detecten diferències, es genera una imatge de diferències per a la revisió manual.
Exercici Pràctic
Objectiu: Implementar una prova visual per a una pàgina web de la teva elecció.
- Selecciona una pàgina web que vulguis provar.
- Captura una imatge de referència manualment i desa-la en el teu projecte.
- Escriu una prova visual utilitzant el codi d'exemple anterior.
- Executa la prova i revisa els resultats.
Solució de l'Exercici
La solució dependrà de la pàgina web seleccionada. Assegura't que la imatge de referència estigui actualitzada i que les diferències detectades siguin revisades per assegurar que són canvis desitjats.
Errors Comuns i Consells
- Diferències de píxels menors: Ajusta el llindar de
pixelmatchsi detectes diferències menors no significatives. - Resolució de pantalla: Assegura't que les captures de pantalla es realitzen amb la mateixa resolució que la imatge de referència.
- Canvis dinàmics: Evita capturar elements dinàmics que poden canviar amb cada càrrega de pàgina.
Conclusió
Les proves visuals amb Playwright són una eina poderosa per assegurar la qualitat visual de les aplicacions web. Amb la configuració adequada i l'ús de llibreries de comparació d'imatges, pots detectar i corregir regressions visuals de manera eficient. En el següent tema, explorarem les proves de rendiment amb Playwright.
Dramaturg amb TypeScript: De Principiant a Avançat
Mòdul 1: Introducció a Playwright i TypeScript
- Què és Playwright?
- Configuració del Teu Entorn de Desenvolupament
- Introducció a TypeScript
- Sintaxi Bàsica de TypeScript
Mòdul 2: Començant amb Playwright
- Instal·lant Playwright
- Creant el Teu Primer Script de Playwright
- Comprenent els Conceptes Bàsics de Playwright
- Executant Proves de Playwright
Mòdul 3: Fonaments de Playwright i TypeScript
- Escrivint Proves en TypeScript
- Utilitzant Interfícies i Tipus de TypeScript
- Depurant Proves de Playwright
- Gestionant Codi Asíncron
Mòdul 4: Funcions Avançades de Playwright
- Treballant amb Selectors
- Gestionant Múltiples Pàgines i Frames
- Intercepció de Xarxa i Simulació
- Emulant Dispositius i Geolocalització
Mòdul 5: Estratègies d'Automatització de Proves
- Organitzant Proves i Suites de Proves
- Utilitzant Fixtures i Hooks
- Execució Paral·lela de Proves
- Integració Contínua amb Playwright
Mòdul 6: Tècniques Avançades de TypeScript
- Generics en TypeScript
- Tipus Avançats de TypeScript
- Decoradors de TypeScript
- Millors Pràctiques de TypeScript i Playwright
Mòdul 7: Aplicacions Reals de Playwright
- Proves de Cap a Cap amb Playwright
- Proves Visuals amb Playwright
- Proves de Rendiment amb Playwright
- Estudi de Cas: Implementant Playwright en un Projecte