Comment exécuter des tests de bout en bout à l'aide de Playwright et Docker

De Get Docs
Aller à :navigation, rechercher

Introduction

Playwright est un excellent outil pour tester de bout en bout tous les navigateurs, y compris Chromium, Firefox et Webkit. Étant donné que Webkit est au cœur du navigateur Safari, la fonctionnalité multi-navigateur de Playwright en fait une bonne option pour tester les applications Web. Playwright a des fonctionnalités telles que l'interaction de support automatique avec les navigateurs, vous n'avez donc pas besoin d'installer les pilotes Web manuellement, et il prend en charge plusieurs langages de programmation, tels que Java, Python , et NodeJS. La flexibilité de Playwright signifie qu'il peut être utilisé comme un outil de grattage Web ou pour des tests de bout en bout afin de s'assurer que le logiciel répond à ses exigences.

Pour exécuter Playwright, vous avez besoin d'un environnement approprié, tel que l'environnement d'exécution NodeJS, le framework principal Playwright ou l'exécuteur de test Playwright. Votre système d'exploitation peut avoir besoin de dépendances pour prendre en charge Playwright. Docker, une plate-forme de conteneurisation open source, peut servir votre environnement Playwright afin que vous n'ayez pas besoin de créer plusieurs environnements pour différents systèmes d'exploitation.

Dans ce didacticiel, vous allez configurer un environnement pour utiliser Playwright avec Typescript pour des tests de bout en bout, écrire et exécuter les tests, exporter le rapport de test sous plusieurs formes et déployer le test à l'aide de Docker. À la fin du didacticiel, vous serez en mesure d'utiliser Playwright pour vos tests d'automatisation et d'intégrer vos tests dans un pipeline CI/CD existant avec Docker enveloppant l'environnement de test.

Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin de :

Étape 1 - Préparation de l'environnement

Avant de mettre en œuvre les tests de bout en bout, vous devez préparer l'environnement du projet Playwright.

Tout d'abord, créez un dossier pour ce projet :

mkdir playwright-with-docker

Déplacer vers le nouveau dossier :

cd playwright-with-docker

Initialisez ensuite un nouvel environnement Node :

npm init

Vous serez invité à fournir des informations pour le nouveau projet, telles que le nom du projet, la version, l'entrée de l'application et la commande de test.

Vous serez invité à saisir des réponses pour les invites suivantes liées au nouveau projet :

Outputpackage name: (playwright-docker)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

Vous verrez des résultats comme celui-ci :

OutputThis utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterward to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (test) playwright-docker
version: (1.0.0)
description: A project for using playwright for end-to-end testing purpose with docker for deployment
entry point: (index.js)
test command:
git repository:
keywords:
author: 
license: (ISC)
About to write to /your-path/test/package.json:

{
  "name": "playwright-docker",
  "version": "1.0.0",
  "description": "A project for using playwright for end-to-end testing purpose with docker for deployment",
  "main": "index.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": 
  "license": "ISC"
}


Is this OK? (yes) yes

Après avoir ajouté les informations requises, tapez yes ou appuyez sur enter pour confirmer la configuration du package.json dossier.

Ensuite, installez les dépendances nécessaires pour le projet :

npm install --save-dev playwright
npm install --save-dev typescript

Ces commandes installent Playwright et TypeScript dans l'exemple de projet. Le drapeau --save-dev est utilisé pour installer des dépendances qui ne sont pas obligatoires pour que l'application s'exécute.

Ensuite, installez les définitions de type pour Node.JS :

npm install --save-dev @types/node

Ensuite, installez une bibliothèque pour travailler avec le fichier TOML pour la configuration :

npm install --save-dev toml

TOML est l'un des types de fichiers utilisés pour la configuration de l'application. A .toml est lisible par l'homme et permet à l'application de mettre à jour son contenu sans le lire au préalable.

Ensuite, installez les dépendances Playwright pour le système hôte :

npx playwright install-deps

Lorsque vous y êtes invité, entrez votre sudo le mot de passe.

Remarque : Si vous recevez un message indiquant que vous devez mettre à niveau votre version de Node vers une version supérieure comme celle-ci :

