<div id="readability-page-1" class="page"><div id="body"> <p> <a href="/blog/category/dev">dev</a> |
2024-08-25 </p> <div> <p>화면 없이 웹 브라우징을 할 수 있는 제품으로 기억나는 최초는 <a href="https://phantomjs.org/">팬텀(PhantomJS)</a>이다. 화면도 없이 브라우저를 열고 스크린 샷도 찍고 탐색하는 것이 엄청 신기했다. 지금은 개발이 중단되었다. 팬텀의 불편함을 극복해보고자 <a href="https://github.com/casperjs/casperjs">캐스퍼(CasperJS)</a>도 나왔었는데 이것 역시 지금은 개발이 중단되었다. 아마도 <a href="https://pptr.dev/">퍼피티어(Puppeteer)</a>와 <a href="https://playwright.dev/">플레이라이트(Playwright)</a>같은 대안 프로젝트들이 구글과 마이크로소프트 같은 큰 회사에서 나와서 그렇게 된 것 같다.</p>
<p>플레이라이트가 퍼피티어를 포크해서 나왔다고 하는데 두 프로젝트는 지향하는 바가 다르다. 퍼피티어가 헤드리스 크롬이나 파이어폭스를 편하게 활용할 수 있게 고안되었다면 플레이라이트는 테스트를 위한 스위트에 가깝다. 나는 테스트를 돌리기 보다는 브라우저에서의 작업이 필요해서 퍼피티어를 선택했다.</p>
<p>API는 상당히 직관적이어서 <a href="https://pptr.dev/#example">예제</a>를 보면 바로 브라우저를 실행해서 테스트 해 볼 수 있다. 브라우저 열고 페이지 열고 등 코드만 봐도 바로 이해가 간다. 나는 처리해야 하는 작업이 많아서 별도 스크립트를 <a href="https://pptr.dev/api/puppeteer.page.__eval/"><code>page.$$eval</code></a>을 사용해서 실행했다.</p>
<pre><code>const imageCount = await page.$$eval("img", (imgs) =&gt; imgs.length)</code></pre>
<p>서로 다른 컨텍스트를 직관적으로 연결해줘서 아주 사용하기 편하다. 예전과 비교하면 정말 좋아졌다.</p>
<p>페이지를 열려면 <code>const browser = await puppeteer.launch()</code>로 브라우저를 실행하고 <code>const page = await browser.newPage()</code>로 페이지를 열어서 사용하게 된다. 처음에는 매번 브라우저를 여는 시간도 아깝고 보통 브라우저 사용하듯이 하나 실행해 놓고 페이지만 열고 닫으며 사용해봤다. 이렇게 하니 평소에 브라우저가 메모리 많이 사용하고 있다고 욕하던 상황이 서버에서 벌어져서 서버가 죽었다. 프로세스가 열리는 것을 보니 페이지 하나만 열어도 크롬 관련 프로세스가 열개가 넘게 뜨고 <code>await page.close()</code>로 페이지를 닫아줘도 일부 프로세스들이 계속 남아 있었다. 결국 계속 쓸수록 메모리 점유가 늘어났다. <code>await browser.close()</code>로 실행된 브라우저를 닫아줘야 프로세스가 모두 정리가 된다.</p>
<p><a href="https://accessibility.kr/">accessibility.kr</a>에서 지금까지는 자바스크립트로 생성되는 페이지를 검사할 수 없었는데 이제 검사할 수 있는 사이트가 많이 늘어났다. 리다이렉션 처리도 많이 개선되었다.</p> </div>    </div></div>

신현석(Hyeonseok Shin)

화면 없이 웹 브라우징을 할 수 있는 제품으로 기억나는 최초는 팬텀(PhantomJS)이다. 화면도 없이 브라우저를 열고 스크린 샷도 찍고 탐색하는 것이 엄청 신기했다. 지금은 개발이 중단되었다. 팬텀의 불편함을 극복해보고자 캐스퍼(CasperJS)도 나왔었는데 이것 역시 지금은 개발이 중단되었다. 아마도 퍼피티어(Puppeteer)와 플레이라이트(Playwright)같은 대안 프로젝트들이 구글과 마이크로소프트 같은 큰 회사에서 나와서 그렇게 된 것 같다.
플레이라이트가 퍼피티어를 포크해서 나왔다고 하는데 두 프로젝트는 지향하는 바가 다르다. 퍼피티어가 헤드리스 크롬이나 파이어폭스를 편하게 활용할 수 있게 고안되었다면 플레이라이트는 테스트를 위한 스위트에 가깝다. 나는 테스트를 돌리기 보다는 브라우저에서의 작업이 필요해서 퍼피티어를 선택했다.
API는 상당히 직관적이어서 예제를 보면 바로 브라우저를 실행해서 테스트 해 볼 수 있다. 브라우저 열고 페이지 열고 등 코드만 봐도 바로 이해가 간다. 나는 처리해야 하는 작업이 많아서 별도 스크립트를 page.$$eval을 사용해서 실행했다.
const imageCount = await page.$$eval("img", (imgs) => imgs.length)
서로 다른 컨텍스트를 직관적으로 연결해줘서 아주 사용하기 편하다. 예전과 비교하면 정말 좋아졌다.
페이지를 열려면 const browser = await puppeteer.launch()로 브라우저를 실행하고 const page = await browser.newPage()로 페이지를 열어서 사용하게 된다. 처음에는 매번 브라우저를 여는 시간도 아깝고 보통 브라우저 사용하듯이 하나 실행해 놓고 페이지만 열고 닫으며 사용해봤다. 이렇게 하니 평소에 브라우저가 메모리 많이 사용하고 있다고 욕하던 상황이 서버에서 벌어져서 서버가 죽었다. 프로세스가 열리는 것을 보니 페이지 하나만 열어도 크롬 관련 프로세스가 열개가 넘게 뜨고 await page.close()로 페이지를 닫아줘도 일부 프로세스들이 계속 남아 있었다. 결국 계속 쓸수록 메모리 점유가 늘어났다. await browser.close()로 실행된 브라우저를 닫아줘야 프로세스가 모두 정리가 된다.
accessibility.kr에서 지금까지는 자바스크립트로 생성되는 페이지를 검사할 수 없었는데 이제 검사할 수 있는 사이트가 많이 늘어났다. 리다이렉션 처리도 많이 개선되었다.

Puppeteer로 웹페이지 열고 조작하기

댓글