Playwright est un outil de test de bout en bout (également connu sous le nom de E2E ou Test d'intégration) pour les applications Web. Playwright a une grande expérience de développeur et rend l'écriture bonne et résiliente aux changements de tests.

1. Installer le dramaturge

Pour configurer le dramaturge, exécutez la commande suivante:

npm init playwright@latest

Vous serez guidé via un assistant de configuration dans votre terminal. Lorsqu'il est invité avec "où mettre vos tests de bout en bout?" , vous pouvez le définir sur src / tests (comme recommandé dans les tutoriels précédents).

Ajouter des scripts à package.json

Dans votre package.json, ajoutez les deux scripts suivants pour exécuter les tests de dramaturges:

Cela vous permet d'exécuter les tests dans les environnements de développement et de CI.

Configuration du dramaturge

Le fichier dramwright.config.ts doit être configuré comme suit:

Modifications de clé dans la configuration:

• use.baseurl : Cela définit l'URL de base de votre serveur de développement, vous n'avez donc pas à l'écrire dans chaque test.
• Webserver : Ce bloc décrit comment démarrer votre serveur de développement. Il réutilisera un serveur déjà couché à moins que vous ne soyez dans un environnement CI.
• testdir : le répertoire où le dramaturge doit rechercher vos tests e2e (dans ce cas, src / tests / e2e).

2. Configurer MSW pour les tests de navigateur

Jusqu'à présent, MSW a été configuré pour moquer les réponses de l'API dans un environnement Node.js. Cependant, parce que Playwright utilise un véritable navigateur pour les tests, vous devez configurer MSW pour travailler dans l'environnement du navigateur.

Créez un nouveau module JavaScript qui enregistrera le travailleur du service MSW pour les tests basés sur le navigateur:

3. Enregistrer le travailleur en mode développement

Pour démarrer le travailleur MSW lorsque l'application s'exécute en mode développement, ajoutez ce qui suit au module racine de votre application (par exemple, src / main.tsx):

Assurez-vous de définir la variable d'environnement VITE_API_MOCK dans votre fichier .env:

VITE_API_MOCK="true"

4. Écrivez un test E2E

Vous pouvez maintenant écrire un test E2E pour un flux dans votre application. Voici un exemple de test de dramaturge:

5. Exécution du test

Pour exécuter le test E2E, utilisez la commande suivante:

npm run test:e2e:ci

Cela exécutera le test en mode CI, qui est utile pour les pipelines automatisés.