test: 예시 통합 테스트 추가

[scarf005]

개요

2023-06-14.13-01-20.mp4

2023-06-14.13-00-45.mp4

• fixes 통합 테스트 추가 #437
• fixes playwright에서 개발 서버 사용 #532

변경점

.github/workflows

playwright.yml에서 playwright을 설치하고 통합 테스트를 진행합니다.

• pnpm 설치 부분은 백엔드 github action을 참고했습니다.
• 환경 변수는 test 환경의 환경 변수 컨텍스트를 사용해 해결했습니다.

• 테스트 완료 후 보고서 artifact를 생성해 문제가 생긴 부분을 확인 가능합니다.

README.md

playwright을 사용해 테스트하는 방법을 추가했습니다.

e2e/

통합 테스트들을 모아둔 경로입니다. 다음과 같은 예제 테스트들이 들어 있습니다.

• auth.spec.ts: 인 확인하는 테스트입니다. 아직 개발 서버에서 인증을 지원하지 않아 임시로 skip시켰습니다.

app.dockerfile, playwright.compose.yml

playwright 테스트용 전용 브라우저는 LTS 우분투 버전에서만 지원되기 때문에 다른 우분투 버전에서 webkit 등의 브라우저에서 테스트를 하려면 도커를 사용해야 합니다.

playwright.config.ts

자동 생성된 playwright 설정 파일입니다. CI 환경은 데스크탑 환경보다 느리므로 재시도 횟수와 대기 시간을 충분히 늘려줬습니다.

playwright.browsers.ts

한눈에 보기 쉽게 설정 파일에서 브라우저 목록만 뽑아 정리했습니다. LTS 우분투를 사용하지 않는다면 테스트시 내장 브라우저 (chrome, firefox 등)만 사용 가능하기 때문에 운영체제에 따라 테스트 가능한 브라우저 목록이 달라집니다.

[scarf005]

CI에서 정상적으로 동작하려면 다음 중 하나가 충족되어야 합니다:

• 백엔드 개발 서버
• Mock Service Worker
  • https://mswjs.io/docs/
  • https://github.com/valendres/playwright-msw

[scarf005]

test.only(`page.getByRole("link")`, async ({ page }) => {
  await page.goto("http://localhost:4242/");
  const link = page.getByRole("link");

  console.log(await link.count())
});

firefox와 chromium과 달리 webkit에서는 <a href> 태그의 aria-role이 적용이 되지 않아 테스트가 실패하는 것으로 보입니다.