El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este módulo, exploraremos las mejores prácticas para utilizar TypeScript y Playwright de manera efectiva. Estas prácticas te ayudarán a escribir código más limpio, mantenible y eficiente, lo cual es crucial para proyectos de automatización de pruebas a gran escala.

Mejores Prácticas de TypeScript

Usa Tipos Estrictos

Habilita el modo estricto: Asegúrate de que el modo estricto esté habilitado en tu archivo tsconfig.json. Esto te ayudará a detectar errores potenciales en tiempo de compilación.
```
{
  "compilerOptions": {
    "strict": true
  }
}
```

Aprovecha las Interfaces y Tipos

Define interfaces para objetos complejos: Esto mejora la legibilidad y facilita el mantenimiento del código.
```
interface User {
  id: number;
  name: string;
  email: string;
}
```

Usa Genéricos para Funciones Reutilizables

Crea funciones genéricas: Esto permite que tus funciones trabajen con cualquier tipo de dato.
```
function identity<T>(arg: T): T {
  return arg;
}
```

Evita el Uso de `any`

Minimiza el uso de any: Utilizar any puede llevar a perder los beneficios de TypeScript. Siempre que sea posible, utiliza tipos más específicos.

Documenta tu Código

Usa comentarios JSDoc: Esto ayuda a otros desarrolladores (y a ti mismo en el futuro) a entender el propósito de tu código.

/**
 * Suma dos números.
 * @param a - El primer número.
 * @param b - El segundo número.
 * @returns La suma de a y b.
 */
function add(a: number, b: number): number {
  return a + b;
}

Mejores Prácticas de Playwright

Usa Selectores Robustamente

Prefiere selectores de datos: En lugar de usar selectores CSS complejos, utiliza atributos de datos personalizados para seleccionar elementos.
```
await page.click('[data-test-id="submit-button"]');
```

Sincronización y Esperas

Utiliza waitFor adecuadamente: Asegúrate de que tus pruebas esperen correctamente a que los elementos estén listos.
```
await page.waitForSelector('[data-test-id="result"]');
```

Organiza tu Código de Pruebas

Divide las pruebas en archivos y funciones: Mantén tus pruebas organizadas y evita archivos de prueba demasiado largos.
```
// test/login.test.ts
test('User can log in', async ({ page }) => {
  // Código de prueba
});
```

Usa Fixtures y Hooks

Configura y limpia el estado de las pruebas: Utiliza beforeEach y afterEach para preparar y limpiar el entorno de prueba.
```
test.beforeEach(async ({ page }) => {
  await page.goto('https://example.com/login');
});
```

Mantenibilidad y Reutilización

Crea funciones de ayuda: Si encuentras que estás repitiendo código, considera crear funciones de ayuda para encapsular la lógica común.

async function login(page: Page, username: string, password: string) {
  await page.fill('#username', username);
  await page.fill('#password', password);
  await page.click('#login-button');
}

Ejercicio Práctico

Ejercicio: Refactoriza el siguiente código de prueba para aplicar las mejores prácticas discutidas.

test('User can log in and see dashboard', async ({ page }) => {
  await page.goto('https://example.com');
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'password123');
  await page.click('#login-button');
  await page.waitForSelector('#dashboard');
  expect(await page.isVisible('#dashboard')).toBe(true);
});

Solución:

async function login(page: Page, username: string, password: string) {
  await page.fill('#username', username);
  await page.fill('#password', password);
  await page.click('#login-button');
}

test.beforeEach(async ({ page }) => {
  await page.goto('https://example.com');
});

test('User can log in and see dashboard', async ({ page }) => {
  await login(page, 'testuser', 'password123');
  await page.waitForSelector('#dashboard');
  expect(await page.isVisible('#dashboard')).toBe(true);
});

Conclusión

En esta sección, hemos cubierto las mejores prácticas para trabajar con TypeScript y Playwright. Al seguir estas prácticas, puedes mejorar la calidad y mantenibilidad de tu código, lo que es esencial para proyectos de automatización de pruebas exitosos. En el próximo módulo, exploraremos aplicaciones reales de Playwright para llevar tus habilidades al siguiente nivel.

Mejores Prácticas de TypeScript y Playwright