Chrome DevTools의 Recorder를 해봤어요.

개시하다

다만 크롬 DevTools의 Recorder 기사를 만들어 보았을 뿐이다.
자세한 내용은 아래 공식 페이지를 참조하십시오.
https://developer.chrome.com/docs/devtools/recorder/
한편 이번에 사용된 크롬의 버전은 Version 98.0.4724.0 (Official Build) canary (x86_64)이다.

Recording

먼저 임의의 웹 페이지에서 개발자 도구를 열고 More options > More tools > Recorder 순서대로 Recorder를 엽니다.

이어서 ＋ 단추를 누르고 [RECORDING NAME]를 입력하고 [Start a new recording]를 눌러라.

브라우저에서 화면을 조작하면 작업이 하나하나 Recorder 패널에 기록됩니다.
한 번의 조작이 끝난 후 [End recording]를 누르세요.

마지막으로 드롭다운 메뉴에서 만든 Recording을 선택하고 [Replay]를 눌러 브라우저에서 기록된 작업을 수행합니다.

Puppeteer

Recording은 Pupeteer Script로 내보낼 수 있습니다.이로써 기록된 조작을 다른 사람과 공유할 수 있다.
내보낼 Recording을 선택한 상태[Export as Pupeteer script].

내보낸 JavaScript 파일은 다음과 같이 puppeteer를 설치한 후 실행됩니다.

$ npm i puppeteer
$ node [PUPPETEER SCRIPT]

만약 순조롭게 실행할 수 있다면 브라우저가 시작되고 조작을 재생할 수 있습니다.
Puppeeteer의 Debugging tips를 참고하여 내보낸 스크립트에 headles: false 옵션을 추가하면 다음과 같이 기록된 작업이 재생되고 있음을 명확하게 확인할 수 있습니다.

끝말

크롬 DevTools의 리코더는 편리한 용도가 많아 앞으로도 계속 탐색할 예정이다.
이번에 사용한 스크립트는 아래 GiitHub 창고에 편집 전후 두 개가 있으니 가능하면 참고하세요.
https://github.com/kg0r0/coffee-checkout

참고 자료

https://developer.chrome.com/docs/devtools/recorder/

https://github.com/puppeteer/puppeteer

https://github.com/kg0r0/coffee-checkout