Puppeteerを導入してみた話

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

©2018 Wantedly, Inc. ͲΜͳͱ͜ΖͰ࢖ΘΕΔʁ • Generate screenshots and PDFs of pages. • Crawl a SPA (Single-Page Application) and   generate pre-rendered content (i.e. "SSR"). • Automate form submission, UI testing, keyboard input, etc. • Create an up-to-date, automated testing environment. • Capture a timeline trace of your site • Test Chrome Extensions.

Slide 9

Slide 9 text

Slide 10

Slide 10 text

©2018 Wantedly, Inc. SSR Example https://developers.google.com/web/tools/puppeteer/articles/ssr import puppeteer from “puppeteer"; async function ssr(url) { const browser = await puppeteer.launch({ headless: true }); const page = await browser.newPage(); await page.goto(url, { waitUntil: "networkidle0" }); const html = await page.content(); // serialized HTML of page DOM. await browser.close(); return html; }

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

©2018 Wantedly, Inc. Puppeteer v.s. node-canvas - node-canvas ͳΒը૾ΛՃ޻ͯ͠ฦ͢͜ͱ͕Ͱ͖ͦ͏ - ଞͷࢪࡦͰ͢Ͱʹ࢖༻͞Ε͍ͯͨ (pros) - node-canvas༻ͷAPIΛΘ͟Θ֮͑ͯ͟σβΠϯΛ౰ͯΔͷ͸໘౗ͦ͏ (cons) - Puppeteer ͩͱ screenshot API Λ࢖͑͹ྑͦ͞͏ - গ͠ͷPuppeteerͷAPI͚֮ͩ͑Ε͹ྑͦ͞͏ (pros) - ελΠϧ͸CSS͕࢖͑ΔͷͰσβΠϯͷมߋʹ΋͙͢ରԠͰ͖ͦ͏ (pros) - ଎౓໘ɾ҆ఆੑͷෆ҆ (cons) - DockerͰಈ͔͘ෆ҆ (cons)

Slide 15

Slide 15 text

Slide 16

Slide 16 text

©2018 Wantedly, Inc. ྑ͔ͬͨ͜ͱ - htmlΛฦ͢endpointͱɺPuppeteer͔ΒhtmlΛݺΜͰscreenshotΛऔΔendpointΛ࣮૷ - ೔෇ΛೖΕͨOGը૾Λฦ͢෦෼͸؆୯ʹ࣮૷Ͱ͖ͨ - ελΠϧͷ֬ೝ࣌ʹ͸ html Λฦ͢෦෼͚ͩݟΕ͹͍͍ͷͰ֬ೝ͕༰қ ϋϚͬͨ͜ͱ - DockerͰಈ͔͢ͷ͕গ͠໘౗ - webfont͕දࣔ͞Εͳ͍৔߹͕͋ͬͨ - Puppeteerͷىಈ͕஗͍

Slide 17

Slide 17 text

©2018 Wantedly, Inc. DockerͰಈ͔͢ͷ͕গ͠໘౗ - `npm install puppeteer` Ͱ͸ಈ͔ͳ͍ - Alpine linux Ͱ͸ಈ͔ͤͳ͔ͬͨ - https://github.com/GoogleChrome/puppeteer/blob/master/docs/ troubleshooting.md#running-puppeteer-in-docker   ʹৄ͘͠ॻ͍ͯ͋ΔͷͰɺ͜ΕΛࢀߟʹ࣮૷

Slide 18

Slide 18 text

©2018 Wantedly, Inc. webfont͕දࣔ͞Εͳ͍৔߹͕͋ͬͨ - “networkidle0”Λࢦఆ͢Δ͜ͱͰɺωοτϫʔΫ͕খ߁ঢ়ଶʹͳΔ·Ͱ଴ͬͯ͘ΕΔ - “networkidle0”Λࢦఆ͢Δͱɺࠓޙ͸ɺӬԕʹ଴ͪଓ͚Δ৔߹͕ى͖ͯ͠·ͬͨ - issue΋͋Δ https://github.com/GoogleChrome/puppeteer/issues/1908 - ݁ہwebfont͸ϩʔΧϧʹೖΕͯ࢖༻͢Δ͜ͱʹͨ͠

Slide 19

Slide 19 text

©2018 Wantedly, Inc. Puppeteerͷىಈ͕஗͍ - ৭ΜͳExampleͰ͸ΤϯυϙΠϯτͷ࠷ॳʹ`puppeteer.launch`Λ͍ͯ͠Δ͕ɺ  `puppeteer.launch` ͰͷPuppeteerͷ্ཱ͕ͪ͛ඇৗʹ஗͍ - 1ඵҎ্͔͔ͬͯ͠·ͬͨ - ͞ΒʹPuppeteerΛ্ཱͪ͛ͨͱ͖ʹɺchromeͷϓϩηε͕Ұ্ཱ͕ͭͪΔͷͰɺ  ΞΫηε͕૿͑ͨͱ͖ʹෆ҆ - αʔόʔͷىಈ࣌ʹ `puppeteer.launch` Λ͓͍ͯͯ͠ɺsingleton Ͱ  puppeteerͷঢ়ଶΛ؅ཧͨ͠ - Ϩεϙϯε࣌ؒ͸େମ300-1000ms͘Β͍ʹͳͬͨ

Slide 20

Slide 20 text

Slide 21

Slide 21 text