En aquesta secció, aprendrem a configurar l'entorn necessari per començar a treballar amb Playwright i TypeScript. Assegurar-se que el teu entorn de desenvolupament està correctament configurat és crucial per evitar problemes tècnics més endavant.

Abans de començar, assegura't de tenir instal·lat el següent programari al teu ordinador:

1. Node.js: Playwright requereix Node.js per funcionar. Pots descarregar-lo des de nodejs.org. Recomanem instal·lar la versió LTS (Long Term Support) per a major estabilitat.
2. NPM o Yarn: Aquests són gestors de paquets per a Node.js. NPM s'instal·la automàticament amb Node.js. Alternativament, pots utilitzar Yarn, que es pot instal·lar seguint les instruccions a yarnpkg.com.

Visual Studio Code (VS Code) és un editor de codi font molt popular i recomanat per treballar amb TypeScript i Playwright. Pots descarregar-lo des de code.visualstudio.com.

• TypeScript: VS Code ja ve amb suport integrat per a TypeScript, però pots instal·lar extensions addicionals per millorar l'experiència.
• Playwright Test for VS Code: Aquesta extensió ajuda a executar i depurar proves de Playwright directament des de l'editor.
• ESLint: Per mantenir el codi net i lliure d'errors comuns.

1. Crea una carpeta per al teu projecte: Pots fer-ho des de la línia de comandes o directament des de l'explorador de fitxers.

   mkdir playwright-project
   cd playwright-project
   

2. Inicialitza un nou projecte Node.js: Això crearà un fitxer package.json que gestionarà les dependències del projecte.

   npm init -y
   

3. Instal·la Playwright i TypeScript: Afegeix Playwright i TypeScript com a dependències del projecte.

   npm install playwright typescript --save-dev
   

4. Configura TypeScript: Crea un fitxer de configuració tsconfig.json per a TypeScript.

   {
     "compilerOptions": {
       "target": "ES6",
       "module": "commonjs",
       "strict": true,
       "esModuleInterop": true,
       "skipLibCheck": true,
       "forceConsistentCasingInFileNames": true
     },
     "include": ["src"]
   }
   

5. Crea l'estructura de carpetes: Organitza el teu projecte creant una carpeta src per al codi font.

   mkdir src
   

Per assegurar-te que tot està configurat correctament, crea un fitxer de prova index.ts dins de la carpeta src amb el següent codi:

Compila i executa el codi per verificar que TypeScript i Node.js funcionen correctament:

Si veus el missatge "Hola, Playwright amb TypeScript!" a la consola, la configuració ha estat exitosa.

Ara que tens el teu entorn de desenvolupament configurat, estàs preparat per començar a explorar Playwright i TypeScript. En el següent tema, introduirem els conceptes bàsics de TypeScript per assegurar-nos que tens una base sòlida abans de començar a escriure scripts de Playwright.