[Atelier pour débutants] Écrivons un test E2E avec Cloud9 + Docker Compose + Cypress!
introduction
[Atelier pour débutants] Faisons tout, de la publication d'applications à l'automatisation des tests CI / CD + E2E avec Cloud9 + React + TypeScript + Amplify + Cypress! J'ai écrit un article pour découvrir l'ensemble du processus, de la publication de l'application aux tests CI / CD et E2E. Cette fois, j'ai réalisé un tutoriel pour expérimenter rapidement le processus de croissance progressive des tests E2E tout en développant des applications. Le contenu est conçu pour que vous puissiez l'essayer en une heure environ!
Construire un environnement de développement
Utilisez AWS Cloud 9, un environnement de développement intégré (IDE) basé sur le cloud. Nous allons créer un environnement dans lequel Docker Compose peut s'exécuter sur Cloud9. Cypress est installé lors de la construction de Docker, il n'est donc pas nécessaire d'installer les commandes npm.
Si vous n'avez pas encore acquis de compte AWS, veuillez vous reporter au [flux de création de compte AWS] officiel (https://aws.amazon.com/jp/register-flow/). Veuillez avoir un compte.
Configuration d'AWS Cloud 9
- Connectez-vous à AWS Management Console et sélectionnez AWS Cloud 9 dans Services
- Région: Tokyo
- Cliquez sur le bouton "Créer un environnement"
- Entrez l'élément d'environnement Nom (ce qui suit est un exemple) et cliquez sur le bouton "Étape suivante".
- Name : e2e-workshop
- Description : cypress E2E test workshop *
- Entrez l'élément Configurer les paramètres (ce qui suit est un exemple) et cliquez sur le bouton "Étape suivante".
- Environment type : Create a new EC2 instance for environment (direct access)
- Instance type : t2.small
- Sélectionnez un autre type d'instance
- Platform : Amazon Linux
- Cost-saving setting : after 30 minutes (default) *
- Vérifiez les paramètres et cliquez sur "Créer un environnement" *
- Si l'écran suivant s'affiche après un certain temps, il est terminé. *
Étendez la zone de volume EBS utilisée par AWS Cloud9
Au fur et à mesure que nous procédons à l'atelier, nous construirons Docker, il n'y aura donc pas suffisamment d'espace dans le processus d'exécution de la construction. Nous vous recommandons d'augmenter le volume à l'avance en vous référant à cet article. Je l'ai augmenté à 10 Go -> 20 Go avec une marge. Étendez la zone de volume EBS utilisée par AWS Cloud9
Installation des packages requis
Docker Compose Docker est inclus en standard, mais Docker Compose n'est pas inclus et doit être installé. (Au 09/09/2020)
ec2-user:~/environment $ docker -v
Docker version 19.03.6-ce, build 369ce74
ec2-user:~/environment $ docker-compose -v
bash: docker-compose: command not found
Installez en vous référant à la procédure dans Documents officiels.
Téléchargez la version actuelle stable de Docker Compose
Ce qui suit est le dernier en date du 09/09/2020.
$ sudo curl -L "https://github.com/docker/compose/releases/download/1.27.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose
$ docker-compose -v
docker-compose version 1.27.0, build 980ec85b
Obtenez un exemple de code pour essayer les tests E2E avec Cypress
Un exemple de code pour les tests E2E avec Cypress pour les applications locales utilisant Docker est disponible sur Github, donc cette fois nous l'utiliserons. https://github.com/cypress-io/cypress-example-docker-compose
Obtenir un exemple de code
Cette fois, nous n'impliquerons pas de s'engager sur Github et CI / CD déclenché par celui-ci, nous allons donc cloner le référentiel d'origine sans Forking le référentiel Github.
Pour https
$ git clone https://github.com/cypress-io/cypress-example-docker-compose.git
$ cd cypress-example-docker-compose
Pour ssh
$ git clone [email protected]:cypress-io/cypress-example-docker-compose.git
$ cd cypress-example-docker-compose
Construisez le conteneur
Exécutez la construction du conteneur Docker.
$ docker-compose build sera exécuté.
$ npm run build
> [email protected] build /home/ec2-user/environment/cypress-example-docker-compose
> docker-compose build
Building web
Step 1/4 : FROM httpd:2.4
---> a6ea92c35c43
Step 2/4 : RUN echo "ServerName localhost" >> /usr/local/apache2/conf/httpd.conf
---> Using cache
---> e132eaf0b6d6
Step 3/4 : COPY index.html /usr/local/apache2/htdocs/
---> Using cache
---> a79afef5fb17
Step 4/4 : EXPOSE 80
---> Using cache
---> 0ba9c6797d6d
Successfully built 0ba9c6797d6d
Successfully tagged apache:latest
Building e2e
Step 1/7 : FROM cypress/base:10
10: Pulling from cypress/base
d6ff36c9ec48: Pull complete
c958d65b3090: Pull complete
edaf0a6b092f: Pull complete
80931cf68816: Pull complete
bc1b8aca3825: Pull complete
ad9790d89c32: Pull complete
6085b6a0249c: Pull complete
6af9e71c78d2: Pull complete
d85bae49b22d: Pull complete
f6c8ce594b00: Pull complete
d67d7860a80a: Pull complete
b3a1dfd049d1: Pull complete
6fb47a9e5454: Pull complete
Digest: sha256:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Status: Downloaded newer image for cypress/base:10
---> 071155d6ed07
Step 2/7 : WORKDIR /app
---> Running in 468f37420452
Removing intermediate container 468f37420452
---> 2f1c6d19e291
Step 3/7 : COPY package.json .
---> 90ec115cb213
Step 4/7 : COPY package-lock.json .
---> 54e720d60a87
Step 5/7 : ENV CI=1
---> Running in 5e56a602e37c
Removing intermediate container 5e56a602e37c
---> 670f913b90e6
Step 6/7 : RUN npm ci
---> Running in d511a99685c5
> [email protected] postinstall /app/node_modules/cypress
> node index.js --exec install
[14:40:14] Downloading Cypress [started]
[14:40:17] Downloading Cypress [completed]
[14:40:17] Unzipping Cypress [started]
[14:40:33] Unzipping Cypress [completed]
[14:40:33] Finishing Installation [started]
[14:40:33] Finishing Installation [completed]
added 216 packages in 25.818s
Removing intermediate container d511a99685c5
---> 8dc49d0f8503
Step 7/7 : RUN npx cypress verify
---> Running in aa9a7fb8a0d9
[14:41:10] Verifying Cypress can run /root/.cache/Cypress/5.1.0/Cypress [started]
[14:41:14] Verifying Cypress can run /root/.cache/Cypress/5.1.0/Cypress [completed]
Removing intermediate container aa9a7fb8a0d9
---> 0a5f502ade2e
Successfully built 0a5f502ade2e
Successfully tagged cypress:latest
Lancez une application Web et exécutez un test E2E à l'aide de Cypress
Tout d'abord, assurons-nous que le test ne fonctionne pas.
Et voyons de quoi nous sommes heureux avec Cypress.
$ docker-compose build sera exécuté.
$ npm run up
> [email protected] up /home/ec2-user/environment/cypress-example-docker-compose
> docker-compose up --abort-on-container-exit --exit-code-from e2e
Creating network "cypress-example-docker-compose_default" with the default driver
Creating apache ... done
Creating cypress ... done
Attaching to apache, cypress
apache | [Wed Sep 09 14:44:05.645451 2020] [mpm_event:notice] [pid 1:tid 140649514787968] AH00489: Apache/2.4.46 (Unix) configured -- resuming normal operations
apache | [Wed Sep 09 14:44:05.664458 2020] [core:notice] [pid 1:tid 140649514787968] AH00094: Command line: 'httpd -D FOREGROUND'
cypress |
cypress | ====================================================================================================
cypress |
cypress | (Run Starting)
cypress |
cypress | ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
cypress | │ Cypress: 5.1.0 │
cypress | │ Browser: Electron 83 (headless) │
cypress | │ Specs: 1 found (spec.js) │
cypress | └────────────────────────────────────────────────────────────────────────────────────────────────┘
cypress |
cypress |
cypress | ────────────────────────────────────────────────────────────────────────────────────────────────────
cypress |
cypress | Running: spec.js (1 of 1)
apache | 172.18.0.3 - - [09/Sep/2020:14:44:15 +0000] "GET / HTTP/1.1" 200 27
cypress |
cypress | (Results)
cypress |
cypress | ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
cypress | │ Tests: 1 │
cypress | │ Passing: 1 │
cypress | │ Failing: 0 │
cypress | │ Pending: 0 │
cypress | │ Skipped: 0 │
cypress | │ Screenshots: 0 │
cypress | │ Video: true │
cypress | │ Duration: 0 seconds │
cypress | │ Spec Ran: spec.js │
cypress | └────────────────────────────────────────────────────────────────────────────────────────────────┘
cypress |
cypress |
cypress | (Video)
cypress |
cypress | - Started processing: Compressing to 32 CRF
cypress | - Finished processing: /app/cypress/videos/spec.js.mp4 (1 second)
cypress |
cypress |
cypress | ====================================================================================================
cypress |
cypress | (Run Finished)
cypress |
cypress |
cypress | Spec Tests Passing Failing Pending Skipped
cypress | ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
cypress | │ ✔ spec.js 342ms 1 1 - - - │
cypress | └────────────────────────────────────────────────────────────────────────────────────────────────┘
cypress | ✔ All specs passed! 342ms 1 1 - - -
cypress |
cypress exited with code 0
Aborting on container exit...
Stopping apache ... done
Bonne chose partie 1
Il faudra une vidéo sans permission et la quitter.
Emplacement de stockage vidéo
$ ls -l e2e/cypress/videos/spec.js.mp4
-rw-r--r-- 1 root root 29169 Sep 9 14:44 e2e/cypress/videos/spec.js.mp4
Lors de la visualisation de vidéos et d'images sur AWS Cloud9, placez le curseur de la souris sur le fichier comme indiqué ci-dessous, cliquez avec le bouton droit de la souris et sélectionnez «Aperçu» pour l'afficher.
[E2e / cypress / videos / spec.js.mp4 converti en gif]
Bonne chose partie 2
Avec Selenium, vous pouvez insérer du code comme `page.save_screenshot'failed.png '' où il pourrait échouer et laisser une capture d'écran. Par défaut, Cypress laissera une image fixe lorsque le test échouera sans aucun travail particulier. La vidéo restera, vous pouvez donc la vérifier à partir de là, mais elle est ici! Les images fixes sont plus faciles à comprendre. Voici un exemple de l'échec de la modification de la vérification que le résultat attendu "Salut là-bas" est affiché sur "Salut là-bas".
$ git diff
diff --git a/e2e/cypress/integration/spec.js b/e2e/cypress/integration/spec.js
index 5e90f2d..809de14 100644
--- a/e2e/cypress/integration/spec.js
+++ b/e2e/cypress/integration/spec.js
@@ -1,4 +1,4 @@
it('loads page', () => {
cy.visit('/')
- cy.contains('Hi there')
+ cy.contains('Hey there')
})
$ npm run up
> [email protected] up /home/ec2-user/environment/cypress-example-docker-compose
> docker-compose up --abort-on-container-exit --exit-code-from e2e
Starting apache ... done
Starting cypress ... done
Attaching to apache, cypress
apache | [Wed Sep 09 14:55:49.753051 2020] [mpm_event:notice] [pid 1:tid 140399861245056] AH00489: Apache/2.4.46 (Unix) configured -- resuming normal operations
apache | [Wed Sep 09 14:55:49.753761 2020] [core:notice] [pid 1:tid 140399861245056] AH00094: Command line: 'httpd -D FOREGROUND'
cypress |
cypress | ====================================================================================================
cypress |
cypress | (Run Starting)
cypress |
cypress | ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
cypress | │ Cypress: 5.1.0 │
cypress | │ Browser: Electron 83 (headless) │
cypress | │ Specs: 1 found (spec.js) │
cypress | └────────────────────────────────────────────────────────────────────────────────────────────────┘
cypress |
cypress |
cypress | ────────────────────────────────────────────────────────────────────────────────────────────────────
cypress |
cypress | Running: spec.js (1 of 1)
apache | 172.18.0.3 - - [09/Sep/2020:14:55:59 +0000] "GET / HTTP/1.1" 200 27
cypress |
cypress | (Results)
cypress |
cypress | ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
cypress | │ Tests: 1 │
cypress | │ Passing: 0 │
cypress | │ Failing: 1 │
cypress | │ Pending: 0 │
cypress | │ Skipped: 0 │
cypress | │ Screenshots: 1 │
cypress | │ Video: true │
cypress | │ Duration: 4 seconds │
cypress | │ Spec Ran: spec.js │
cypress | └────────────────────────────────────────────────────────────────────────────────────────────────┘
cypress |
cypress |
cypress | (Screenshots)
cypress |
cypress | - /app/cypress/screenshots/spec.js/loads page (failed).png (1280x720)
cypress |
cypress |
cypress | (Video)
cypress |
cypress | - Started processing: Compressing to 32 CRF
cypress | - Finished processing: /app/cypress/videos/spec.js.mp4 (2 seconds)
cypress |
cypress |
cypress | ====================================================================================================
cypress |
cypress | (Run Finished)
cypress |
cypress |
cypress | Spec Tests Passing Failing Pending Skipped
cypress | ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
cypress | │ ✖ spec.js 00:04 1 - 1 - - │
cypress | └────────────────────────────────────────────────────────────────────────────────────────────────┘
cypress | ✖ 1 of 1 failed (100%) 00:04 1 - 1 - -
cypress |
cypress exited with code 1
Emplacement de stockage des images fixes prises lorsque le test échoue
$ ls -l e2e/cypress/screenshots/spec.js/loads\ page\ \(failed\).png
-rw-r--r-- 1 root root 29790 Sep 9 14:56 e2e/cypress/screenshots/spec.js/loads page (failed).png
[e2e/cypress/screenshots/spec.js/loads\ page\ (failed).png ]
Vous pouvez voir que c'est "Hey there" même si vous attendez "Salut là-bas"!
Atelier-Développons en écrivant un test-
Développement piloté par les tests (TDD)
Le développement piloté par les tests (TDD) est une méthode de développement de programme axée sur les tests. En d'autres termes, il s'agit d'une méthode d'écriture de code de test avant d'implémenter le programme, et de procéder à l'implémentation et à la refactorisation pour correspondre au code de test. Le développement piloté par les tests se déroule dans l'ordre "Rouge", "Vert" et "Refactoring". Le développement piloté par les tests présente les avantages suivants:
- Il est possible d'empêcher le bogue d'être reporté au processus suivant.
- Peut détecter et corriger les défauts dans les premiers stades de développement
- Rédiger un test = comprendre les spécifications à un stade précoce
- Au fur et à mesure que le développement progresse, vous pouvez l'empêcher de devenir "Et à propos de ça?"
- Peut être développé en toute confiance
- En créant d'abord le test, vous pouvez toujours garantir que le test n'est pas interrompu si vous exécutez le test au point requis même si vous écrivez le code d'application.
Red
- Écrire un code de test pour s'assurer que les exigences de la fonction implémentée sont satisfaites
- Le test échoue **
Green
- Écrivez tout code qui répond aux exigences et testez avec succès
- Le test est ** réussi **
Refactoring
- Modifiez le code pour qu'il soit concis et clair tout en maintenant un test réussi
Puisque le code de test est écrit avant le programme de la fonction que vous souhaitez implémenter, le test échoue dans un premier temps, mais l'implémentation et la modification du programme sont répétées plusieurs fois dans un cycle court pour éliminer le bogue, et si vous pouvez écrire le code qui fonctionne correctement, refactoriser tenir.
À partir de là, n'hésitez pas à réfléchir aux exigences fonctionnelles et à procéder à la mise en œuvre des tests et à la mise en œuvre de l'application.
Voici quelques exemples d'exigences.
Veuillez vous y référer et décider des spécifications d'origine avant de continuer.
Utilisez HTML ou CSS pour implémenter la page Web.
Lorsque vous écrivez du HTML, veuillez noter que si vous oubliez d'écrire <meta charset =" utf-8 "/>, les caractères japonais seront brouillés.
Pour CSS, voir [Note] CSS Reintroduction-Selector-.
[Exemple d'exigence]
Créez une page d'auto-présentation. L'auto-introduction comprend:
- Nom
- Âge
- Passe-temps
[Image de la page à implémenter]
1. Rédiger un test pour s'assurer qu'il répond aux exigences de la fonctionnalité implémentée
Pour ceux qui demandent, "Comment dois-je écrire un test pour cela?", J'ai également créé une collection de commandes, alors veuillez vous y référer. Collection de commandes Cypress dont je veux garder cela à l'esprit
e2e/cypress/integration/spec.js
it('load page', () => {
cy.visit('/')
cy.get('.title').should('have.text', 'La chambre de Rusty Nail')
cy.get('.summary').should('have.text', 'Ceci est la page d'auto-introduction de Rusty Nail.')
cy.get('.content__name').should('have.text', 'Rusty Nail')
cy.get('.content__age').should('have.text', '34 ans')
cy.get('.content__hobby').should('have.text', 'Tennis de table')
})
2. Exécutez le test (rouge: échoue)
Exécutez le test en exécutant $ npm run up.
Bien sûr, cela échoue car je n'ai encore écrit aucun test.
3. Implémentez l'application
webapp/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>La chambre de Rusty Nail</title>
</head>
<body>
<h1 class='title'>La chambre de Rusty Nail</h1>
<h2 class='summary'>Ceci est la page d'auto-introduction de Rusty Nail.</h2>
<ul class='content'>
<li class='content__name'>Rusty Nail</li>
<li class='content__age'>34 ans</li>
<li class='content__hobby'>Tennis de table</li>
</ul>
</body>
</html>
Exécutez $ npm run build pour mettre à jour les modifications de webapp / index.html vers l'image Docker.
4. Exécutez le test (vert: succès)
Exécutez à nouveau $ npm run up pour exécuter le test.
Le test est réussi car l'application qui répond aux exigences a également été implémentée.
Avec ce genre de sentiment, si vous voulez ajouter des "compétences spéciales", "nourriture préférée", etc. la prochaine fois Écrivez un test et répétez celui de l'implémentation.
prime
Dans l'atelier, nous avons utilisé le navigateur par défaut, mais vous pouvez le spécifier si différents navigateurs sont installés.
utilisé(Défaut)navigateur
cypress | ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
cypress | │ Cypress: 5.1.0 │
cypress | │ Browser: Electron 83 (headless) │
cypress | │ Specs: 1 found (spec.js) │
cypress | └────────────────────────────────────────────────────────────────────────────────────────────────┘
Dans l'atelier, l'installation du navigateur etc. est omise car elle préparera l'environnement Docker.
Spécification du navigateur à exécuter
Vous pouvez spécifier le navigateur comme suit. Pour plus de détails sur les navigateurs pris en charge, consultez le site officiel Launching Browsers.
Exemple de spécification de chrome
$ cypress run --browser chrome
Désignation de sans tête
Si vous souhaitez exécuter headless, spécifiez l'option --headless comme suit:
$ cypress run --browser chrome --headless
Recommended Posts