En aquesta secció, aprendràs a crear el teu primer script de Playwright utilitzant TypeScript. Aquest és un pas fonamental per començar a automatitzar proves amb Playwright. Assegura't de tenir el teu entorn de desenvolupament configurat correctament abans de començar.
- Instal·lació de Playwright
Abans de crear el teu primer script, necessitem assegurar-nos que Playwright està instal·lat al teu projecte. Si encara no ho has fet, pots instal·lar Playwright amb el següent comandament:
Aquest comandament inicialitzarà un nou projecte de Playwright i instal·larà totes les dependències necessàries.
- Creació d'un Script Bàsic
Un cop Playwright estigui instal·lat, podem començar a escriure el nostre primer script. Crearem un script senzill que obrirà un navegador, navegarà a una pàgina web i farà una captura de pantalla.
Exemple de Codi
Crea un fitxer anomenat example.spec.ts i afegeix el següent codi:
import { chromium } from 'playwright';
(async () => {
// Inicia un navegador Chromium
const browser = await chromium.launch();
// Crea una nova pàgina
const page = await browser.newPage();
// Navega a la pàgina web
await page.goto('https://example.com');
// Fa una captura de pantalla
await page.screenshot({ path: 'example.png' });
// Tanca el navegador
await browser.close();
})();Explicació del Codi
- Importació de Chromium: Utilitzem
import { chromium } from 'playwright';per importar el navegador Chromium, que és un dels navegadors suportats per Playwright. - Llançament del Navegador:
const browser = await chromium.launch();inicia una nova instància del navegador. - Creació d'una Pàgina:
const page = await browser.newPage();crea una nova pàgina dins del navegador. - Navegació a una URL:
await page.goto('https://example.com');carrega la pàgina web especificada. - Captura de Pantalla:
await page.screenshot({ path: 'example.png' });fa una captura de pantalla de la pàgina i la desa com aexample.png. - Tancament del Navegador:
await browser.close();tanca el navegador per alliberar recursos.
- Executar el Script
Per executar el teu script, utilitza el següent comandament a la terminal:
Aquest comandament executarà el teu script utilitzant Playwright Test Runner.
- Exercici Pràctic
Objectiu: Modifica el script per navegar a una altra pàgina web de la teva elecció i desa la captura de pantalla amb un nom diferent.
Solució
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://www.wikipedia.org');
await page.screenshot({ path: 'wikipedia.png' });
await browser.close();
})();Conclusió
Has creat i executat el teu primer script de Playwright amb èxit! Aquest és el primer pas per automatitzar proves amb Playwright. En el següent tema, aprofundirem en els conceptes bàsics de Playwright per entendre millor com funciona aquesta eina.
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