Chrome 확장 'Puppeteer Recorder'를 사용하여 브라우저 자동화

Puppeteer Recorder이라는 Chrome 확장 프로그램이 출시되었으므로 사용해 보았습니다.

GitHub : checkly/puppeteer-recorder

개요

Puppeteer Recorder는 브라우저에서 수행한 작업을 기록하고 Puppeteer 코드를 출력하는 Chrome 확장입니다.

비슷한 Chrome 확장에 Selenium IDE이 있습니다.

사용법

README의 이미지와 같이 확장 기능을 넣고 "Record"를 클릭하고, 그 후에 시도하고 싶은 조작을 한 후 "Stop"을 클릭하면 코드가 출력됩니다.

실제로 사용해 본 소감

벌써 사용해 본 감상을 써 주는 기사( 'Puppeteer Recorder'를 사용해 보았습니다 - masalib의 일기 )가 있습니다만, 자신도 대체로 이 기사와 감상은 같아 아직 불안정한 곳이 있구나, 라고 하는 인상입니다.

예를 들어 문자 입력의 이벤트를 취득하기 어렵거나 합니다. 이것은 README 에 있는 것처럼 입력 후에 tab 를 두드려야 합니다 (README 의 Usage 에 Hit tab after you finish typing in an input element. 와 있다).

이것 이외에도 약간 의도한 동작이 기록되지 않는 것이 있었습니다만, 아무쪼록 릴리스 되었을 뿐이므로 어쩔 수 없을까,라고 생각합니다.

사이고에게

Puppeteer는 쓰기가 좋기 때문에, 이 상태로 주변 툴이 풍부하게 되면 기쁘네요.

덧붙여서 여담입니다만, Puppeteer Recorder는 Vue.js 로 쓰여져 있습니다. 약간의 팝업을 만들기 위해서는 역시 Vue 정도의 간편함이 뛰어나다고 하네요.