Automatisiertes UI Testing mit Cypress & Gitlab CI
Um robuste WebApps zu erstellen, muss ausführlich getestet werden. Im besten Falle passiert dies mittels einer Kombination aus automatisierten Tests und manuellen Tests von Usern. Für automatisierte Front-End-Tests wird bei uns Cypress eingesetzt. Cypress ist ein Framework zum Testen von Webanwendungen oder von in JavaScript geschriebenen Komponenten, basierend auf NodeJs. Die Use-Cases werden im Editor des Vertrauens konfiguriert und für das erste Testen in der Cypress Umgebung in Echtzeit ausgeführt.
Eine Konfiguration für einen Test bei dem man unsere Webseite aufruft und abfragt, ob ein gewisser Text vorhanden ist, könnte beispielsweise so aussehen:
describe('Studio Mitte', () => {
it(`Visit website`, () => {
cy.visit('https://www.studiomitte.com/')
cy.contains('Tummelplatz 3');
cy.contains('4020 Linz');
});
})
Wie haben wir das gelöst?
Es wird eine neue Stage in der Datei .gitlab-ci.yml erstellt werden, zB. mit dem Namen cypress-test. Diese wird folgenderweise definiert:
- Als Docker-Image wird eines der offiziellen Cypress Docker Images verwendet (bspw. eines der 'included'-Images, welches alle Dependencies der Betriebssysteme, Cypress und einige Browser installiert).
- Die Tests sollen manuell ausgeführt werden
- Beim Ablauf wird zuerst in das Directory mit den Tests gewechselt (beinhaltet die Cypress Konfiguration cypress.config.js). Danach werden die Cypress-Tests mit einem einem headless Browser ausgeführt.
cypress-test:
image:
name: cypress/included:12.2.0
entrypoint: [""]
stage: cypress-test
when: manual
script:
- cd ${APP_DIRECTORY_CYPRESS}
- cypress run --headless --e2e
Cypress erstellt automatisch Screenshots von jedem gescheiterten Test und ein Video von dem gesamten Testdurchlauf. Wenn die Screenshots und das Video als Gitlab Artefakte verfügbar sein sollen, damit man sie ansehen und herunterladen kann, sollte die Konfiguration noch um den artifacts Abschnitt ergänzt weren.
cypress-test:
image:
name: cypress/included:12.2.0
entrypoint: [""]
stage: cypress-test
when: manual
script:
- cd ${APP_DIRECTORY_CYPRESS}
- cypress run --headless --e2e
artifacts:
when: always
paths:
- ${APP_DIRECTORY_CYPRESS}/cypress/videos/**/*.mp4
- ${APP_DIRECTORY_CYPRESS}/cypress/screenshots/**/*.png
expire_in: 1 day
