chore/#38 playwright 테스트 설정

[minai621]

요약 (Summary)

컴포넌트의 시각적 회귀 테스트와 접근성 테스트를 위해 playwright를 도입하였습니다.

• 시각적 회귀 테스트
  컴포넌트 수정이 스타일의 변화와 같은 시각적인 변경이 있는지 확인합니다. 단위 테스트로 확인할 수 없는 UI 변경을 감지합니다.
• 접근성 테스트
  사용자 사용 경험 향상을 위해 접근성을 위배하지 않았는지 확인합니다. 단위 테스트로는 실제 UI 동작을 확인할 수 없어 playwright에서의 테스트가 유의미하다고 생각했습니다.

배경 (Background)

UI 컴포넌트 개발 과정에서 의도하지 않은 시각적 변경이나 접근성 문제가 발생할 수 있습니다. 이러한 문제들은 단순한 단위 테스트로는 포착하기 어렵고, 수동 테스트는 시간이 많이 소요되며 일관성이 떨어질 수 있습니다. Playwright를 도입함으로써 자동화된 방식으로 이러한 문제들을 효과적으로 감지하고 해결할 수 있습니다.

목표 (Goals)

• 컴포넌트의 시각적 변경사항을 자동으로 감지하고 리포트합니다.
• 접근성 문제를 조기에 발견할 수 있도록 테스트 합니다.
• CI 환경에서 테스트를 자동화하여 변경을 감지합니다.

이외 고려 사항들 (Other Considerations)

컴포넌트를 수정할 때, 스타일을 변경해야 하는 경우가 존재합니다.
만일, 합의된 변경 사항이라면 PR에서 VRT 레이블을 추가하여 스냅샷을 업데이트하여 테스트가 통과될 수 있도록 해야 합니다.

테스트 환경이 ci 환경이기 때문에 로컬 환경이 아님을 유의해야 합니다.
필요한 경우 폰트 설치와 같은 설정을 추가로 해주어야 합니다.

관련 이슈

• resolved playwright 세팅 #38