En aquesta secció, explorarem els conceptes fonamentals de Playwright, una eina poderosa per a l'automatització de navegadors. Aquests conceptes són essencials per crear scripts de prova efectius i robustos. Assegura't de comprendre bé cada punt abans de passar als temes més avançats.
- Arquitectura de Playwright
Playwright és una biblioteca que permet controlar navegadors web mitjançant codi. Els seus components principals inclouen:
- Browser: Representa una instància del navegador. Playwright suporta múltiples navegadors com Chromium, Firefox i WebKit.
- Context: Un context de navegador és similar a una pestanya o finestra del navegador, però aïllat. Permet executar proves en paral·lel sense interferències.
- Page: Una pàgina dins d'un context. És l'objecte principal que utilitzaràs per interactuar amb el contingut web.
- Instal·lació i Configuració
Abans de començar a treballar amb Playwright, assegura't que està instal·lat correctament. Si encara no ho has fet, pots instal·lar-lo amb:
- Creant un Navegador i una Pàgina
Per començar a utilitzar Playwright, primer has de crear una instància del navegador i obrir una pàgina. Aquí tens un exemple bàsic:
import { chromium } from 'playwright';
(async () => {
// Inicia el navegador
const browser = await chromium.launch();
// Crea un nou context de navegador
const context = await browser.newContext();
// Obre una nova pàgina
const page = await context.newPage();
// Navega a una URL
await page.goto('https://example.com');
// Tanca el navegador
await browser.close();
})();Explicació del Codi
chromium.launch(): Inicia una nova instància del navegador Chromium.browser.newContext(): Crea un nou context de navegador.context.newPage(): Obre una nova pàgina dins del context.page.goto('https://example.com'): Navega a la URL especificada.browser.close(): Tanca el navegador.
- Interactuant amb Elements de la Pàgina
Playwright proporciona una API rica per interactuar amb elements de la pàgina. Pots fer clic, escriure text, i molt més. Aquí tens un exemple de com fer clic en un botó:
Explicació del Codi
page.click('text=Submit'): Cerca un element que contingui el text "Submit" i fa clic en ell.
- Esperes i Sincronització
Les proves sovint necessiten esperar que certs elements estiguin disponibles o que es completi una acció. Playwright gestiona això amb esperes automàtiques, però també pots utilitzar esperes explícites:
Explicació del Codi
page.waitForSelector('text=Welcome'): Espera que un element amb el text "Welcome" estigui present a la pàgina.
Exercici Pràctic
Objectiu: Escriu un script que obri una pàgina, faci clic en un enllaç i verifiqui que una nova pàgina es carrega correctament.
Pas a Pas
- Inicia el navegador i obre una pàgina.
- Navega a
https://example.com. - Fes clic en un enllaç que porti a una altra pàgina.
- Verifica que la nova pàgina conté un element específic.
Solució
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://example.com');
await page.click('text=More information');
await page.waitForSelector('text=Example Domain');
console.log('Test passed: New page loaded successfully');
await browser.close();
})();Conclusió
Ara que has après els conceptes bàsics de Playwright, estàs preparat per començar a escriure scripts de prova més complexos. A mesura que avancis, recorda que la clau per a l'automatització efectiva és comprendre bé com interactuar amb els elements de la pàgina i gestionar les esperes de manera adequada. En el següent tema, explorarem com executar proves de Playwright.
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