준비: 브라우저 도구
왜 미리 갖추는가
섹션 제목: “왜 미리 갖추는가”MCP 서버는 세션 중간에 등록해도 재시작 전에는 보이지 않습니다. 9단계 도중에 등록하면 세션을 끊어야 합니다.
이 단계에서 하는 것
섹션 제목: “이 단계에서 하는 것”Playwright MCP를 등록하고 재시작한 뒤 /mcp로 확인하고, 첫 스크린샷을 찍습니다.
세션 재사용형 브라우저 도구(aside 등)와 Playwright 중 무엇을 고르는지는
언제 무엇을 쓰는가의 “브라우저를 열어야 할 때” 절을
참고하십시오. 이 튜토리얼은 로그인이 없는 로컬 앱을 재현 가능하게 다뤄야 하므로
Playwright를 씁니다.
따라하기
섹션 제목: “따라하기”- 등록합니다.
claude mcp add --scope user playwright -- npx @playwright/mcp@latestclaude mcp list-
--scope user는 이후 만들 charcount 프로젝트에서도 같은 서버를 쓸 수 있게 합니다. 프로젝트를 먼저 만든 독자는 그 안에서--scope project로 등록해도 됩니다. Claude Code를 종료했다가 다시 열어/mcp를 확인하고, 1단계 charcount에서 다시/mcp에 playwright가 보이는지 확인합니다. -
첫 스크린샷을 찍습니다.
Playwright로 https://example.com 을 열고 전체 페이지 스크린샷을 example.png 로저장해 주세요. 저장된 절대 경로를 알려 주세요.- 파일이 어디에 생겼는지 확인합니다. 세션 cwd일 수 있습니다.
file://로컬 파일을 열어 달라고 하면 어떻게 되는지도 확인합니다.
완료 확인
섹션 제목: “완료 확인”example.png가 존재하고, /mcp에 playwright 서버가 표시되면 완료입니다.
file:// 로컬 파일 요청은 차단됩니다. 그래서 9단계에서는 npm run dev로 띄운
http 주소를 씁니다.
계측 기록
섹션 제목: “계측 기록”없습니다.
어긋났을 때
섹션 제목: “어긋났을 때”- 등록했는데 도구가 안 보이면 재시작 전입니다. 설정한 대로 동작하지 않을 때를 확인합니다.
- 스크린샷 파일이 지정 경로에 없으면 세션 cwd를 봅니다. 경로가 정해지는 방식은 MCP에 있습니다.
- 브라우저 조작이 어긋나면 브라우저 자동화가 어긋날 때를 확인합니다.