[Workshop für Anfänger] Schreiben wir einen E2E-Test mit Cloud9 + Docker Compose + Cypress!
Einführung
[Workshop für Anfänger] Lassen Sie uns alles tun, von der Veröffentlichung von Apps bis zur CI / CD + E2E-Testautomatisierung mit Cloud9 + React + TypeScript + Amplify + Cypress! Ich habe einen Artikel geschrieben, um den gesamten Prozess von der Veröffentlichung der Anwendung bis zum Testen von CI / CD und E2E zu erleben. Dieses Mal habe ich ein Tutorial erstellt, um schnell zu erfahren, wie E2E-Tests während der Entwicklung von Anwendungen schrittweise erweitert werden. Der Inhalt ist so gestaltet, dass Sie ihn in etwa einer Stunde ausprobieren können!
Aufbau einer Entwicklungsumgebung
Verwenden Sie AWS Cloud 9, eine Cloud-basierte integrierte Entwicklungsumgebung (IDE). Wir werden eine Umgebung erstellen, in der Docker Compose unter Cloud9 ausgeführt werden kann. Cypress wird beim Erstellen von Docker installiert, sodass keine npm-Befehle installiert werden müssen.
Wenn Sie noch kein AWS-Konto erworben haben, lesen Sie bitte den offiziellen Ablauf für die Erstellung eines AWS-Kontos. Bitte haben Sie ein Konto.
AWS Cloud 9-Setup
- Melden Sie sich bei der AWS Management Console an und wählen Sie unter Dienste die Option AWS Cloud 9 aus
- Region: Tokio
- Klicken Sie auf die Schaltfläche "Umgebung erstellen"
- Geben Sie das Umgebungselement Name ein (das folgende ist ein Beispiel) und klicken Sie auf die Schaltfläche "Nächster Schritt".
- Name : e2e-workshop
- Description : cypress E2E test workshop *
- Geben Sie den Eintrag Einstellungen konfigurieren ein (das folgende ist ein Beispiel) und klicken Sie auf die Schaltfläche "Nächster Schritt".
- Environment type : Create a new EC2 instance for environment (direct access)
- Instance type : t2.small
- Wählen Sie aus einem anderen Instanztyp
- Platform : Amazon Linux
- Cost-saving setting : after 30 minutes (default) *
- Überprüfen Sie die Einstellungen und klicken Sie auf "Umgebung erstellen". *
- Wenn der folgende Bildschirm nach einer Weile angezeigt wird, ist er abgeschlossen. *
Erweitern Sie den von AWS Cloud9 verwendeten EBS-Volume-Bereich
Während wir mit dem Workshop fortfahren, werden wir Docker erstellen, sodass bei der Ausführung des Builds nicht genügend Speicherplatz zur Verfügung steht. Wir empfehlen Ihnen, das Volumen im Voraus zu erweitern, indem Sie auf diesen Artikel verweisen. Ich habe es mit einem Rand auf 10 GB -> 20 GB erhöht. Erweitern Sie den von AWS Cloud9 verwendeten EBS-Volume-Bereich
Installation der erforderlichen Pakete
Docker Compose Docker ist standardmäßig enthalten, Docker Compose ist jedoch nicht enthalten und muss installiert werden. (Stand 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
Installieren Sie die Installation gemäß dem Verfahren in Offizielle Dokumente.
Laden Sie die aktuelle stabile Release-Version von Docker Compose herunter
Das Folgende ist der späteste Stand vom 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
Holen Sie sich Beispielcode, um E2E-Tests mit Cypress zu versuchen
Beispielcode für E2E-Tests mit Cypress für lokale Anwendungen mit Docker ist auf Github verfügbar, daher werden wir ihn dieses Mal verwenden. https://github.com/cypress-io/cypress-example-docker-compose
Beispielcode abrufen
Dieses Mal müssen wir uns nicht auf Github und die von ihm ausgelöste CI / CD festlegen, sodass wir das ursprüngliche Repository klonen, ohne das Github-Repository zu forken.
Für https
$ git clone https://github.com/cypress-io/cypress-example-docker-compose.git
$ cd cypress-example-docker-compose
Für ssh
$ git clone [email protected]:cypress-io/cypress-example-docker-compose.git
$ cd cypress-example-docker-compose
Bauen Sie den Container
Führen Sie den Build des Docker-Containers aus.
$ docker-compose build wird ausgeführt.
$ 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
Starten Sie eine Webanwendung und führen Sie einen E2E-Test mit Cypress aus
Stellen wir zunächst sicher, dass der Test unberührt funktioniert.
Und mal sehen, worüber wir uns mit Cypress freuen.
$ docker-compose build wird ausgeführt.
$ 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
Glückliche Sache Teil 1
Es wird ein Video ohne Erlaubnis aufnehmen und es verlassen.
Videospeicherort
$ 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
Wenn Sie Videos und Bilder in AWS Cloud9 anzeigen, fokussieren Sie den Mauszeiger wie unten gezeigt auf die Datei, klicken Sie mit der rechten Maustaste und wählen Sie "Vorschau" zum Anzeigen.
[E2e / cypress / videos / spec.js.mp4 konvertiert zu gif]
Glückliche Sache Teil 2
Mit Selenium können Sie Code wie "page.save_screenshot'failed.png " einfügen, wo dies fehlschlagen kann, und einen Screenshot hinterlassen. Standardmäßig hinterlässt Cypress ein Standbild, wenn der Test ohne besondere Arbeit fehlschlägt. Das Video bleibt erhalten, sodass Sie es von dort aus überprüfen können, aber es ist hier! Standbilder sind leichter zu verstehen. Das folgende Beispiel zeigt, dass die Überprüfung, dass das erwartete Ergebnis "Hallo" angezeigt wird, nicht in "Hallo" geändert wird.
$ 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
Speicherort der Standbilder, die bei fehlgeschlagenem Test aufgenommen wurden
$ 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 ]
Sie können sehen, dass es "Hey there" ist, obwohl Sie "Hi there" erwarten!
Workshop-Lassen Sie uns entwickeln, während Sie einen Test schreiben-
Testgetriebene Entwicklung (TDD)
Test-Driven Development (TDD) ist eine Test-First-Programmentwicklungsmethode. Mit anderen Worten, es handelt sich um eine Methode zum Schreiben von Testcode vor der Implementierung des Programms und zum Fortfahren mit der Implementierung und dem Refactoring, um dem Testcode zu entsprechen. Die testgetriebene Entwicklung erfolgt in der Reihenfolge "Rot", "Grün" und "Refactoring". Testgetriebene Entwicklung hat folgende Vorteile:
- Es ist möglich zu verhindern, dass der Fehler auf den nachfolgenden Prozess übertragen wird.
- Kann Fehler in frühen Entwicklungsstadien erkennen und beheben
- Schreiben Sie einen Test = verstehen Sie die Spezifikationen frühzeitig
- Mit fortschreitender Entwicklung können Sie verhindern, dass daraus "Was ist damit?"
- Kann mit Vertrauen entwickelt werden
- Wenn Sie den Test zuerst erstellen, können Sie immer sicherstellen, dass der Test nicht unterbrochen wird, wenn Sie den Test an der erforderlichen Stelle ausführen, auch wenn Sie den Anwendungscode schreiben.
Red
- Schreiben Sie einen Testcode, um sicherzustellen, dass die Anforderungen der implementierten Funktion erfüllt sind
- Test schlägt fehl **
Green
- Schreiben Sie jeden Code, der die Anforderungen und Tests erfolgreich erfüllt
- Test ist ** erfolgreich **
Refactoring
- Ändern Sie den Code so, dass er präzise und klar ist, während Sie einen erfolgreichen Test beibehalten
Da der Testcode vor dem Programm der Funktion geschrieben wird, die Sie implementieren möchten, schlägt der Test zunächst fehl. Die Implementierung und Änderung des Programms wird jedoch in einem kurzen Zyklus viele Male wiederholt, um den Fehler zu beseitigen. Wenn Sie den Code schreiben können, der ordnungsgemäß funktioniert, wird das Refactoring durchgeführt halten.
Von hier aus können Sie über die funktionalen Anforderungen nachdenken und mit der Testimplementierung und Anwendungsimplementierung fortfahren. Hier einige Beispiele für Anforderungen. Bitte beziehen Sie sich darauf und legen Sie die ursprünglichen Spezifikationen fest, bevor Sie fortfahren. Verwenden Sie HTML oder CSS, um die Webseite zu implementieren. Beachten Sie beim Schreiben von HTML, dass japanische Zeichen verstümmelt werden, wenn Sie vergessen, "" zu schreiben. Informationen zu CSS finden Sie unter [Hinweis] CSS Reintroduction-Selector-.
[Anforderungsbeispiel]
Erstellen Sie eine Selbsteinführungsseite. Die Selbsteinführung beinhaltet:
- Name
- Alter
- Hobbys
[Bild der zu implementierenden Seite]
1. Schreiben Sie einen Test, um sicherzustellen, dass er den Anforderungen der implementierten Funktionalität entspricht
Für diejenigen, die fragen: "Wie soll ich einen Test dafür schreiben?", Habe ich auch eine Sammlung von Befehlen erstellt. Bitte beziehen Sie sich darauf. Cypress-Befehlssammlung, die ich berücksichtigen möchte
e2e/cypress/integration/spec.js
it('load page', () => {
cy.visit('/')
cy.get('.title').should('have.text', 'Rusty Nails Zimmer')
cy.get('.summary').should('have.text', 'Dies ist die Selbsteinführungsseite von Rusty Nail.')
cy.get('.content__name').should('have.text', 'Rusty Nail')
cy.get('.content__age').should('have.text', '34 Jahre alt')
cy.get('.content__hobby').should('have.text', 'Tischtennis')
})
2. Führen Sie den Test aus (Rot: schlägt fehl)
Führen Sie den Test aus, indem Sie "$ npm run up" ausführen. Natürlich scheitert es, weil ich noch keine Tests geschrieben habe.
3. Implementieren Sie die Anwendung
webapp/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Rusty Nails Zimmer</title>
</head>
<body>
<h1 class='title'>Rusty Nails Zimmer</h1>
<h2 class='summary'>Dies ist die Selbsteinführungsseite von Rusty Nail.</h2>
<ul class='content'>
<li class='content__name'>Rusty Nail</li>
<li class='content__age'>34 Jahre alt</li>
<li class='content__hobby'>Tischtennis</li>
</ul>
</body>
</html>
Führen Sie $ npm run build aus, um die Änderungen in webapp / index.html auf das Docker-Image zu aktualisieren.
4. Führen Sie den Test aus (Grün: Erfolg)
Führen Sie den Test erneut aus, indem Sie "$ npm run up" ausführen. Der Test ist erfolgreich, da auch die Anwendung implementiert wurde, die die Anforderungen erfüllt.
Mit dieser Art von Gefühl, wenn Sie beim nächsten Mal "besondere Fähigkeiten", "Lieblingsessen" usw. hinzufügen möchten, Schreiben Sie einen Test und wiederholen Sie die Implementierung.
Bonus
In der Werkstatt haben wir den Standardbrowser verwendet, aber Sie können ihn angeben, wenn verschiedene Browser installiert sind.
benutzt(Standard)Browser
cypress | ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
cypress | │ Cypress: 5.1.0 │
cypress | │ Browser: Electron 83 (headless) │
cypress | │ Specs: 1 found (spec.js) │
cypress | └────────────────────────────────────────────────────────────────────────────────────────────────┘
In der Werkstatt wird die Installation des Browsers usw. weggelassen, da dies die Docker-Umgebung vorbereitet.
Angabe des auszuführenden Browsers
Sie können den Browser wie folgt angeben. Einzelheiten zu unterstützten Browsern finden Sie im offiziellen Starten von Browsern.
Beispiel für die Angabe von Chrom
$ cypress run --browser chrome
Bezeichnung kopflos
Wenn Sie Headless ausführen möchten, geben Sie die Option "--headless" wie folgt an:
$ cypress run --browser chrome --headless
Recommended Posts