Cypress 테스트 결과를 시각화하는 나만의 대시보드 만들기

Cypress Cloud는 테스트 결과를 시각화하고 분석하는 강력한 도구를 제공합니다. 하지만 소규모 프로젝트나 팀에게는 비용이 부담스러울 수 있습니다. 그래서 이번 블로그에서는 Cypress, Google Sheets, 그리고 Google Looker Studio를 활용하여 비용 효율적인 대안을 만드는 방법을 소개합니다. 이 설정을 통해 자동화된 테스트 데이터를 효율적으로 수집하고 시각화할 수 있습니다.

1. Cypress에서 테스트 데이터 수집하기

먼저, Cypress의 after:run 이벤트를 활용하여 테스트 실행 데이터를 수집합니다. 데이터에는 테스트 실행 시간, 테스트 이름, 실패 상태 등이 포함됩니다. 이 데이터를 Google Sheets API를 사용해 Google 스프레드시트로 전송합니다. 아래는 Cypress 설정 코드의 예입니다:

javascript
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//exec?sheetName=${sheetName}`;
    return fetch(url, options)
      .then(response => response.json())
      .catch(error => console.error('Error:', error));
  }

  if (process.env.CI) {
    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");
    }
  }
});

2. Google Apps Script로 데이터 저장하기

Google 스프레드시트를 간단한 데이터베이스로 사용하여 데이터를 저장할 수 있습니다. 이를 위해 Google Apps Script를 작성하고, POST 요청을 처리하여 데이터를 특정 시트에 기록합니다. 아래는 Google Apps Script의 코드 예입니다:

javascript
function doPost(e) {
  try {
    let sheetName = e.parameter.sheetName || 'dataKim';
    const sheet = SpreadsheetApp.openById('').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);
  }
}

스크립트를 배포하여 웹 앱으로 설정하고, "링크를 가진 모든 사용자"가 접근할 수 있도록 설정하세요.

3. Looker Studio로 데이터 시각화하기

Google Looker Studio(구 Google Data Studio)는 Google 스프레드시트에 저장된 데이터를 시각화하는 데 유용한 도구입니다. 아래는 설정 과정입니다:

• 시트 연결: Google 스프레드시트를 Looker Studio에 연결합니다.
• 차트 생성: 바 차트, 선 그래프, 또는 테이블을 사용하여 실패율, 테스트 지속 시간, 가장 자주 실패하는 테스트와 같은 지표를 시각화합니다.
• 필터 및 탐색: 날짜 범위 또는 특정 테스트 스위트를 필터링하여 데이터를 세부적으로 분석할 수 있습니다.

결론

이와 같은 대시보드는 Cypress 테스트 결과를 이해하고 비용을 절약하는 데 큰 도움이 됩니다. Cypress Cloud의 고가 도구를 사용하지 않고도 많은 인사이트를 얻을 수 있는 이 설정을 시도해 보세요. 여러분만의 대시보드를 만들거나 더 나은 방법이 있다면 댓글로 공유해주세요!