Mode Navigateur (expérimental)

Cette page fournit des informations sur la fonctionnalité expérimentale de mode navigateur dans l'API Vitest, qui vous permet d'exécuter vos tests nativement dans le navigateur, en donnant accès aux variables globales du navigateur comme window et document. Cette fonctionnalité est actuellement en développement, et les API sont susceptibles d'évoluer.

Motivation

Nous avons développé la fonctionnalité de mode navigateur de Vitest pour améliorer les processus de test et obtenir des résultats plus précis et fiables. Cet ajout expérimental à notre API de test permet aux développeurs d'exécuter des tests dans un environnement de navigateur natif. Dans cette section, nous allons explorer les motivations derrière cette fonctionnalité et ses avantages pour les tests.

Différentes approches de test

Il existe différentes approches pour tester du code JavaScript. Certains frameworks de test simulent des environnements de navigateur dans Node.js, tandis que d'autres exécutent des tests dans de vrais navigateurs. Dans ce contexte, jsdom est un exemple d'implémentation de spécification qui simule un environnement de navigateur et est utilisé avec un lanceur de tests comme Jest ou Vitest. D'autres outils de test tels que WebdriverIO ou Cypress permettent aux développeurs de tester leurs applications dans un vrai navigateur ou, dans le cas de Playwright, de fournir un moteur de navigateur.

Les limites de la simulation

Tester des programmes JavaScript dans des environnements simulés tels que jsdom ou happy-dom a simplifié la configuration des tests et fourni une API facile à utiliser, les rendant adaptés à de nombreux projets et augmentant la confiance dans les résultats des tests. Cependant, il est crucial de garder à l'esprit que ces outils ne font que simuler un environnement de navigateur et non un navigateur réel, ce qui peut entraîner des divergences entre l'environnement simulé et l'environnement réel. Par conséquent, de faux positifs ou de faux négatifs peuvent se produire dans les résultats des tests.

Pour atteindre le plus haut niveau de confiance dans nos tests, il est essentiel de tester dans un environnement de navigateur réel. C'est pourquoi nous avons développé la fonctionnalité de mode navigateur dans Vitest, permettant aux développeurs d'exécuter des tests nativement dans un navigateur et d'obtenir des résultats de test plus précis et fiables. Avec les tests au niveau du navigateur, les développeurs peuvent être plus confiants que leur application fonctionnera comme prévu dans un scénario réel.

Inconvénients

Lors de l'utilisation du navigateur Vitest, il est important de prendre en compte les inconvénients suivants :

Phase de développement initiale

La fonctionnalité de mode navigateur de Vitest est encore à ses débuts. En tant que tel, elle n'est peut-être pas encore entièrement optimisée, et il peut y avoir des bugs ou des problèmes qui n'ont pas encore été résolus. Il est recommandé aux utilisateurs de compléter leur expérience du navigateur Vitest avec un lanceur de tests autonome côté navigateur comme WebdriverIO, Cypress ou Playwright.

Initialisation plus longue

Le navigateur Vitest nécessite le lancement du fournisseur et du navigateur pendant le processus d'initialisation, ce qui peut prendre un certain temps. Cela peut entraîner des temps d'initialisation plus longs par rapport à d'autres approches de test.

Configuration

Pour activer le mode navigateur dans votre configuration Vitest, vous pouvez utiliser l'option --browser ou définir le champ browser.enabled sur true dans votre fichier de configuration Vitest. Voici un exemple de configuration utilisant le champ browser :

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      name: 'chrome', // Le nom du navigateur est requis
    },
  },
});

Types d'options de navigateur :

L'option browser dans Vitest dépend du fournisseur. Vitest échouera si vous passez --browser sans spécifier son nom dans le fichier de configuration. Options disponibles :

• webdriverio (par défaut) prend en charge ces navigateurs :
  • firefox
  • chrome
  • edge
  • safari
• playwright prend en charge ces navigateurs :
  • firefox
  • webkit
  • chromium

Tests multi-navigateurs :

Lorsque vous spécifiez un nom de navigateur dans l'option browser, Vitest essaiera d'exécuter le navigateur spécifié à l'aide de WebdriverIO par défaut, puis d'y exécuter les tests. Cette fonctionnalité rend les tests multi-navigateurs faciles à utiliser et à configurer dans des environnements comme un CI. Si vous ne souhaitez pas utiliser WebdriverIO, vous pouvez configurer le fournisseur de navigateur personnalisé à l'aide de l'option browser.provider.

Pour spécifier un navigateur à l'aide de la CLI, utilisez l'option --browser suivie du nom du navigateur, comme ceci :

npx vitest --browser=chrome

Ou vous pouvez fournir des options de navigateur à la CLI avec la notation pointée :

npx vitest --browser.name=chrome --browser.headless

NOTE

Lorsque vous utilisez l'option de navigateur Safari avec WebdriverIO, le safaridriver doit être activé en exécutant sudo safaridriver --enable sur votre appareil.

De plus, lors de l'exécution de vos tests, Vitest tentera d'installer certains pilotes pour la compatibilité avec safaridriver.

Mode sans tête (Headless)

Le mode sans tête est une autre option disponible dans le mode navigateur. En mode sans tête, le navigateur s'exécute en arrière-plan sans interface utilisateur, ce qui le rend utile pour exécuter des tests automatisés. L'option headless dans Vitest peut être définie sur une valeur booléenne pour activer ou désactiver le mode sans tête.

Voici un exemple de configuration activant le mode sans tête :

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      headless: true,
    },
  },
});

Vous pouvez également définir le mode sans tête à l'aide de l'option --browser.headless dans la CLI, comme ceci :

npx vitest --browser.name=chrome --browser.headless

Dans ce cas, Vitest s'exécutera en mode sans tête à l'aide du navigateur Chrome.

Limitations

Boîtes de dialogue bloquant le thread

Lors de l'utilisation du navigateur Vitest, il est important de noter que les boîtes de dialogue bloquant le thread comme alert ou confirm ne peuvent pas être utilisées nativement. En effet, elles bloquent la page Web, ce qui signifie que Vitest ne peut pas continuer à communiquer avec la page, ce qui provoque le blocage de l'exécution.

Dans de telles situations, Vitest fournit des mocks par défaut avec des valeurs de retour par défaut pour ces API. Cela garantit que si l'utilisateur utilise accidentellement des API Web contextuelles synchrones, l'exécution ne se bloquera pas. Cependant, il est toujours recommandé à l'utilisateur de mocker ces API Web pour une meilleure expérience. Pour en savoir plus, consultez Mocking.