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

HOME

En aquest tema, aprendrem com gestionar el codi asíncron en Playwright utilitzant TypeScript. La programació asíncrona és essencial quan treballem amb operacions que poden trigar temps, com ara sol·licituds de xarxa o interaccions amb la interfície d'usuari. Playwright, com moltes altres biblioteques modernes, utilitza promeses i la sintaxi async/await per gestionar aquestes operacions de manera eficient.

Conceptes Clau

Promeses: Una promesa és un objecte que representa l'estat eventual d'una operació asíncrona. Pot estar pendent, complerta o rebutjada.
Async/Await: Sintaxi que permet escriure codi asíncron de manera que sembli sincrònic, millorant la llegibilitat i mantenibilitat del codi.
Operacions Asíncrones en Playwright: Inclou accions com navegar a una pàgina, esperar elements, i interactuar amb la interfície d'usuari.

Utilitzant Async/Await

Exemple Bàsic

Vegem un exemple bàsic de com utilitzar async/await en un script de Playwright:

import { chromium } from 'playwright';

(async () => {
  // Llença un navegador Chromium
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // Navega a una pàgina web
  await page.goto('https://example.com');

  // Espera que un element estigui visible
  await page.waitForSelector('h1');

  // Obté el text de l'element
  const headingText = await page.textContent('h1');
  console.log(`El text del títol és: ${headingText}`);

  // Tanca el navegador
  await browser.close();
})();

Explicació del Codi

Llançament del navegador: Utilitzem await chromium.launch() per iniciar el navegador de manera asíncrona.
Navegació a una pàgina: await page.goto('https://example.com') espera que la pàgina es carregui completament.
Esperar un element: await page.waitForSelector('h1') espera que l'element <h1> estigui present al DOM.
Obtenir text: await page.textContent('h1') obté el text de l'element <h1>.
Tancament del navegador: await browser.close() tanca el navegador de manera segura.

Exercicis Pràctics

Exercici 1: Navegació i Interacció

Crea un script que faci el següent:

Navega a https://example.com.
Espera que el títol de la pàgina estigui present.
Imprimeix el text del títol a la consola.
Tanca el navegador.

Solució

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.waitForSelector('h1');
  const headingText = await page.textContent('h1');
  console.log(`El text del títol és: ${headingText}`);
  await browser.close();
})();

Exercici 2: Interacció amb Formularis

Crea un script que:

Navegui a una pàgina amb un formulari.
Ompli els camps del formulari.
Submeti el formulari.
Esperi una resposta i imprimeixi un missatge de confirmació.

Solució

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/form');

  // Omplir el formulari
  await page.fill('#name', 'John Doe');
  await page.fill('#email', '[email protected]');

  // Submetre el formulari
  await page.click('#submit');

  // Esperar la resposta
  await page.waitForSelector('#confirmation');
  const confirmationText = await page.textContent('#confirmation');
  console.log(`Missatge de confirmació: ${confirmationText}`);

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

Errors Comuns i Consells

Oblidar await: Assegura't d'utilitzar await davant de les operacions asíncrones per evitar comportaments inesperats.
Gestió d'errors: Utilitza blocs try/catch per gestionar errors en operacions asíncrones i millorar la robustesa del teu codi.

Conclusió

En aquesta secció, hem après com gestionar codi asíncron en Playwright utilitzant TypeScript. La comprensió de async/await és fonamental per escriure scripts de prova eficients i llegibles. Amb aquests coneixements, estàs preparat per abordar operacions més complexes en els teus projectes de Playwright.

Gestionant Codi Asíncron

Conceptes Clau

Utilitzant Async/Await

Exemple Bàsic

Explicació del Codi

Exercicis Pràctics

Exercici 1: Navegació i Interacció

Solució

Exercici 2: Interacció amb Formularis

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