[바이브코딩]Playwright MCP Server: 테스트 자동화 코드 자동 생성하기

안녕하세요~

Playwright MCP서버를 이용하여 자동으로 테스트코드를 작성하는 부분을

해외 유튜브 동영상을 봐서 따라해 보았습니다.

자동으로 코드생성 유튜브

사전 조건

npm install -g @executeautomation/playwright-mcp-server
npx @michaellatman/mcp-get@latest install @executeautomation/playwright-mcp-server
npx -y @smithery/cli install @executeautomation/playwright-mcp-server --client claude

claude 데스크탑 설정

Claude데스크탑이 없으면 설치하셔야 합니다.

claude-> 파일 -> 설정 -> 개발자에서 편집하기로 아래의 playwright로 설정하실 수 있습니다.

설정을 하고 나면 위에 망치모양처럼 MCP서버의 내용을 보실 수 있습니다.

프롬프트로 명령 실행하기

프롬프트아래와 같이 한글로 해봤습니다.

http://eaapp.somee.com/ 웹사이트에 접속해서 로그인 링크를 클릭해라. 그리고 로그인 페이지에서 username , password를 각각 "admin", "password"로 입력하고 로그인 버튼을 클릭해줘. 그리고 고용리스트 페이지를 클릭하고 "Create New"버튼을 클릭해서 실제 고용인의 상세를 이름,봉급, DurationWorked, select dropdown for grade as CLevel, Email. 그리고 브라우저를 닫아줘. Generate the code of the execution.