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

HOME

En aquest tema, explorarem com Playwright permet interceptar i simular sol·licituds de xarxa. Aquesta funcionalitat és crucial per a la creació de proves robustes i flexibles, ja que permet controlar i manipular el comportament de la xarxa durant les proves.

Conceptes Clau

Intercepció de Sol·licituds de Xarxa:
- Permet capturar i modificar sol·licituds HTTP/HTTPS.
- Útil per simular respostes de servidor, provar escenaris d'error, o verificar que les sol·licituds s'envien correctament.
Simulació de Respostes:
- Permet respondre a sol·licituds de xarxa amb dades simulades.
- Útil per provar com l'aplicació maneja diferents tipus de respostes sense necessitat de canviar el servidor backend.
Control de Xarxa:
- Possibilitat de retardar, bloquejar o modificar sol·licituds i respostes.
- Útil per simular condicions de xarxa adverses o per provar la gestió d'errors.

Exemple Pràctic

A continuació, veurem un exemple de com interceptar una sol·licitud de xarxa i simular una resposta utilitzant Playwright amb TypeScript.

Configuració del Projecte

Assegura't que tens Playwright instal·lat al teu projecte. Si no, pots instal·lar-lo amb:

npm install playwright

Exemple de Codi

import { chromium, Browser, Page } from 'playwright';

(async () => {
  const browser: Browser = await chromium.launch();
  const page: Page = await browser.newPage();

  // Interceptar sol·licituds de xarxa
  await page.route('**/api/data', async (route) => {
    // Simular una resposta personalitzada
    const mockResponse = {
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ data: 'Simulated data' }),
    };
    await route.fulfill(mockResponse);
  });

  // Navegar a la pàgina que fa la sol·licitud
  await page.goto('https://example.com');

  // Aquí podries afegir codi per verificar que la pàgina maneja correctament la resposta simulada

  await browser.close();
})();

Explicació del Codi

page.route: Aquesta funció s'utilitza per interceptar sol·licituds de xarxa. El primer argument és un patró que coincideix amb les URL de les sol·licituds que vols interceptar.
route.fulfill: Aquesta funció permet respondre a la sol·licitud amb una resposta simulada. Pots especificar l'estat, el tipus de contingut i el cos de la resposta.

Exercici Pràctic

Objectiu: Interceptar una sol·licitud de xarxa i simular una resposta d'error 404.

Crea un script de Playwright que intercepti una sol·licitud a una API específica.
Simula una resposta amb un estat 404 i un missatge d'error.
Verifica que l'aplicació maneja correctament l'error.

Solució

import { chromium, Browser, Page } from 'playwright';

(async () => {
  const browser: Browser = await chromium.launch();
  const page: Page = await browser.newPage();

  // Interceptar sol·licituds de xarxa
  await page.route('**/api/data', async (route) => {
    // Simular una resposta d'error 404
    const mockResponse = {
      status: 404,
      contentType: 'application/json',
      body: JSON.stringify({ error: 'Resource not found' }),
    };
    await route.fulfill(mockResponse);
  });

  // Navegar a la pàgina que fa la sol·licitud
  await page.goto('https://example.com');

  // Aquí podries afegir codi per verificar que la pàgina maneja correctament l'error 404

  await browser.close();
})();

Errors Comuns i Consells

Patró de URL Incorrecte: Assegura't que el patró de la URL a page.route coincideix correctament amb les sol·licituds que vols interceptar.
No Tancar el Navegador: Recorda sempre tancar el navegador amb browser.close() per evitar fuites de memòria.

Conclusió

La intercepció de xarxa i la simulació són eines poderoses en Playwright que permeten crear proves més completes i realistes. Amb aquestes tècniques, pots simular una àmplia varietat de condicions de xarxa i verificar que la teva aplicació respon correctament a diferents escenaris. En el següent tema, explorarem com emular dispositius i geolocalització per a proves encara més detallades.

Intercepció de Xarxa i Simulació

Conceptes Clau

Exemple Pràctic

Configuració del Projecte

Exemple de Codi

Explicació del Codi

Exercici Pràctic

Solució

Errors Comuns i Consells

Conclusió

Dramaturg amb TypeScript: De Principiant a Avançat

Mòdul 1: Introducció a Playwright i TypeScript

Mòdul 2: Començant amb Playwright

Mòdul 3: Fonaments de Playwright i TypeScript

Mòdul 4: Funcions Avançades de Playwright

Mòdul 5: Estratègies d'Automatització de Proves

Mòdul 6: Tècniques Avançades de TypeScript

Mòdul 7: Aplicacions Reals de Playwright

Mòdul 8: Conclusió del Curs i Propers Passos