En aquest tema, aprendrem com escriure proves utilitzant TypeScript amb Playwright. TypeScript és un superconjunt de JavaScript que afegeix tipat estàtic opcional, el que ens permet escriure codi més robust i mantenible. Combinat amb Playwright, podem crear proves automatitzades eficients i fiables.
Objectius d'Aprenentatge
- Comprendre com configurar un projecte de Playwright amb TypeScript.
- Aprendre a escriure proves bàsiques utilitzant TypeScript.
- Familiaritzar-se amb les bones pràctiques per escriure proves en TypeScript.
Configuració del Projecte
Abans de començar a escriure proves, assegurem-nos que el nostre entorn està correctament configurat.
- Inicialitzar un Projecte de Node.js
Primer, crea un nou directori per al teu projecte i inicialitza un projecte de Node.js:
- Instal·lar Playwright i TypeScript
Instal·la Playwright i TypeScript com a dependències del projecte:
- Configurar TypeScript
Crea un fitxer tsconfig.json per configurar TypeScript:
{
"compilerOptions": {
"target": "ESNext",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./dist"
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules"]
}
- Estructura del Projecte
Organitza el teu projecte amb la següent estructura:
playwright-typescript-tests/ │ ├── src/ │ └── tests/ │ └── example.test.ts ├── tsconfig.json └── package.json
Escriure la Primera Prova
Ara que el projecte està configurat, escrivim la nostra primera prova en TypeScript.
Exemple de Prova
Crea un fitxer example.test.ts dins de src/tests/ amb el següent contingut:
import { chromium, Browser, Page } from 'playwright';
describe('Example Test Suite', () => {
let browser: Browser;
let page: Page;
beforeAll(async () => {
browser = await chromium.launch();
page = await browser.newPage();
});
afterAll(async () => {
await browser.close();
});
test('should load the example page', async () => {
await page.goto('https://example.com');
const title = await page.title();
expect(title).toBe('Example Domain');
});
});Explicació del Codi
- Imports: Importem
chromium,Browser, iPagede Playwright per crear i gestionar el navegador i les pàgines. describe: Defineix una suite de proves. Aquí agrupem les proves relacionades.beforeAlliafterAll: Funcions que s'executen abans i després de totes les proves de la suite. UtilitzembeforeAllper llançar el navegador iafterAllper tancar-lo.test: Defineix una prova individual. En aquest cas, verifiquem que la pàgina de "Example Domain" es carrega correctament i el títol és correcte.
Executar les Proves
Per executar les proves, afegeix un script al package.json:
Executa les proves amb el següent comandament:
Bones Pràctiques
- Utilitza Tipus: Aprofita els tipus de TypeScript per definir clarament les interfícies i estructures de dades.
- Organitza el Codi: Mantingues les proves organitzades en fitxers i directoris lògics.
- Reutilitza Codi: Crea funcions auxiliars per a accions repetitives per mantenir el codi net i DRY (Don't Repeat Yourself).
Conclusió
En aquesta secció, hem après a configurar un projecte de Playwright amb TypeScript i a escriure una prova bàsica. Hem vist com utilitzar les capacitats de TypeScript per millorar la qualitat del nostre codi de proves. En el següent tema, explorarem com utilitzar interfícies i tipus de TypeScript per millorar encara més les nostres proves.
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