En aquest tema, aprendrem com organitzar les proves de manera eficient utilitzant Playwright i TypeScript. Una bona organització de les proves és essencial per mantenir un projecte escalable i fàcil de mantenir. Explorarem com estructurar les proves, crear suites de proves i utilitzar bones pràctiques per assegurar-nos que el nostre conjunt de proves sigui robust i fàcil de gestionar.
Conceptes Clau
-
Estructura de Proves:
- Organitzar les proves en fitxers i directoris lògics.
- Utilitzar convencions de nomenclatura clares per als fitxers de prova.
-
Suites de Proves:
- Agrupar proves relacionades en suites per facilitar la seva execució i manteniment.
- Utilitzar funcions de configuració i desconfiguració per preparar l'entorn de prova.
-
Bones Pràctiques:
- Escriure proves independents i idempotents.
- Evitar dependències entre proves per assegurar la seva fiabilitat.
Estructura de Proves
Organització de Fitxers i Directoris
És important mantenir una estructura clara i coherent per als fitxers de prova. Una estructura recomanada podria ser:
- Unit Tests: Proves que verifiquen la funcionalitat de components individuals.
- Integration Tests: Proves que verifiquen la interacció entre múltiples components.
- End-to-End (E2E) Tests: Proves que simulen el comportament de l'usuari en l'aplicació completa.
Convencions de Nomenclatura
Utilitza noms descriptius per als fitxers de prova que reflecteixin el que estan provant. Per exemple, login.test.ts per a proves relacionades amb el procés d'inici de sessió.
Creació de Suites de Proves
Playwright permet agrupar proves en suites utilitzant la funció describe. Això ajuda a organitzar proves relacionades i aplicar configuracions comunes.
Exemple de Suite de Proves
import { test, expect } from '@playwright/test';
test.describe('Suite de Proves de Login', () => {
test.beforeEach(async ({ page }) => {
await page.goto('https://example.com/login');
});
test('Prova d\'inici de sessió amb credencials vàlides', async ({ page }) => {
await page.fill('#username', 'usuari');
await page.fill('#password', 'contrasenya');
await page.click('button[type="submit"]');
await expect(page).toHaveURL('https://example.com/dashboard');
});
test('Prova d\'inici de sessió amb credencials invàlides', async ({ page }) => {
await page.fill('#username', 'usuari');
await page.fill('#password', 'incorrecte');
await page.click('button[type="submit"]');
await expect(page.locator('.error-message')).toHaveText('Credencials incorrectes');
});
});Explicació del Codi
describe: Agrupa les proves en una suite. En aquest cas, totes les proves relacionades amb el procés de login.beforeEach: Executa una funció abans de cada prova dins de la suite. Aquí, s'utilitza per navegar a la pàgina de login abans de cada prova.- Proves individuals: Cada prova verifica un cas específic del procés de login.
Bones Pràctiques
- Proves Independents: Cada prova ha de poder executar-se de manera independent sense dependre de l'estat deixat per altres proves.
- Idempotència: Les proves han de produir el mateix resultat cada vegada que s'executen amb les mateixes dades d'entrada.
- Configuració i Desconfiguració: Utilitza
beforeEachiafterEachper preparar i netejar l'entorn de prova.
Exercici Pràctic
Exercici: Crea una suite de proves per verificar el procés de registre d'un usuari en una aplicació web. Assegura't d'incloure proves per a casos d'èxit i error.
Solució
import { test, expect } from '@playwright/test';
test.describe('Suite de Proves de Registre', () => {
test.beforeEach(async ({ page }) => {
await page.goto('https://example.com/register');
});
test('Prova de registre amb dades vàlides', async ({ page }) => {
await page.fill('#email', '[email protected]');
await page.fill('#password', 'contrasenyaSegura');
await page.click('button[type="submit"]');
await expect(page).toHaveURL('https://example.com/welcome');
});
test('Prova de registre amb email ja registrat', async ({ page }) => {
await page.fill('#email', '[email protected]');
await page.fill('#password', 'contrasenyaSegura');
await page.click('button[type="submit"]');
await expect(page.locator('.error-message')).toHaveText('Email ja registrat');
});
});Conclusió
En aquesta secció, hem après com organitzar les proves i suites de proves utilitzant Playwright i TypeScript. Hem vist com estructurar els fitxers de prova, crear suites de proves i aplicar bones pràctiques per assegurar la qualitat i mantenibilitat del nostre conjunt de proves. Aquestes habilitats són fonamentals per a qualsevol projecte d'automatització de proves. En el següent tema, explorarem com utilitzar fixtures i hooks per millorar encara més la nostra estratègia 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