Configuration VS Code pour Playwright: Extensions, Paramètres et Productivité

Un VS Code bien configuré te donne l'exécution des tests, le débogage avec points d'arrêt, l'autocomplétion des API Playwright et la découverte des tests dans une seule fenêtre.

Extensions essentielles

1. Playwright Test for VS Code (officielle)

C'est l'extension non négociable. Elle ajoute :

• Sidebar Test Explorer : voir tous les tests organisés par fichier, les lancer en un clic
• Lancer des tests individuels : cliquer sur le bouton play à côté de n'importe quel bloc test(...)
• Déboguer les tests : placer des points d'arrêt, parcourir le code, inspecter l'état de page
• Enregistrer de nouveaux tests : lancer Playwright Codegen depuis VS Code
• Afficher le navigateur : exécuter les tests avec le navigateur visible
• Sélectionner un locator : cliquer sur un élément dans le navigateur, obtenir le bon locator Playwright

Après l'installation, cherche l'icône Playwright dans la barre latérale gauche (un masque de théâtre). Tes tests apparaissent automatiquement si tu as un playwright.config.ts à la racine du projet.

1. Ouvrir le panneau Testing (Ctrl+Shift+P → "Show Testing")

2. Déplier les fichiers de tests

3. Cliquer ▶ pour lancer, ou l'icône de bug pour déboguer

2. ESLint

Signale les problèmes dans le code au fur et à mesure que tu tapes. Pour les projets TypeScript/Playwright, configure-le avec :

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Crée .eslintrc.json :

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "rules": {
    "no-unused-vars": "warn",
    "@typescript-eslint/no-explicit-any": "warn"
  }
}

3. Prettier

Formate automatiquement le code à la sauvegarde. Indispensable pour un style cohérent. Installation :

npm install -D prettier

Crée .prettierrc :

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

Dans les paramètres VS Code, active le formatage à la sauvegarde :

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

4. GitLens

Affiche qui a modifié chaque ligne en dernier, l'historique git complet, la comparaison de branches. Pas spécifique à Playwright mais très précieux sur tout projet d'équipe. Particulièrement utile lors du débogage : "qui a modifié ce test et pourquoi ?"

5. Error Lens

Affiche les erreurs TypeScript/ESLint directement sur la ligne concernée, pas seulement dans le panneau Problèmes. Détecte les erreurs plus vite.

Paramètres VS Code pour les projets Playwright

Ouvre le JSON des paramètres (Ctrl+Shift+P → "Open User Settings JSON") et ajoute :

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "typescript.suggest.autoImports": true,

  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "editor.rulers": [100],

  "files.associations": {
    "*.spec.ts": "typescript"
  },

  "terminal.integrated.defaultProfile.windows": "Git Bash",

  "explorer.confirmDelete": false
}

Workflows Playwright spécifiques à VS Code

Lancer des tests depuis l'éditeur

Trois façons de lancer un test :

1. Panneau Test Explorer : liste complète des tests, lancer tout, lancer par fichier, lancer par tag

2. Bouton play vert : passe la souris sur une ligne test(, clique le bouton ▶

3. Terminal : npx playwright test (avec des flags comme --headed, --debug)

Le Test Explorer est idéal pour lancer la suite complète. Le bouton play inline est idéal pour lancer rapidement un test unique.

Déboguer un test en échec

1. Place un point d'arrêt sur la ligne qui échoue (cliquer dans la marge gauche)

2. Dans le Test Explorer, clic droit sur le test → "Debug Test"

3. VS Code s'arrête à ton point d'arrêt

4. Dans la Debug Console, tu peux taper des commandes Playwright :

- await page.title() : voir le titre de la page actuelle

- await page.locator('[data-testid="btn"]').isVisible() : vérifier l'état d'un élément

- page.url() : voir où se trouve Playwright

C'est bien plus efficace qu'ajouter des console.log et relancer.

Utiliser Playwright Inspector depuis VS Code

1. Clic droit sur un test → "Debug Test"

2. Ou lancer PWDEBUG=1 npx playwright test dans le terminal

L'Inspector Playwright s'ouvre à côté du navigateur. Tu peux parcourir les actions une par une et voir ce que résout un locator en temps réel. Tu peux aussi sélectionner de nouveaux locators en cliquant sur les éléments.

Enregistrer un nouveau test

1. Dans la barre latérale de l'extension Playwright, cliquer "Record new"

2. Un navigateur s'ouvre

3. Exécuter les actions à automatiser

4. Cliquer "Copy" pour obtenir le code généré

5. Coller dans le fichier de test, puis affiner les sélecteurs

Utile pour avoir un point de départ, mais affine toujours les sélecteurs générés pour utiliser des attributs data-testid.

Structure de projet dans VS Code

Une structure Playwright propre que VS Code gère bien :

my-playwright-project/
├── tests/
│   ├── e2e/
│   │   ├── login.spec.ts
│   │   ├── checkout.spec.ts
│   ├── api/
│   │   ├── users-api.spec.ts
│   ├── fixtures/
│   │   ├── auth.fixture.ts
│   │   └── index.ts
├── pages/
│   ├── LoginPage.ts
│   ├── DashboardPage.ts
├── playwright.config.ts
├── tsconfig.json
├── package.json
└── .env

L'explorateur de VS Code replie bien les dossiers, ce qui rend cette structure facile à naviguer.

Raccourcis clavier à connaître

| Raccourci | Action |

|---|---|

| Ctrl+Shift+P | Palette de commandes (chercher n'importe quelle commande) |

| Ctrl+P | Ouverture rapide d'un fichier |

| Ctrl+Shift+F | Rechercher dans tous les fichiers |

| Ctrl+` ` | Basculer le terminal |

| F2 | Renommer un symbole (renommer une variable partout) |

| F12 | Aller à la définition |

| Alt+F12 | Aperçu de la définition (inline, sans naviguer) |

| Ctrl+D | Sélectionner la prochaine occurrence |

| Alt+Shift+F | Formater le document |

| Ctrl+/ | Basculer le commentaire de ligne |

Les plus importants pour le débogage Playwright : F5 démarre le débogage, F10 passe à l'instruction suivante, F11 entre dans la fonction, F5 à nouveau continue jusqu'au prochain point d'arrêt.

Ne commite jamais de secrets. Crée .env pour les variables d'environnement locales :

BASE_URL=https://staging.yourapp.com
ADMIN_EMAIL=admin@test.com
ADMIN_PASSWORD=TestAdmin1
API_KEY=your-test-api-key

Ajoute dans .gitignore :

.env
.env.local
.env.*.local

import { defineConfig } from '@playwright/test';
import dotenv from 'dotenv';

dotenv.config();

export default defineConfig({
  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
  },
});

Installe dotenv : npm install -D dotenv

La bonne configuration VS Code supprime les frictions du travail quotidien d'automatisation de tests. Installe l'extension Playwright en premier, le reste peut suivre progressivement.