1편에서 E2E로 다이얼로그 여닫기 같은 UI 동작을 눌러 봤다면,2편은 "페이지를 타고 들어가서 API까지 같이 확인해 보기" 쪽에 더 가깝다. Next.js 15 프로젝트를 만들고 Playwright를 붙이다가,"특정 페이지에서 API 요청이 진짜 잘 나가는지"까지 같이 보고 싶어졌다.Playwright 공식 문서를 보다가 API 테스트 기능이 있는 걸 발견했고,그 과정을 기록해 둔 글이다.Playwright API test 개념 확인baseURL 설정해서 경로만으로 요청 보내기목록 API, 상세 API 테스트 코드 예시테스트하면서 헷갈린 포인트 간단 메모참고한 문서들은 이쪽이다.Playwright API Testinghttps://playwright.dev/docs/api-testing1. base..

Next.js 15를 공부하면서 "이왕 하는 김에 테스트도 손에 익혀 보자" 싶어서Playwright를 같이 붙이기 시작했다.이번 글은 거창한 튜토리얼이라기보다는"처음 깔고, 최소한의 설정을 하고, 내 페이지 하나를 실제로 눌러 본 기록"에 가깝다.결론 먼저Next.js 15 프로젝트에 Playwright를 붙이는 것만 보면 어렵지 않았다pnpm create playwright로 설치하면 초기 설정 파일까지 한 번에 만들어 준다playwright.config.ts에서 dev 서버만 Next에 맞게 지정해 주면 바로 테스트를 돌릴 수 있다getByTestId를 쓰면 Tailwind 기반 UI에서도 꽤 편하게 요소를 찾을 수 있다pnpm exec playwright show-report로 HTML 리포트를 ..