Learn Cypress - Dashboard & Reporting

#Introduction

Tests that run without recording their results are a black hole. Episode 11 covers the observability layer: the Cypress Dashboard, video recording and screenshots, reporters like Mochawesome for CI, and how to read run results and debug failures from the artifacts produced.

After this episode, you will be able to explain anything that happens in your suite — even when a test fails in CI at midnight.

#Cypress Dashboard Features

#Registering a Project with the Dashboard

The Cypress Dashboard is a cloud service that receives run results from the Test Runner. To use it, register your project once:

npx cypress open

npx cypress open opens the Test Runner; from the Runs menu you can create a project ID and set the recordKey. From then on, every run can be sent to the Dashboard with the --record flag.

#What the Dashboard Offers

Once connected, the Dashboard gives you a run summary: status per spec, duration, video, screenshots from failures, and flakiness analytics over time. The Smart Orchestration feature balances tests across all parallel runners automatically — we will use it in episode 14.

#Video Recording and Screenshots

#Enabling Recording

By default, Cypress records a video for every headless run and takes a screenshot when a test fails:

Video and screenshot configuration

module.exports = defineConfig({
  e2e: {
    video: true,
    screenshotOnRunFailure: true,
    trashAssetsBeforeRuns: true,
  },
});

video: true enables video recording to the cypress/videos folder. screenshotOnRunFailure: true ensures every failure captures an image of the screen state. These videos and screenshots are the primary evidence when debugging.

#Taking Screenshots Explicitly

Beyond the automatic ones, you can take screenshots at specific points:

Explicit screenshots

it("menampilkan halaman profil", () => {
  cy.visit("/profil");
  cy.get("[data-cy=kartu-profil]").should("be.visible");
  cy.screenshot("halaman-profil");
});

cy.screenshot("halaman-profil") saves an image with a specific name in the cypress/screenshots folder. Useful for visual documentation, regression reports, or comparison artifacts before we get into visual testing in episode 16.

#Reporters, Mochawesome, and CI Reporting

#The Mochawesome Reporter

For rich HTML reports, install the Mochawesome reporter:

npm install -D mochawesome

npm install -D mochawesome adds a reporter that produces HTML and JSON reports per spec. These reports can be merged and uploaded to CI as artifacts.

#Running with a Custom Reporter

npx cypress run --reporter mochawesome --reporter-options reportDir=cypress/reports

--reporter mochawesome replaces the default reporter. The reportDir=cypress/reports option specifies where reports are stored. The result is an HTML file that can be opened or archived in CI.

#Analyzing Test Runs and Debugging Failures

#Reading Reports and Artifacts

When a run finishes, a good debugging flow is: open the report, find the failed spec, open the failure screenshot, watch the video, then compare with the command log in the Dashboard. Also pay attention to the error message and stack trace printed by Cypress:

  X Berhasil login
      AssertionError: expected '/login' to include '/dashboard'

The message expected '/login' to include '/dashboard' shows the assertion that failed and the actual value. From this information, you know the test never made it to the dashboard — the cause could be wrong credentials, a broken redirect, or a submit element that was not clicked.

#Comparing Runs

The Dashboard shows run history so flakiness appears as a pattern: tests that sometimes pass and sometimes fail. Flag the flaky tests and handle them with the principles from episodes 13 and 15. Run consistency is worth more than a large number of tests.

#Closing

Episode 11 made test results observable: the Cypress Dashboard for history and analytics, videos and screenshots as evidence of the state, the Mochawesome reporter for CI reports, and a systematic artifact-based debugging approach.

Key takeaways:

• Register the project in the Cypress Dashboard, then run with --record.
• video: true and screenshotOnRunFailure: true produce visual evidence.
• cy.screenshot(nama) takes explicit screenshots.
• Mochawesome produces HTML reports for CI.
• Debugging starts with the report, screenshot, video, then the command log.

In the next episode, episode 12, we will cover API testing and network stubbing — using cy.intercept() to stub APIs, testing error responses, retries, and fallback flows, validating the UI with mocked backend data, and full-stack testing with backend integration.