En aquest projecte final, aplicaràs tots els coneixements adquirits al llarg del curs per construir una suite de proves completa utilitzant Playwright i TypeScript. Aquest projecte et permetrà consolidar les teves habilitats i preparar-te per a situacions reals d'automatització de proves.
Objectius del Projecte
- Desenvolupar una suite de proves que cobreixi funcionalitats clau d'una aplicació web.
- Implementar bones pràctiques d'organització i mantenibilitat del codi.
- Utilitzar característiques avançades de Playwright i TypeScript per millorar l'eficiència i l'efectivitat de les proves.
Requisits del Projecte
-
Configuració del Projecte:
- Crea un nou projecte de Node.js i instal·la Playwright i TypeScript.
- Configura el projecte per utilitzar TypeScript amb Playwright.
-
Estructura de la Suite de Proves:
- Organitza les proves en diferents fitxers i directoris segons les funcionalitats de l'aplicació.
- Utilitza fixtures i hooks per preparar l'entorn de proves.
-
Desenvolupament de Proves:
- Escriu proves per a les següents funcionalitats:
- Autenticació: Prova el procés de registre i inici de sessió.
- Navegació: Verifica que els enllaços i la navegació funcionin correctament.
- Interacció amb Formularis: Prova la validació i enviament de formularis.
- Interacció amb Elements Dinàmics: Gestiona elements que apareixen o desapareixen dinàmicament.
- Proves de Rendiment: Mesura el temps de càrrega de pàgines clau.
- Escriu proves per a les següents funcionalitats:
-
Execució i Depuració:
- Executa les proves en diferents navegadors i resol errors que puguin sorgir.
- Utilitza tècniques de depuració per identificar i solucionar problemes.
-
Optimització i Millores:
- Implementa execució paral·lela de proves per reduir el temps total d'execució.
- Utilitza tipus avançats de TypeScript per millorar la robustesa del codi.
Exemples de Codi
Configuració del Projecte
mkdir playwright-final-project cd playwright-final-project npm init -y npm install playwright typescript ts-node @types/node
Exemple de Prova d'Autenticació
import { chromium, Browser, Page } from 'playwright';
let browser: Browser;
let page: Page;
beforeAll(async () => {
browser = await chromium.launch();
page = await browser.newPage();
});
afterAll(async () => {
await browser.close();
});
test('Registre i inici de sessió', async () => {
await page.goto('https://example.com/register');
await page.fill('#username', 'usuari_test');
await page.fill('#password', 'contrasenya123');
await page.click('#register-button');
// Verifica que el registre ha estat correcte
expect(await page.textContent('.success-message')).toBe('Registre complet!');
await page.goto('https://example.com/login');
await page.fill('#username', 'usuari_test');
await page.fill('#password', 'contrasenya123');
await page.click('#login-button');
// Verifica que l'inici de sessió ha estat correcte
expect(await page.url()).toBe('https://example.com/dashboard');
});Consells i Errors Comuns
- Gestió d'Errors: Assegura't de capturar i gestionar errors adequadament per evitar que les proves es bloquegin.
- Sincronització: Utilitza esperes explícites per gestionar elements dinàmics i evitar errors de sincronització.
- Mantenibilitat: Mantén el codi net i ben documentat per facilitar futures modificacions.
Conclusió
Aquest projecte final t'ha permès aplicar els coneixements adquirits al llarg del curs en un escenari pràctic. Has après a construir una suite de proves completa, utilitzant Playwright i TypeScript, i a implementar tècniques avançades per optimitzar les proves. Ara estàs preparat per aplicar aquestes habilitats en projectes reals i continuar el teu camí d'aprenentatge en l'automatització de proves.
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