Cypress로 Next.js 데이터 추출 자동화하기: 손쉬운 데이터 추출 비법

2025-03-23 10:18:12

cypressautomationnextjsjavascript

Cypress와 함께하는 효율적인 데이터 추출: 소개

엔드 투 엔드(E2E) 테스트 툴로 잘 알려진 Cypress. 하지만 Cypress가 테스트 이상의 일을 할 수 있다는 사실, 알고 계셨나요? 오늘은 Cypress를 이용한 데이터 추출 자동화 방법에 대해 설명드리도록 하겠습니다.

Cypress, 단순한 테스트 툴 이상의 역할

일반적으로 Cypress는 UI 상호작용을 자동화하고, 요소를 단언하며, 애플리케이션이 예상대로 작동하는지 확인하기 위한 도구로 사용됩니다. 하지만 Cypress를 통해 Next.js 애플리케이션에서 동적 페이지 데이터를 자동으로 추출해낼 수 있다는 것을 알게 되었습니다. 여러분도 직접 이 방법을 알아볼까요?

데이터 추출이 필요한 이유

제가 사용한 시나리오는 다음과 같습니다. Next.js 페이지 라우터 애플리케이션을 사용하고 있으며, 서버 사이드 렌더링(SSR)로 작동합니다. 콘텐츠는 Contentful CMS에서 오고 있으며, 여러 개의 팝업 항목이 있어 다양한 페이지에 동적으로 삽입됩니다. 기존의 아키텍처에서 새로운 아키텍처로 마이그레이션하기 위해, 기존 시스템에서 이미 표시되고 있는 팝업 ID를 추출하기 필요했습니다.

수작업의 어려움

이러한 데이터를 수집하기 위해서는:

각 페이지를 방문하고,
브라우저에서 NEXT_DATA 페이로드를 검사하며,
각 페이지의 팝업 ID를 추출해야 했습니다.

이러한 과정은 여러 페이지와 17개의 서로 다른 시장에 대해 수작업으로 수행해야 하며, 이는 매우 시간이 많이 소요될 뿐 아니라 실수도 발생하기 쉽습니다.

Cypress로 자동화하기

Cypress 자동화의 장점

자동화를 통해 수작업 과정을 다음과 같이 개선할 수 있습니다.

자동으로 필요한 모든 페이지를 방문
NEXT_DATA에서 팝업 ID 추출
동적으로 데이터 저장 및 구조화
17개의 시장을 effortless 확장

이러한 자동화는 사람의 실수를 줄이고, 시간도 절약할 수 있습니다.

Cypress 설치 및 설정

먼저 Cypress를 설치합니다.

npm install cypress --save-dev

기본 폴더 구조를 생성합니다.

npx cypress open

Next.js의 NEXT_DATA 이해하기

Next.js는 서버사이드 렌더링된 데이터가 담긴 NEXT_DATA를 window 객체 안에서 노출합니다. 다음은 NEXT_DATA의 예 입니다:

{
  "props": {
    "pageProps": {
      "ssrPayload": {
        "popUpEntries": [
          { "items": [{ "fields": { "tagName": "tag1" } }] },
          { "items": [{ "fields": { "tagName": "tag2" } }] }
        ]
      }
    }
  }
}

Cypress 커스텀 명령어 생성하기

Cypress의 커스텀 명령어는 내장 명령어를 확장하여 테스트 간의 논리를 재사용할 수 있게 해줍니다. 이는 코드의 유지보수를 편리하게 만듭니다.

let pageDataStore = {}; // 다양한 페이지의 데이터를 저장할 글로벌 객체

Cypress.Commands.add('extractNextData', (pageKey) => {
  cy.window().then((win) => {
    const nextData = win.__NEXT_DATA__;
    const list_of_tags =
      nextData.props.pageProps.ssrPayload.popUpEntries.map(
        (entry) => entry.items[0].fields.tagName
      );

    cy.log(`NEXT_DATA for ${pageKey}`, list_of_tags);
    pageDataStore[pageKey] = list_of_tags;
    return cy.wrap(list_of_tags);
  });
});

Cypress.Commands.add('getPageDataStore', () => {
  return cy.wrap(pageDataStore);
});

여러 페이지 방문 및 데이터 추출

다음은 여러 페이지에서 데이터를 자동화하여 추출하는 테스트 파일 예시입니다.

describe('Extract and Store NEXT_DATA from Multiple Pages', () => {
  it('Visits multiple pages and logs extracted data', () => {
    cy.visit('/'); // 홈 페이지 방문
    cy.extractNextData('home'); // 데이터를 "home"으로 저장

    cy.visit('/plans'); // 플랜 페이지 방문
    cy.extractNextData('plan'); // 데이터를 "plan"으로 저장

    cy.getPageDataStore().then((data) => {
      cy.log('Final Page Data:', JSON.stringify(data, null, 2)); // 전체 객체 로그 출력
    });
  });
});

다수의 시장에 대한 자동화 확장

17개의 시장에 대해 테스트를 다이나믹하게 확장할 수 있도록 업데이트하십시오.

const markets = ['us', 'uk', 'de', 'fr', 'es']; // 예시 시장

describe('Extract Data from Multiple Market Pages', () => {
  markets.forEach((market) => {
    it(`Visits each market page and extracts data for ${market}`, () => {
      cy.visit(`/?locale=${market}`); // 특정 시장의 홈 페이지 방문
      cy.extractNextData(`home-${market}`); // 데이터를 저장

      cy.visit(`/plans?locale=${market}`); // 특정 시장의 계획 페이지 방문
      cy.extractNextData(`plan-${market}`); // 데이터를 저장
    });
  });

  cy.getPageDataStore().then((data) => {
    cy.log('Final Market Data:', JSON.stringify(data, null, 2));
  });
});

결론

Cypress를 활용하면 복잡하고 오류 가능성이 높은 수작업을 자동화하여 시간과 노력을 절약할 수 있습니다. 이번 블로그에서는 Cypress를 사용하여 Next.js의 동적 데이터를 얼마나 손쉽게 추출하고 구조화할 수 있는지 보여주었습니다.

다음의 달러, PHP 등을 쉽고 편리하게 추출하여 분석에 활용해 보세요.

[도움이 될만한 링크들]