Create your own Cypress test results dashboard

If you're like me, you appreciate the insights provided by Cypress Cloud but want to avoid the cost, especially for smaller projects or teams. This post walks you through how I created a cost-effective alternative using Cypress, Google Sheets, and Looker Studio. By the end of this article, you'll know how to collect and visualize automated test data efficiently.

When running automated tests, identifying flaky tests or consistently failing tests is crucial for maintaining test suite reliability. While Cypress Cloud offers a robust solution for this, it can be expensive. I wanted a free and straightforward way to track test runs, visualize failures, and find trends over time.

My Approach

I combined Cypress hooks, Google Apps Script, and Google Looker Studio to create a functional and flexible dashboard. Here's how it works:

1. Cypress collects data during test runs.
2. Google Sheets API acts as a lightweight database for storing test data.
3. Google Looker Studio visualizes this data for quick insights.

Step 1: Capturing Test Run Data in Cypress

I used the after:run event in cypress.config.js to gather information like test run duration, test names, failure states and folder locations.
Here's the Cypress configuration code in the cypress.config.js file:

on('after:run', async (results) => {
  function sendData(data, sheetName) {
    const options = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    };

    const url = `https://script.google.com/macros/s/<your_script_id>/exec?sheetName=${sheetName}`;
    return fetch(url, options)
      .then(response => response.json())
      .catch(error => console.error('Error:', error));
  }

  if (process.env.CI) { // for tests running in CI only
    const runId = new Date().getTime();
    const runData = {
      values: [[runId, results.totalDuration, "KIM", results.totalTests, results.totalFailed, new Date().toISOString(), process.env.CI_SCHEDULE_NAME]],
    };
    await sendData(runData, "runData");

    const failedTests = results.runs.flatMap(run =>
      run.tests.filter(test => test.state === 'failed').map(test => ({
        runId,
        testName: test.title.join(' > '),
        testFile: run.spec.name,
        duration: test.duration,
        folder: run.spec.relative.split('\\').slice(-2, -1)[0],
      }))
    );

    if (failedTests.length > 0) {
      const values = failedTests.map(({ runId, testName, testFile, duration, folder }) => [runId, testName, new Date().toISOString(), testFile, duration, "KIM", folder]);
      await sendData({ values }, "testData");
    }
  }
});

Step 2: Creating a Google Apps Script for Data Storage

Google Sheets is a perfect lightweight database for storing structured data. I created a Google Apps Script to handle POST requests and write data to specific sheets.

Here's the script:

function doPost(e) {
  try {
    let sheetName = e.parameter.sheetName || 'dataKim';
    const sheet = SpreadsheetApp.openById('<your_sheet_id>').getSheetByName(sheetName);
    const data = JSON.parse(e.postData.contents);
    const values = data.values;

    sheet.getRange(sheet.getLastRow() + 1, 1, values.length, values[0].length).setValues(values);

    return ContentService.createTextOutput(
      JSON.stringify({ result: 'successfuly written', data })
    ).setMimeType(ContentService.MimeType.JSON);
  } catch (error) {
    return ContentService.createTextOutput(
      JSON.stringify({ result: 'error', error: error.message })
    ).setMimeType(ContentService.MimeType.JSON);
  }
}

Don´t forget to deploy your script first, after making changes to it.

To deploy:

1. Create a new script in your Google Workspace account.
2. Replace with your Google Sheet ID.
3. Publish the script as a web app with "Anyone with the link" access.

Step 3: Visualizing Data with Looker Studio

Looker Studio (formerly Google Data Studio) offers an intuitive way to visualize data stored in Google Sheets. It was my tool of choice, because our comapny uses Google products. Here's how I set it up:

Connect the Sheets: Import your Google Sheets containing test run and test data.

1. Build Charts: Use bar charts, line graphs, or tables to visualize metrics like failure rates, test durations, and the most frequently failing tests.
2. Filter and Explore: Add date ranges or filters to drill down into specific test suites or timeframes.

There is a plenty of other tools for data visualization. You can even use Google sheets alone.

Here is the result that our team at Hyperia is using:

Conclusion

Building this dashboard was a rewarding experience, enabling me to understand test results better and save money. If you're running Cypress tests on a budget, give this setup a try! You’ll be surprised at how much insight you can gain without premium tools.

Have you built something similar, or do you have tips to improve this setup? Let me know in the comments!