Puppeteer is an API library that allows controlling Chrome/Chromium to automate tasks like screenshot capturing, generating PDFs, e2e testing, crawling websites, and pre-rendering SPAs. It can be used to replace tools like PhantomJS, prerender.io, and Selenium. Puppeteer launches a Chromium instance in headless mode and controls it through code to perform automated tasks like taking screenshots, generating PDFs from websites, running e2e tests with frameworks like Jest, and crawling pages by extracting element content. It is maintained by Google and useful for tasks like pre-rendering React sites with react-snap.

1. Puppeteer:
Getting Started
이현섭 / GDG Korea WebTech Organizer

3. What is Puppeteer?
• Chrome / Chromium을 컨트롤 할 수 있는 API Library
• Chrome으로 할 수 있는 일을 자동화 할 수 있음
• e2e Testing
• SPA Prerendering
• Web Site Crawling
• Generating PDF
• Maintained by Google

4. Possibly replace..
• PhantomJS
• prerender.io
• Selenium driver
• Cheerio

5. Screenshot Example

7. Launch Chromium in headless mode

8. Open new tab

9. Set viewport size

10. Go to google.com

11. Capture screenshot

12. Close Chromium

14. PDF Example

16. Go to blog post page

17. Generate PDF

19. e2e Testing Example
: Live Coding

20. Interacting with UI

21. Reliable Waiting

22. Evaluation

23. Browser Runtime

24. Passing values

25. =

26. With Jest

28. Browser Context

29. Open new tab in context

30. Different Pages, Same Context

31. Live Demo

32. https://github.com/smooth-code/jest-puppeteer

33. Crawling Example

35. Get all post titles by classname

36. Go to next page

37. Prerendering: react-snap
• SPA를 위한 Prerenderer
• SEO / Meta Tag Pre-render
• React는 물론 Vue, Preact에도 사용가능
• 내부적으로 Puppeteer 사용

39. Server-rendered markup

40. Attaching Event Handlers

41. https://web.dev/prerender-with-react-snap/

42. https://github.com/hyunseob/puppeteer-getting-started

43. 감사합니다.
mail@hyunseob.me
github.com/hyunseob
twitter.com/hyunseob_