Les proves de cap a cap (end-to-end, E2E) són un tipus de prova que verifica el funcionament complet d'una aplicació des del principi fins al final. Amb Playwright, podem automatitzar aquestes proves per assegurar-nos que totes les parts del sistema funcionen correctament quan es combinen.
Objectius d'Aprenentatge
En aquesta secció, aprendràs a:
- Comprendre el concepte de proves de cap a cap.
- Configurar i executar proves E2E amb Playwright.
- Escriure scripts de prova que simulin el comportament de l'usuari.
- Analitzar els resultats de les proves per identificar problemes.
Què són les Proves de Cap a Cap?
Les proves de cap a cap tenen com a objectiu:
- Verificar el flux complet de l'aplicació: Des de la interfície d'usuari fins a la base de dades i altres serveis.
- Simular el comportament real de l'usuari: Inclou accions com fer clic, escriure, navegar entre pàgines, etc.
- Assegurar la integració correcta de tots els components: Comprovar que les diferents parts del sistema funcionen conjuntament sense problemes.
Configuració de Proves E2E amb Playwright
Instal·lació de Playwright
Abans de començar, assegura't que Playwright està instal·lat al teu projecte. Si no ho està, pots instal·lar-lo amb el següent comandament:
Estructura Bàsica d'un Script de Prova E2E
Un script de prova E2E amb Playwright pot semblar-se al següent:
import { chromium, Browser, Page } from 'playwright';
(async () => {
const browser: Browser = await chromium.launch();
const page: Page = await browser.newPage();
// Navega a la pàgina inicial
await page.goto('https://exemple.com');
// Simula accions de l'usuari
await page.click('text=Iniciar Sessió');
await page.fill('input[name="usuari"]', 'exemple');
await page.fill('input[name="contrasenya"]', 'contrasenya123');
await page.click('text=Enviar');
// Verifica que l'usuari ha iniciat sessió correctament
const text = await page.textContent('h1');
console.assert(text === 'Benvingut, exemple!', 'L'inici de sessió ha fallat');
await browser.close();
})();Explicació del Codi
- Importació de Mòduls: Importem
chromium,Browser, iPagede Playwright per crear i controlar el navegador. - Llançament del Navegador: Utilitzem
chromium.launch()per iniciar una instància del navegador. - Navegació i Accions: Utilitzem
page.goto()per navegar a la pàgina desitjada ipage.click(),page.fill()per simular accions de l'usuari. - Verificació: Utilitzem
page.textContent()per obtenir el text d'un element iconsole.assert()per verificar que el resultat és l'esperat. - Tancament del Navegador: Finalment, tanquem el navegador amb
browser.close().
Exercici Pràctic
Objectiu
Escriu un script de prova E2E que:
- Navegui a una pàgina de registre.
- Ompli el formulari de registre amb dades fictícies.
- Submeti el formulari.
- Verifiqui que l'usuari ha estat registrat correctament.
Solució
import { chromium, Browser, Page } from 'playwright';
(async () => {
const browser: Browser = await chromium.launch();
const page: Page = await browser.newPage();
// Navega a la pàgina de registre
await page.goto('https://exemple.com/registre');
// Omple el formulari de registre
await page.fill('input[name="nom"]', 'Usuari Exemple');
await page.fill('input[name="email"]', '[email protected]');
await page.fill('input[name="contrasenya"]', 'contrasenya123');
await page.click('text=Registrar-se');
// Verifica que el registre ha estat correcte
const text = await page.textContent('.missatge-exit');
console.assert(text === 'Registre complet!', 'El registre ha fallat');
await browser.close();
})();Errors Comuns i Consells
- Selector Incorrecte: Assegura't que els selectors utilitzats (
input[name="nom"], etc.) són correctes i existeixen a la pàgina. - Sincronització: Si les proves fallen per problemes de sincronització, considera utilitzar
page.waitForSelector()per esperar que els elements estiguin disponibles abans d'interactuar amb ells. - Depuració: Utilitza
page.screenshot()per capturar l'estat de la pàgina en punts crítics de la prova per ajudar a la depuració.
Conclusió
Les proves de cap a cap amb Playwright són una eina poderosa per assegurar que la teva aplicació funciona correctament des de la perspectiva de l'usuari. Amb la capacitat de simular interaccions reals, pots detectar i corregir problemes abans que arribin als usuaris finals. En el següent tema, explorarem les proves visuals amb Playwright per assegurar que la interfície d'usuari es mostra correctament en diferents escenaris.
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