Website Testing mit Cypress für Contao

'Mathias Arzberger'
Mathias Arzberger

Die Contao Konferenz 2023 fand am 19. und 20.10.2023 im Atlantic Hotel in Kiel statt. Auch ich durfte eine Session zum Thema "Website Testing mit Cypress" halten. Es hat mich sehr gefreut das es so viele Interessierte zu diesem Thema gab und möchte an dieser Stelle den Vortrag und die Quellen und verlinken.

Session: Website Testing mit Cypress auf der Contao Konferenz 2023

Agenda

  • Was ist Cypress?
  • Warum sollte ich eine Website testen?
  • Welche Fehler kann ich durch Tests beheben?
  • Wer hat vor Cypress die Website getestet?
  • Welche Browser unterstützt Cypress?
  • Cypress installieren
  • Den ersten Test schreiben
  • Test laufen lassen
  • Was testet pdir in einem Kundenprojekt
  • Cypress Chrome Recorder
  • Cypress und Lighthouse
  • So unterstützen wir andere Agenturen
  • Ressourcen zum Vortrag

» Level: Grundkenntnisse in JavaScript erforderlich

Was ist Cypress?

Cypress Logo
  • End-to-End-Testframework für Web-Anwendungen, das auf JavaScript basiert und in Node.js ausgeführt wird.

Leistungsstark dank

  • In-Browser-Testausführung: Cypress führt Tests direkt im Browser aus, sodass Sie die Benutzer:innenerfahrung aus erster Hand testen können.
  • Ausführliche Fehlermeldungen: Cypress generiert ausführliche Fehlermeldungen, die dir helfen, Fehler zu finden und zu beheben.
  • Automatisierte Screenshot-Erstellung: Cypress erstellt automatisch Screenshots von fehlgeschlagenen Tests, um bei der Fehlerbehebung zu helfen.
  • Gute Integration mit IDEs: Cypress bietet eine gute Integration mit IDEs wie Visual Studio Code, PhpStorm und IntelliJ IDEA.

Warum sollte ich eine Website testen?

  • Vermeidung von Fehlern und Problemen
    • Besucherzahlen, Konversionsraten
  • Optimierung des Nutzererlebnisses
    • A/B Testing, was bevorzugen Besucher:innen?
  • Verbesserung der SEO
    • Meta-Tags, URL-Struktur, Indexierung
  • Reduzierung von Risiken
    • Schlechten Ruf und Rechtsstreitigkeiten vermeiden
  • Nachweis für beide Seiten
    • Bedingungen der Auftragsvergabe prüfen
    • Nachweis DSGVO

Fazit

Durch das Testen einer Website kann man diese Probleme identifizieren und beheben, bevor sie den Besucher:innen der Website begegnen. Dies trägt dazu bei, die Qualität der Website zu verbessern und die Nutzererfahrung zu optimieren.

Welche Fehler kann ich durch Website Tests beheben?

  • Technische Probleme
    • Fehler in der Programmierung aufdecken
    • Probleme der Ladegeschwindigkeit
    • Inkompatibilitäten mit Browser oder Geräten
    • Testen der Leistungsfähigkeit mit Google Lighthouse
  • Usability-Probleme
    • Navigation
    • Bedienbarkeit
    • Verständlichkeit der Inhalte
  • Design-Probleme
    • Ästhetik
    • Lesbarkeit
    • Konsistenz des Designs
  • Suchmaschinen-Indexierungsprobleme
    • Auffinden der sitemap.xml und robots.txt
    • Weiterleitungen
    • Indexierbare Seiten
  • Rechtliche Probleme
    • Pflichtangaben für bestimmte Branchen
    • 2-Klick-Regel des BGB
    • Consent für Cookies
    • Datenschutzhinweise für externe Dienst

Welche Browser werden von Cypress unterstützt?

  • Chrome
  • Chrome Beta
  • Chrome Canary
  • Chromium
  • Edge
  • Edge Beta
  • Edge Canary
  • Edge Dev
  • Electron
  • Firefox
  • Firefox Developer Edition
  • Firefox Nightly
  • WebKit (Experimental)

Was testet pdir in einem Kundenprojekt?

  • Aufruf der Website
  • Enthält das title- oder description-Tag bestimmte Wörter
  • Prüfen auf Cookies und Auflisten der Cookies
  • Weiterleitung SSL / www / kein www
  • Weiterleitung von Kurz-Url / QR-Codes
  • Sind Debug- oder Fehlermeldungen vorhanden
  • Sind bestimmte Unterseiten im Menü verlinkt
  • Prüfung von Formularen
  • Werden Formulardaten im Backend erfasst
  • Aufrufen aller Unterseiten, finden von 404 Links usw.
  • Kann die robots.txt und die sitemap.xml fehlerfrei geladen werden und sind bestimmte Inhalte vorhanden
  • Werden externe Scripte geladen (CDN, Tracking, iframe)
  • Google Lighthouse Tests
  • Prüfen aller Funktionen des Consent Manager
  • Prüfen aller Funktionen des Google Tag Manager
  • Auf valides HTML prüfen

Cypress installieren

Voraussetzung: Node.js ist bereits installiert.

npm init

npm install cypress --save-dev

npx cypress open

Den ersten Test schreiben

Cypress-Tests werden in JavaScript geschrieben und in Dateien mit der Endung .cy.js gespeichert

describe("Öffne meine Website", () => {
  it("Sollte eine Fehlermeldung anzeigen", () => {
    // Öffnen der Website
    cy.visit("/");
  });
});

Den Test laufen lassen 

# Öffnen der grafischen Oberfläche
npx run cypress open

Kürzere Befehle nutzen

Anpassen der package.json für kürzere Aufrufe von Cypress auf der Konsole

{
  "name": "ContaoKonferenz2023Kiel",
  "author": "pdir / digital agentur // pdir GmbH",
  "scripts": {
    "cy:open": "cypress open",
    "cy:run": "cypress run,
    "cy:audit:headless": "cypress run --headless --browser chrome"
  },
  "devDependencies": {
    "cypress": "^13.3.1",
  }
}

Öffne die grafische Oberfläche 

npm run cy:open

Führe die Tests in der Kommandozeile aus 

npm run cy:run

Cypress-Tests: So unterstützen wir andere Agenturen

  • Schulungen und Workshops: In Kursen die Grundlagen von Cypress erlernen und deine eigenen Tests erstellen.
  • Support und Beratung: Wir helfen Probleme mit Cypress zu lösen. Frage nach unserem Support-Plan.
  • Fertige Cypress-Tests für deine Anforderungen: Wir erstellen schnell und einfach hochwertige Tests für deine Kundenprojekte.

 

Ressourcen zum Vortrag

Download

Der Vortag als PDF

Links

Cypress Dokumentation https://docs.cypress.io/guides/getting-started/installing-cypress
Cypress Lighthouse https://mfrachet.github.io/cypress-audit/start-with-why.html
Pa11y https://pa11y.org/ bzw. https://github.com/pa11y/pa11y
Node.js https://nodejs.org/

Hinweis: Die Session auf der Contao Konferenz 2023 wurde aufgezeichnet und wird demnächst als Video zur Verfügung stehen.

Zurück

pdir+ webtools für Freelancer & Agenturen
Instagram
Facebook
Twitter
LinkedIn