[codex] playwright mcp로 웹스크래핑

Playwright mcp를 활용한 웹스크래핑

codex에서 웹스크래핑을 하기 위해서 playwright를 활용하는 MCP를 사용한다.

1. 설치

codex cli가 설치된 데스크탑 환경에서 teminal에서 다음을 실행시킨다.

codex mcp add playwright npx "@playwright/mcp@latest"

 

만약 playwright가 설치되지 않았다면 ` npx playwright install `을 통해 설치한다(당연히 node.js는 설치가 되어 있어야 한다).

2. 웹스크래핑

Playwright 는 크로미니움 브라우저를 제어하는 방법을 사용한다. 즉, 자동으로 웹브라우저가 실행되어서 입력 및 클릭, 이동을 수행한다. 화면에 보이지 않게 작동하는 방법(headless)도 있으나 되도록이면 눈으로 보면서 채크하는 것을 추천한다. 다음은 mcp를 사용하는 프롬프트이다.

https://www.coupang.com/에 접속한다. 
네트워크 탭을 분석한다. 
이곳에서 usb를 검색하고 나온 상품 결과를 카드형태로 리스트로 만든다. 
code_snipet의 app.html의 테마로 report.html을 만든다.

 

 

맨 밑줄의 code_snipet의 app.html의 테마로 report.html을 만든다.는 report.html로 만든다로 수정해도 된다. 단지 code_snipet은 필자의 데스크탑에 설치된 개인적으로 만든 mcp(HTML 템플릿 목적)일 뿐이다.

 

3. 결과

mcp를 활용한 것이므로 적지않은 토큰으로 웹스크래핑을 시도하게 된다. 그런 점에서는 skill보다는 능동적인 결과를 가져오므로 웹 스크래핑의 목표에 만족스러운 결과를 만들어준다.

 

report.html

0.02MB