El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, explorarem les millors pràctiques per treballar amb TypeScript i Playwright. Aquestes pràctiques t'ajudaran a escriure codi més net, mantenible i eficient, tant per a la teva automatització de proves com per al desenvolupament general amb TypeScript.

Millors Pràctiques de TypeScript

Utilitza Tipus Estrictes
- Activa el mode estricte a tsconfig.json per assegurar-te que estàs utilitzant tipus estrictes. Això ajuda a detectar errors potencials durant el temps de compilació.
```
{
  "compilerOptions": {
    "strict": true
  }
}
```
Evita l'Ús de any
- Utilitza tipus específics en lloc de any per mantenir la seguretat de tipus. Si necessites un tipus genèric, considera l'ús de generics.
```
function processData<T>(data: T): T {
  return data;
}
```
Utilitza Interfícies i Tipus
- Defineix interfícies i tipus per estructurar millor el teu codi i fer-lo més llegible.
```
interface User {
  id: number;
  name: string;
  email: string;
}
```
Organitza el Codi en Mòduls
- Divideix el codi en mòduls i fitxers separats per millorar la seva organització i mantenibilitat.
```
// user.ts
export interface User {
  id: number;
  name: string;
}

// main.ts
import { User } from './user';
```
Utilitza Decoradors amb Precaució
- Els decoradors poden ser potents, però també poden complicar el codi. Utilitza'ls quan realment aportin valor.

Millors Pràctiques de Playwright

Utilitza Selectors Robustos
- Evita selectors fràgils com els basats en classes o identificadors generats automàticament. Opta per atributs data-testid o text visible.
```
await page.click('[data-testid="submit-button"]');
```
Gestiona el Temps d'Espera de Manera Eficaç
- Utilitza les funcions d'espera de Playwright per gestionar el temps d'espera de manera eficient i evitar proves fràgils.
```
await page.waitForSelector('text="Welcome"');
```

Organitza les Proves en Suites

Agrupa proves relacionades en suites per millorar la seva organització i facilitar la seva execució.

import { test, expect } from '@playwright/test';

test.describe('User Authentication', () => {
  test('should login successfully', async ({ page }) => {
    // Test code here
  });
});

Utilitza Fixtures i Hooks
- Implementa fixtures i hooks per configurar i netejar l'estat abans i després de les proves.
```
test.beforeEach(async ({ page }) => {
  await page.goto('https://example.com/login');
});
```
Depura Proves amb Eines de Playwright
- Utilitza les eines de depuració de Playwright, com el mode de traça i el mode de depuració, per identificar i solucionar problemes de manera eficient.

Exercici Pràctic

Exercici: Escriu una prova de Playwright que verifiqui que un usuari pot iniciar sessió correctament en una aplicació fictícia. Utilitza les millors pràctiques esmentades anteriorment.

Solució:

import { test, expect } from '@playwright/test';

test.describe('User Authentication', () => {
  test('should login successfully', async ({ page }) => {
    await page.goto('https://example.com/login');
    await page.fill('[data-testid="username-input"]', 'testuser');
    await page.fill('[data-testid="password-input"]', 'password123');
    await page.click('[data-testid="submit-button"]');
    await page.waitForSelector('text="Welcome, testuser"');
    expect(await page.textContent('h1')).toBe('Welcome, testuser');
  });
});

Conclusió

En aquest tema, hem explorat les millors pràctiques per treballar amb TypeScript i Playwright. Seguint aquestes pràctiques, podràs escriure codi més robust i mantenible, millorant l'eficiència i la qualitat de les teves proves i aplicacions. A mesura que avancis en el teu aprenentatge, intenta aplicar aquestes pràctiques en els teus projectes per obtenir els millors resultats.

Millors Pràctiques de TypeScript i Playwright