E2E(End-to-End) 테스트는 소프트웨어 시스템의 전반적인 동작을 테스트하는 것으로, 사용자의 입장에서 시스템을 테스트하는 것을 목표로 합니다. 이 글에서는 TypeScript를 활용하여 E2E 테스트를 작성하는 방법에 대해 알아보겠습니다.

Puppeteer를 이용한 E2E 테스트 작성

Puppeteer는 Headless Chrome 또는 Chromium을 제어할 수 있는 Node 라이브러리입니다. Puppeteer를 사용하여 TypeScript로 E2E 테스트를 작성할 수 있습니다. Puppeteer를 설치하기 위해 다음 명령어를 실행합니다.

npm install puppeteer

E2E 테스트를 위한 새로운 폴더를 만들고, 다음과 같이 TypeScript 프로젝트를 설정합니다.

mkdir e2e-tests
cd e2e-tests
npm init -y
npm install typescript @types/puppeteer
npx tsc --init

그런 다음, tsconfig.json 파일을 열어 "outDir" 속성을 추가하고, "esModuleInterop" 속성을 true로 설정합니다.

{
  "compilerOptions": {
    "outDir": "./dist",
    "esModuleInterop": true
  }
}

이제 E2E 테스트를 위한 TypeScript 스크립트 파일을 만들고, Puppeteer를 사용하여 웹 페이지를 열고 테스트하는 코드를 작성할 수 있습니다. 다음은 간단한 예제 코드입니다.

// test.ts
import puppeteer, { Browser, Page } from 'puppeteer';

(async () => {
  let browser: Browser;
  let page: Page;

  try {
    browser = await puppeteer.launch();
    page = await browser.newPage();

    await page.goto('https://example.com');
    const title = await page.title();
    console.log('Title:', title);

    // E2E 테스트 코드 작성
    // ...

  } catch (error) {
    console.error('Error:', error);
  } finally {
    if (browser) {
      await browser.close();
    }
  }
})();

이제 위의 코드에서 "// E2E 테스트 코드 작성" 부분에 실제 E2E 테스트 코드를 작성하면 됩니다. 이를 통해 Puppeteer를 사용하여 TypeScript로 E2E 테스트를 작성하는 기본적인 방법을 알아보았습니다. 본격적인 프로젝트에 적용하기 위해서는 더 많은 공부와 경험이 필요할 수 있습니다.

더 많은 정보는 Puppeteer 공식 문서를 참고하시기 바랍니다.