# 🎭 Playwright Skill per a Claude Code
## Manual pràctic per a docents

---

## Què és?

La **Playwright Skill** és una capacitat extra que s'instal·la a Claude Code i li permet **controlar un navegador web de manera automàtica**. És com donar-li mans i ulls a la IA: pot obrir pàgines, fer clic, omplir formularis, prendre captures de pantalla i extreure informació — tot mentre tu el veus en temps real.

S'instal·la una sola vegada i s'activa automàticament quan li demanes qualsevol tasca que implique un navegador.

---

## Instal·lació (una vegada)

### Prerequisits
- **Claude Code** instal·lat (`npm install -g @anthropic-ai/claude-code`)
- **Node.js 18+** instal·lat

### Pas a pas

```bash
# 1. Clona la skill
cd ~/.claude/skills
git clone https://github.com/lackeyjb/playwright-skill

# 2. Entra al directori i instal·la
cd playwright-skill
npm run setup
```

La instal·lació descarrega Chromium (~200 MB). Només cal fer-ho una vegada.

### Verificació

```bash
cd ~/.claude/skills/playwright-skill
node run.js --version
```

---

## Com funciona

```
Tu → "Conecta't a Aules i llista els meus cursos"
           ↓
     Claude escriu el codi Playwright
           ↓
     Executa: node run.js /tmp/playwright-test-*.js
           ↓
     Obre Chromium (el veus en pantalla)
           ↓
     Fa les accions i et retorna el resultat
```

**Els scripts es guarden a `/tmp/`** — no embruten el teu projecte i l'OS els neteja automàticament.

---

## Exemples d'ús per a docents

### 1. Llistar cursos d'Aules GVA

```
"Connecta't a https://aules.edu.gva.es/docent/ amb
l'usuari XXX i la contrasenya YYY i llista'm tots
els meus cursos"
```

### 2. Crear contingut a Moodle automàticament

```
"Crea una tasca nova al curs id=12345 d'Aules amb
el títol 'Examen Python', descripció [text] i
data límit d'aquí 10 dies"
```

### 3. Capturar i verificar una web pròpia

```
"Fes un screenshot complet de iesjmr.es/jomaimai/
en desktop i mòbil i comprova si tots els botons
responen correctament"
```

### 4. Omplir formularis repetitius

```
"Omple el formulari de reserva del gimnàs per a
cada grup: 1rA, 1rB, 2nA. Les dades estan al
fitxer horaris.csv"
```

### 5. Extreure informació d'una pàgina

```
"Entra a l'extranet del centre i extreu la llista
de tots els alumnes de 2n DAW amb el seu correu.
Guarda-ho en un CSV"
```

---

## Capacitats detallades

| Capacitat | Descripció |
|-----------|------------|
| **Navegació** | Obre URLs, segueix redireccions, gestiona cookies |
| **Login** | Omple formularis d'autenticació (usuari/contrasenya) |
| **Clic i teclat** | Clica botons, menús desplegables, checkboxes |
| **Formularis** | Omple inputs, textareas, selects, dates |
| **Extracció** | Llegeix text, taules, links i estructures HTML |
| **Screenshots** | Captura pàgina sencera o un element concret |
| **Esperes** | Detecta quan la pàgina ha carregat (networkidle) |
| **Multi-pàgina** | Obri diverses pestanyes i les gestiona |
| **Shake/motion** | Simula sacsejada del mòbil (DeviceMotionEvent) |
| **Responsive** | Prova la mateixa pàgina a diverses resolucions |

---

## Exemple de script complet: login a Aules GVA

Guarda aquest fitxer com `playwright-aules.js` i executa:

```bash
cd ~/.claude/skills/playwright-skill
node run.js /path/to/playwright-aules.js
```

Veure fitxer adjunt: **`playwright-aules-exemple.js`**

---

## Preguntes freqüents

**El navegador s'obre i es tanca ràpid, no veig res.**
→ Afegeix `slowMo: 200` al `chromium.launch()` per alentir-lo.

**El script falla amb "Timeout" buscant un element.**
→ L'element potser té un id diferent. Demana a Claude: *"inspeccionem primer el formulari i llistem tots els inputs"*.

**Puc usar-lo en mode "invisible" (sense obrir el navegador)?**
→ Sí: canvia `headless: false` per `headless: true`. Útil per a scripts en segon pla.

**Pot gestionar sessions de Google/Microsoft (SSO)?**
→ Depén de com tinguen configurat el SSO. En molts casos sí, però pot requerir gestionar OAuth manualment.

**És legal usar-lo per automatitzar Aules?**
→ Sí, sempre que sigues tu el docent propietari dels cursos i no infringisques els termes de servei de la GVA (ús personal, no massiu).

---

## Estructura de fitxers de la skill

```
~/.claude/skills/playwright-skill/
├── SKILL.md          ← Instruccions per a Claude
├── run.js            ← Executor universal
├── lib/
│   └── helpers.js    ← Funcions utilitàries
├── package.json
└── API_REFERENCE.md  ← Referència completa
```

---

## Recursos

- Repositori oficial: `https://github.com/lackeyjb/playwright-skill`
- Documentació Playwright: `https://playwright.dev/docs/intro`
- Instal·lació Claude Code: `https://claude.ai/code`

---

*Documentat durant el Curs IA Claude per a Docents · IES JMR · Abril 2026*