OutputYou are running Node.js 10.19.0.
Playwright requires Node.js 12 or higher. 
Please update your version of Node.js.

Vous pouvez effectuer la mise à niveau à l'aide de ces commandes :

sudo npm cache clean -f 
sudo npm install -g n 
sudo n stable

npm cache clean -f nettoiera de force tous les caches pendant que npm install -g n et n stable installera la version stable de Node.js globalement sur votre serveur. Après avoir exécuté ces commandes, redémarrez votre serveur.


Ensuite, installez l'exécuteur de test Playwright, que vous utiliserez dans les étapes ultérieures de ce didacticiel :

npm install --save-dev @playwright/test

Enfin, installez les navigateurs pris en charge pour Playwright :

npx playwright install

Avec cette commande, vous pouvez exécuter vos tests avec plusieurs navigateurs.

Pour préparer le fichier de configuration TypeScript, ouvrez tsconfig.json avec nano ou votre éditeur de texte préféré :

sudo nano tsconfig.json

Le fichier actuel est vide. Pour le mettre à jour pour ce projet, ajoutez le code suivant :

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "module": "commonjs"
  },
  "include": ["tests"]
}

A tsconfig.json file indique au runtime NodeJS que le répertoire actuel est un projet Typescript. La compilerOptions répertorie les conditions dont NodeJS a besoin pour compiler le projet. La module indique au compilateur quelle syntaxe de module utiliser lorsque les fichiers sont compilés en Javascript. La strict champs définis sur true activera la vérification de type pour le code Typescript, ce qui garantit que les types correspondront à la valeur de données des variables ou des méthodes. include affichera une liste de noms de fichiers ou de modèles inclus dans l'application. Dans ce cas, l'application doit inclure tous les fichiers du tests annuaire.

Enregistrez et fermez le fichier lorsque vous avez terminé.

Une fois votre environnement configuré, vous pouvez maintenant commencer à créer vos tests.

Étape 2 - Rédaction des tests

Avec l'environnement de test Playwright que vous avez préparé à la première étape, vous allez maintenant écrire trois exemples de tests connectés à la DigitalOcean Droplets Page.

Les tests TypeScript que vous créerez vérifieront les trois éléments suivants :

  • Vérifiez trois options pour vous inscrire à de nouveaux comptes DigitalOcean : Sign up with Email, Sign up with Google, Sign up with Github.
  • Vérifiez que DigitalOcean prend en charge deux types de packages : Basic et Premium.
  • Vérifiez qu'il existe quatre coûts de machine virtuelle de base : 1 CPU, 2 CPU, 4 CPU, 8 CPU.

Bien que vous puissiez avoir les trois tests dans le même fichier de test, ce didacticiel utilisera trois fichiers distincts car chaque test a un objectif différent.

Créer un nouveau répertoire nommé tests pour contenir tous les fichiers de test :

mkdir tests

Naviguez ensuite jusqu'au tests annuaire:

cd tests

Étant donné que vous exécuterez trois tests avec des objectifs différents, vous créerez trois fichiers de test distincts ultérieurement dans cette étape, tous situés dans le dossier tests répertoire dans le projet :

  • signUpMethods.spec.ts mettra en œuvre le test pour vérifier le nombre de méthodes prises en charge pour que les utilisateurs s'inscrivent.
  • multiplePackages.spec.ts mettra en œuvre le test pour vérifier le nombre de forfaits que les clients peuvent choisir.
  • pricingComparison.spec.ts vérifiera le nombre de coûts de base de la machine virtuelle.

Remarque : Le format par défaut des fichiers de test sera *.spec.ts (pour les projets TypeScript) ou *.spec.js (pour les projets JavaScript).


Le fichier de configuration des tests sera nommé configTypes.ts et est également mis dans le tests annuaire. Dans ce fichier, vous allez définir des variables globales pour interagir avec plusieurs navigateurs et leurs pages. Vous définirez également certaines valeurs de configuration utilisées dans le test, telles que l'URL de l'application testée. Ce tutoriel utilisera DIGITAL_OCEAN_URL pour l'URL testée.

Créer configTypes.ts:

nano configTypes.ts

Ajoutez le code suivant au champ actuellement vide configTypes.ts dossier:

configTypes.ts

