Dashboard

Real-World Beispiel:

• Dashboard: https://dashboard.cypress.io/projects/7s5okt
• Github-Repo: https://github.com/cypress-io/cypress-realworld-app
• Youtube Einführung: https://www.youtube.com/watch?v=ezp60FUnjGg

Der Cypress-Dashboard bietet u.a.:

• Load Balancing
• Zugriff auf aufgezeichnete Testergebnisse (typischerweise aus einer CI-Pipeline)
• Stack-Trace fehlgeschlagener Tests
• Screenshots fehlgeschlagener (oder per cy.screenshot() getriggert) Tests
• Video des Test-Runs
• Übersicht über die langsamsten Tests
• Integration der Cypress Tests in den GitHub-Workflow mittels commit status checks: https://docs.cypress.io/guides/dashboard/github-integration#Status-checks -> verhindert das Mergen eines Commits oder Pull-Requests, falls nicht alle Cypress Tests passed sind.
• Integration von Cypress in GitHub mittels Pull Requests: https://docs.cypress.io/guides/dashboard/github-integration#Pull-request-comments
• Integrationen für Slack, GitHub, GitLab, Bitbucket
• Analytics (u.a. Übersicht über häufigste Fehler)

der Free-Tier ist auf 3 User und 500 Test-Ergebnisse/Monat limitiert!

Zusätzlich käufliche Premium-Features:

• Flake Detection
• Smart Orchestration
  • Parallelization
  • Load Balancing
  • Run failed specs first
  • Cancel test run when a test fails
• Flake Mangement (coming soon)
• Jira Integration
• Mail-Support
• Github-Enterprise (coming soon)
• Gitlab for Enterprise (coming soon)
• Single Sign-On

https://cypress.io/pricing/

Component Testing (noch in Alpha-Status)

https://docs.cypress.io/guides/component-testing/introduction

import * as React from "react";
import { mount } from "@cypress/react";
import Button from "./Button";

it("Button", () => {
  mount(<Button>Test button</Button>);
  cy.get("button").contains("Test button").click();
});

• Komponenten können isoliert getestet werden

• Vergleichbar mit Jest-Komponententests in Storybook

• Aktuell verfügbar für React/Next und Vue über Webpack (Vite ist noch experimentell)

Visual Testing

https://docs.cypress.io/guides/tooling/visual-testing

• Lokal möglich, z.B. mittels https://github.com/meinaart/cypress-plugin-snapshots
• Cloud-Anbieter:
  • https://applitools.com/
  • https://percy.io/
  • https://happo.io/

// Beispiel: https://github.com/meinaart/cypress-plugin-snapshots
it('completes todo', () => {
  cy.visit('/');
  cy.get('.new-todo').type('write tests{enter}');
  cy.contains('.todo-list li', 'write tests');
    .find('.toggle')
    .check()
    .should('have.class', 'completed');
  // capture screenshot and compare to the baseline image
  cy.get('.todoapp').toMatchImageSnapshot({
    imageConfig: {
      threshold: 0.001,
    },
  })
})

CI/CD

• Github-Action verfügbar: https://github.com/marketplace/actions/cypress-io

• Gitlab: https://docs.cypress.io/guides/continuous-integration/gitlab-ci#Basic-Setup

• Jenkins: Testbench CS nutzt das Docker-Image in der Pipeline mit Reports im jUnit-Format

Code Coverage

https://docs.cypress.io/guides/tooling/code-coverage#Introduction

Code Coverage kann mit Istanbul angezeigt werden.

https://istanbul.js.org/

• Über das nyc-Modul (https://github.com/istanbuljs/nyc) dem Kommandzeilen-Interface von Istanbul

• Über Code-Transiplierung mittels dem Babel-Plugin-Istanbul (https://github.com/istanbuljs/babel-plugin-istanbul)

Für .lcov coverage-Files gibt es IDE-Plugins (z.B. Coverage-Gutters)

Coverage kann auch in CI integriert werden, z.B. auf GitHub: https://www.cypress.io/blog/2019/10/22/show-code-coverage-on-gitlab-ci/

Reporter

https://docs.cypress.io/guides/tooling/reporters

Best-Practices

https://docs.cypress.io/guides/references/best-practices

https://www.youtube.com/watch?v=5XQOK0v_YRE

Die wichtigsten Best-Practices…

• Tests sollen unabhängig voneinander sein
  • Tipp: .only beim Test setzen. Wird Test wiederholt grün ->
• Shortcuts nutzen: z.B. nur bei Login-Test selbst über UI, sonst API -> Performance!
• data-cy-Attribute als Selektoren nutzen
• after/afterEach-Hook wird nicht garantiert ausgeführt. Weitere Tests sollten nicht von einem TearDown-CleanUp abhängig sein.
  • Besser: before/beforeEach-Hook nutzen
• Warten auf Events (z.B. REST-Call fertig) statt z.B. wait von 2 Sekunden -> Flakiness!
• Commands und Assertions abwechseln: nur das letzte Kommando wird im Fehlerfall retried!!! > cy.get('.list li').should('have.length', 2).find('label').should('contain', 'todo B')
• Bei Tests die trotz Best-Practices und Refactoring Flaky bleiben -> Test-Retries nutzen
• cy.clock() bei Bedarf nutzen um sporadische Timestamp-Fehler zu vermeiden

Plugins

• https://docs.cypress.io/guides/tooling/plugins-guide

• https://docs.cypress.io/plugins/directory

Es ist möglich Cypress auch mit eigenen Plugins zu erweitern :-)