import { Browser, Page } from "playwright";

import fs from 'fs';
import toml from 'toml';
const config = toml.parse(fs.readFileSync('./config.toml', 'utf-8'));

declare global {
  const page: Page;
  const browser: Browser;
  const browserName: string;
}

export default {
  DIGITAL_OCEAN_URL: config.digital_ocean_url ?? '',
  };

Premièrement le import les fonctions lisent le contenu de la configuration ./config.toml dans le répertoire personnel du projet.

Vous déclarez des variables globales pour page, browser, browserName, qui sera utilisé pour initialiser les instances de page et de navigateur dans les tests de bout en bout.

Enfin, vous exportez DIGITAL_OCEAN_URL avec la valeur lue à partir de ./config.toml par digital_ocean_url clé, afin que vous puissiez utiliser cette URL dans vos tests ultérieurs.

Enregistrez et fermez le fichier lorsque vous avez terminé.

Pour le premier test, créez et ouvrez le signUpMethods.spec.ts fichier utilisant nano ou votre éditeur de texte préféré :

nano signUpMethods.spec.ts

Ajoutez le code suivant au fichier vide :

signUpMethods.spec.ts

import endpoint from "./configTypes"
import { test, expect } from '@playwright/test'

test("Expect to have 3 options for signing up", async ({ page }) => {

  // Go to the Droplets product page of DigitalOcean web page
  await page.goto(endpoint.DIGITAL_OCEAN_URL);

  // Wait for the page to load
  await page.waitForLoadState('networkidle');

  // Get the number of signUp options
  const number_subscriptions_allowed = await page.locator('.SignupButtonsStyles__ButtonContainer-sc-yg5bly-0 > a').count()

  // Verify that number equals 3
  expect(number_subscriptions_allowed).toBe(3)
});

La signUpMethods.spec.ts Le fichier contient le code du test qui évalue si la page Droplets propose trois options d'inscription. Vous importez le test et expect méthodes dans les deux premières lignes.

Les tests peuvent être écrits de manière asynchrone ou synchrone. L'écriture d'un test de manière asynchrone permet d'optimiser la vitesse du test puisque vous n'avez pas à attendre la fin de chaque étape du test pour exécuter l'étape suivante. Vous utilisez le await mot-clé lorsque vous devez attendre la fin de l'étape avant de passer à l'action suivante. Étant donné que les étapes ici sont liées aux interactions Web, vous devez vous assurer que chaque élément de l'interface utilisateur est affiché avant d'exécuter l'action, c'est pourquoi vous incluez le await méthode avant que chaque action ne soit appelée.

Le test est défini dans le test bloc avec quatre actions. La première await mot-clé utilise le page.goto() fonction pour dire au test d'aller au DIGITAL_OCEAN_URL qui a été défini dans le configTypes.ts dossier. Tu mets la variable globale page dans le async afin que vous puissiez utiliser des instances de page tout au long du test sans avoir à l'initialiser.

La deuxième await le mot-clé indique au test d'attendre que la page se charge à l'aide du page.waitForLoadState() fonction. S'il y a des appels d'API qui ne sont pas terminés, il peut y avoir des éléments sur la page qui ne sont pas disponibles et, par conséquent, le test peut échouer car il ne trouve pas cet élément.

Vous définissez le number_subscriptions_allowed utiliser le page.locator() fonction pour rechercher le nombre d'options d'inscription. Vous trouvez le signUp options composants par des sélecteurs CSS (dans ce cas, les boutons d'inscription), ce qui vous permet d'obtenir le nombre d'éléments enfants qu'il contient.

Enfin, un expect validera le nombre d'options trouvées par page.locator() avec la sortie attendue de 3.

Enregistrez et fermez le fichier.

Ensuite, vous écrirez le deuxième test. Créez et ouvrez le multiplePackages.spec.ts dossier:

nano multiplePackages.spec.ts

Dans le fichier vide, ajoutez le code suivant :

multiplePackages.spec.ts

import endpoint from "./configTypes"
import { test, expect } from '@playwright/test'

test("Expect to have 3 packages for subscription", async ({ page }) => {

  // Go to the Droplets product page of DigitalOcean web page
  await page.goto(endpoint.DIGITAL_OCEAN_URL);

  // Wait for the page to load
  await page.waitForLoadState('networkidle');

  // Get the number of packages to be 2 (Basic and Premium)
  const number_subscriptions_allowed = await page.locator('.CPUInfoStyles__StyledLeftCpuInfo-sc-ooo7a2-4 > div').count()

  // Verify that number equals 2
  expect(number_subscriptions_allowed).toBe(2)
});

Semblable à la signUpMethods.spec.ts fichier, vous importerez la configuration de test et les fonctions de test à partir des dépendances de Playwright.

Dans ce test, vous allez à la DIGITAL_OCEAN_URL d'abord en utilisant page.goto(). Ensuite, vous attendez que la page termine tous les appels réseau avec page.waitForLoadState().

Vous trouvez les éléments enfants du composant d'abonnement dans l'interface utilisateur Web et stockez ces informations dans le number_subscriptions_allowed variable.

Enfin, vous comparez la valeur de number_subscriptions_allowed avec la sortie attendue de 2.

Enregistrez et fermez le fichier lorsque vous avez terminé.

Ensuite, créez et ouvrez le pricingComparison.spec.ts fichier pour définir le troisième test :

nano pricingComparison.spec.ts

Ajoutez le code suivant au fichier vide :

pricingComparison.spec.ts

import endpoint from "./configTypes"
import { test, expect } from '@playwright/test'

test("Expect to have 3 packages for subscription", async ({ page }) => {

  // Go to the Droplets product page of DigitalOcean web page
  await page.goto(endpoint.DIGITAL_OCEAN_URL);

  // Wait for the page to load
  await page.waitForLoadState('networkidle');

  // Get the number of basic virtual machine costs (1 CPU, 2 CPU, 4 CPU, 8 CPU)
  const number_subscriptions_allowed = await page.locator('.PricingComparisonToolStyles__StyledCpuSelector-sc-1k0sndv-7 > button').count()

  // Verify that number equals 4
  expect(number_subscriptions_allowed).toBe(4)
});

La fonction asynchrone de ce test utilise la même page.goto() URL et page.waitForLoadState() directions comme dans les tests précédents. Étant donné que ce test est connecté aux packages d'abonnement disponibles sur la page Droplets, la seconde moitié du bloc de code configure ce test.

Pour ce test, vous obtenez le nombre d'éléments enfants pour le composant d'options de tarification et stockez cette valeur dans le number_subscriptions_allowed variable. Vous validez que la valeur de number_subscriptions_allowed doit être égal 4 (le nombre d'abonnements actuellement pris en charge).

Enregistrez et fermez le fichier.

Dans vos tests, vous utilisez DIGITAL_OCEAN_URL du configTypes.ts, et configTypes.ts lit digital_ocean_url valeur de la ./config.toml dossier.

Vous allez maintenant créer le config.toml fichier dans le répertoire personnel du projet. Accédez au répertoire d'accueil :

cd ..

Créez ensuite le config.toml dossier:

nano config.toml

Copiez le contenu suivant dans le config.tomldossier:

config.toml

digital_ocean_url="https://www.digitalocean.com/products/droplets"

Enregistrez et fermez le fichier.

L'arborescence du répertoire du projet ressemblera maintenant à ceci :

Arborescence de répertoires montrant chacun des fichiers du projet

Dans cette étape, vous avez écrit les trois tests que vous utiliserez. Vous avez également défini le config.toml fichier sur lequel reposent les tests. Vous exécuterez les tests à l'étape suivante.

Étape 3 - Exécution des tests

Il existe de nombreuses options pour utiliser l'exécuteur de test Playwright dans la CLI, telles que l'exécution de tous les tests avec tous les navigateurs, la désactivation de la parallélisation, l'exécution d'un ensemble de fichiers de test et l'exécution en mode débogage, entre autres. Dans cette étape, vous exécuterez les tests avec tous les navigateurs.

Tout d'abord, exécutez cette commande :

npx playwright test --browser=all

Vous devriez pouvoir voir les résultats du test comme suit :

OutputRunning 9 tests using 1 worker

  ✓  [chromium] › tests/multiplePackages.spec.ts:4:1 › Expect to have 3 packages for subscription (6s)
  ✓  [chromium] › tests/pricingComparison.spec.ts:4:1 › Expect to have 3 packages for subscription (4s)
  ✓  [chromium] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (3s)
  ✓  [firefox] › tests/multiplePackages.spec.ts:4:1 › Expect to have 3 packages for subscription (9s)
  ✓  [firefox] › tests/pricingComparison.spec.ts:4:1 › Expect to have 3 packages for subscription (5s)
  ✓  [firefox] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (7s)
  ✓  [webkit] › tests/multiplePackages.spec.ts:4:1 › Expect to have 3 packages for subscription (7s)
  ✓  [webkit] › tests/pricingComparison.spec.ts:4:1 › Expect to have 3 packages for subscription (6s)
  ✓  [webkit] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (6s)


  9 passed (1m)

La coche indique que tous les tests ont réussi dans les trois navigateurs (Chromium, Firefox et Webkit).

Le nombre de nœuds de calcul dépendra du nombre de cœurs utilisés par le serveur actuel et de la configuration actuelle du test. Vous pouvez limiter le nombre de travailleurs en définissant le workers valeur dans le playwright.config.ts dossier. Pour plus d'informations sur la configuration des tests, vous pouvez lire la documentation du produit Playwright.

Le testeur Playwright fournit plusieurs options pour le rapport de test qui peuvent être intégrées dans des outils CI tels que Jenkins ou CircleCI. Pour plus d'informations sur les rapports de test, consultez la page de documentation Playwright test reporters.

Pour ce didacticiel, vous exécuterez le test avec le fichier de rapport HTML, qui offre une lisibilité plus facile que l'affichage des tests dans l'interface de ligne de commande.

Exécutez cette commande pour le rapport de test HTML :

npx playwright test --browser=all --reporter=html

Vous verrez un résultat comme celui-ci :

OutputRunning 9 tests using 2 workers

  9 passed (40s)

To open last HTML report run:

  npx playwright show-report

Pour afficher le rapport HTML, exécutez :

npx playwright show-report

Vous verrez une sortie comme celle-ci :

OutputServing HTML report at http://your_ip_address:9323. Press Ctrl+C to quit.

Vous devriez maintenant pouvoir accéder à votre rapport via le port 9323.

Remarque : Si vous accédez au serveur à distance, vous devrez exposer votre serveur distant à la machine locale actuelle pour afficher le rapport de test dans votre navigateur local. Dans une nouvelle session de terminal sur votre ordinateur local, exécutez la commande suivante :

ssh -L 9323:localhost:9323 [email protected]_server_ip

La redirection de port SSH redirigera le port du serveur vers le port local. La -L 9323:localhost:9323 section identifie ce port 9323 sur la machine locale seront redirigés vers le même port sur le serveur distant.

Vous devriez maintenant pouvoir afficher le rapport de test en accédant à http://localhost:9323 dans un navigateur sur votre machine locale.


Lors du chargement de votre rapport dans le navigateur, vous constaterez que chaque test a été exécuté sur trois navigateurs : Chromium, Firefox et Webkit. Vous saurez combien de temps chaque test a pris pour s'exécuter sur chaque navigateur, ainsi que la durée de l'ensemble du test.

Rapport global séparé en trois tests différents

Cliquez sur le nom du rapport pour afficher les détails.

Détails du rapport indiquant la durée de chaque élément du test

Dans la section des détails, les étapes d'exécution du test comprendront Before Hooks et After Hooks étapes par défaut. La Before Hooks est souvent utilisée pour la configuration initiale, comme la connexion à la console ou la lecture des données de test. Après l'exécution du test, le After Hooks nettoiera souvent les données de test dans l'environnement de test. Il y a des détails pour chaque étape du test, y compris la visite de l'URL avec page.goto(), en attendant que la page se charge avec page.waitForLoadState(), en comptant les méthodes d'inscription avec locator.count(), et en vérifiant que les valeurs correspondent à expect.toBe.

Au cours de cette étape, vous avez exécuté les trois tests, examiné leur état de réussite et affiché les résultats des tests aux formats CLI et HTML. Ensuite, vous allez automatiser les tests avec Docker.

Étape 4 - Déploiement des tests avec Docker

Lors de la mise en œuvre de l'automatisation des tests, vous pouvez être confronté à des problèmes environnementaux. Certains tests s'exécuteront comme prévu sur la machine locale d'un ingénieur de test, mais échoueront lorsqu'ils seront intégrés au pipeline CI/CD en raison de problèmes de compatibilité avec l'environnement. Pour éviter ce problème, vous pouvez utiliser des conteneurs Docker pour exécuter des tests d'automatisation, que vous configurerez à cette étape. Si les tests s'exécutent comme prévu dans l'environnement local avec Docker, il est fort probable que vous puissiez éviter les problèmes de compatibilité dans le pipeline CI/CD.

Tout d'abord, vous mettrez à jour le package.json fichier pour ajouter les scripts de test nécessaires qui s'exécuteront ultérieurement dans Docker. Ouvrez le fichier :

nano package.json

Ajoutez les lignes en surbrillance au scripts rubrique dans la package.json dossier:

package.json

...
 "scripts": {
  "test": "playwright test --browser=all",
  "test-html-report": "playwright test --browser=all --reporter=html",
  "test-json-report": "PLAYWRIGHT_JSON_OUTPUT_NAME=results.json playwright test --browser=chromium --reporter=json"
  },

Ces scripts exécuteront les tests personnalisés au lieu de taper la commande complète. Lorsque vous aurez besoin d'exécuter le test avec l'affichage du reporter en HTML, vous pourrez désormais exécuter cette commande :

npm run test-html-report

A la place de la commande complète :

npx playwright test --browser=all --reporter=html

Votre actuel package.json ressemblera à ceci :

{
  "name": "playwright-docker",
  "version": "1.0.0",
  "description": "A project for using playwright for end-to-end testing purpose with docker for deployment",
  "main": "index.js",
  "scripts": {
  "test": "playwright test --browser=all",
  "test-html-report": "playwright test --browser=all --reporter=html",
  "test-json-report": "PLAYWRIGHT_JSON_OUTPUT_NAME=results.json playwright test --browser=chromium --reporter=json"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
  "@playwright/test": "^1.22.2",
  "@types/node": "^17.0.35",
  "playwright": "^1.22.1",
  "toml": "^3.0.0",
  "typescript": "^4.6.4"
  }
}

Enregistrez et fermez le fichier.

Ensuite, créez et ouvrez un Dockerfile dans le répertoire courant :

nano Dockerfile

Ajoutez-y ensuite le contenu suivant :

Fichier Docker

# Get the base image of Node version 16
FROM node:16

# Get the latest version of Playwright
FROM mcr.microsoft.com/playwright:focal
 
# Set the work directory for the application
WORKDIR /app
 
# Set the environment path to node_modules/.bin
ENV PATH /app/node_modules/.bin:$PATH

# COPY the needed files to the app folder in Docker image
COPY package.json /app/
COPY tests/ /app/tests/
COPY tsconfig.json /app/
COPY config.toml /app/

# Get the needed libraries to run Playwright
RUN apt-get update && apt-get -y install libnss3 libatk-bridge2.0-0 libdrm-dev libxkbcommon-dev libgbm-dev libasound-dev libatspi2.0-0 libxshmfence-dev

# Install the dependencies in Node environment
RUN npm install

Tout d'abord, vous obtenez l'image de base de la version 16 de Node et de la version Playwright focal à mettre dans votre image Docker. Les tests nécessitent Node et Playwright pour s'exécuter.

Ensuite, vous définissez le nom du répertoire du projet dans le conteneur. Dans ce cas, c'est WORKDIR. Paramètre WORKDIR /app mettra tous vos fichiers à l'intérieur du /app répertoire à l'intérieur du conteneur.

Vous définissez le chemin d'environnement pour le conteneur Docker avec ENV PATH. Dans ce cas, vous le réglez sur node_modules annuaire.

Ensuite, vous copiez tous les fichiers nécessaires dans le /app répertoire dans l'image Docker.

Étant donné que Playwright nécessite certaines dépendances pour s'exécuter, vous installerez également ces dépendances dans l'image Docker.

Enregistrez et fermez le fichier.

Ensuite, vous allez créer l'image de votre projet d'automatisation :

docker build -t playwright-docker .

Docker trouvera Dockerfile dans le répertoire courant et construisez l'image en suivant les instructions à l'intérieur Dockerfile. La -t flag marque l'image Docker en la nommant playwright-docker. La . dit à Docker de rechercher Dockerfile dans ce répertoire courant. Vous pouvez consulter la documentation des produits Docker pour en savoir plus sur la création d'images Docker.

La sortie de construction (raccourcie pour plus de concision) ressemblera à ceci :

OutputSending build context to Docker daemon  76.61MB
...
added 6 packages, and audited 7 packages in 6s

found 0 vulnerabilities
Removing intermediate container 87520d179fd1
 ---> 433ae116d06a
Successfully built 433ae116d06a
Successfully tagged playwright-docker:latest

Les tests peuvent ne pas s'exécuter correctement sous Windows ou MacOS en raison de dépendances conflictuelles ou de dépendances manquantes lors de la configuration initiale, mais l'utilisation de Docker pour exécuter les tests devrait éviter ces problèmes de configuration de l'environnement. Avec Docker, votre image de base contient toutes les dépendances requises. Les tests peuvent être exécutés sur différents systèmes d'exploitation tant que Docker est installé.

Vérifiez si l'image Docker a été créée avec succès :

docker image ls

Le résultat devrait ressembler à ceci :

OutputREPOSITORY                  TAG     IMAGE ID    CREATED       SIZE
playwright-docker           latest  433ae116d06a   5 minutes ago   1.92GB
mcr.microsoft.com/playwright   focal  bb9872cfd272   2 days ago   1.76GB
node                        16      c6b745e900c7   6 days ago   907MB

Tu vas avoir playwright-docker (l'image d'essai), microsoft playwright, et node images. Vous pouvez également avoir des images pour ubuntu et hello-world à partir du prérequis d'installation de Docker.

Exécutez maintenant la commande de test dans votre conteneur Docker en utilisant docker run:

docker run -it playwright-docker:latest npm run test

docker run exécutera l'image Docker spécifiée avec la commande. Dans cet exemple, l'image est playwright-docker:latest et la commande est npm run test. docker run affichera d'abord le conteneur Docker, puis exécutera la commande nécessaire. Vous pouvez en savoir plus dans la documentation des produits Docker.

Le résultat ressemblera à ceci :

Output> [email protected] test
> playwright test --browser=all


Running 9 tests using 2 workers

  ✓  [chromium] › tests/pricingComparison.spec.ts:4:1 › Expect to have 4 pricing options (7s)
  ✓  [chromium] › tests/multiplePackages.spec.ts:4:1 › Expect to have 2 packages for subscription (8s)
  ✓  [chromium] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (8s)
  ✓  [firefox] › tests/multiplePackages.spec.ts:4:1 › Expect to have 2 packages for subscription (9s)
  ✓  [firefox] › tests/pricingComparison.spec.ts:4:1 › Expect to have 4 pricing options (8s)
  ✓  [firefox] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (5s)
  ✓  [webkit] › tests/multiplePackages.spec.ts:4:1 › Expect to have 2 packages for subscription (8s)
  ✓  [webkit] › tests/pricingComparison.spec.ts:4:1 › Expect to have 4 pricing options (10s)
  ✓  [webkit] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (7s)


  9 passed (41s)

Les tests ont maintenant été exécutés avec succès dans l'environnement Docker. Vous pouvez en toute sécurité mettre à jour le code dans le référentiel distant, et les administrateurs système peuvent intégrer le test d'automatisation dans le pipeline CI/CD.

Vous pouvez également consulter les fichiers créés dans cet article dans ce référentiel.

Conclusion

Vous avez maintenant utilisé Playwright pour les tests de bout en bout et déployé les tests avec Docker. Pour en savoir plus sur Playwright, consultez la Documentation Playwright.

Vous pouvez en savoir plus sur l'écosystème Docker pour en savoir plus sur Docker. La documentation du produit Docker contient également des meilleures pratiques pour l'écriture de Dockerfiles et un Guide de référence Dockerfile. Pour continuer votre travail avec Docker, vous pouvez essayer d'autres tutoriels Docker.