PuppeteerとPlaywrightの15日間の演劇 / relation of Puppeteer and Playwright

Slide 1

Slide 1 text

PuppeteerͱPlaywrightͷ 15೔ؒͷԋܶ ؔ੢NodeֶԂ 9࣌ݶ໨ 2020/02/12 େౡ ޫو@sbntaminif

Slide 2

Slide 2 text

ࣗݾ঺հ • ΢ΣϒϦΦגࣜձࣾɹ։ൃGϦʔμʔ • ීஈ͸ژ౎Ͱಇ͍͍ͯ·͢ • ۙگɹ໌೔͕ଉࢠͷ1ࡀͷ஀ੜ೔Ͱ͢ ࠓ݄͔Βಋೖ͞Εͨه೦೔ٳՋͰ ໌೔͓ٳΈͰ͢

Slide 3

Slide 3 text

ϓϥΠϕʔτͰ΋։ൃ͢Δ͕࣌ؒ औΕ͍ͯͳ͍ࢲ͕ ٱ͠ͿΓʹPuppeteer࢖͓͏ͱ ࢥͬͨ1݄15೔ͷग़དྷࣄ

Slide 4

Slide 4 text

2020/01/15

Slide 5

Slide 5 text

Microsoft EdgeͷChromium൛ ϦϦʔε https://support.microsoft.com/ja-jp/help/4501095/download-the-new-microsoft-edge-based-on-chromium

Slide 6

Slide 6 text

Puppeteer͸ Chrome or ChromiumͰ ಈ࡞͢Δ

Slide 7

Slide 7 text

ಈ͘ͷ͔ݕূ͢Δ

Slide 8

Slide 8 text

const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch({ headless: false, // executablePath: '/Applications/Vivaldi.app/Contents/ MacOS/Vivaldi' executablePath: '/Applications/Microsoft Edge.app/ Contents/MacOS/Microsoft Edge' }); const page = (await browser.pages())[0] || (await browser.newPage()); ɾ ɾ ɾ EdgeͷύεΛࢦఆ FYFDVUBCMF1BUIΛࢦఆ͢Δ͜ͱͰ ೚ҙͷϒϥ΢βͰ࣮ߦ -> ໰୊ͳ͘ಈ͍ͨ

Slide 9

Slide 9 text

READMEʹ΋ هࡌ͕͋Δ https://github.com/puppeteer/puppeteer#default-runtime-settings

Slide 10

Slide 10 text

const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch({ headless: false, // executablePath: '/Applications/Vivaldi.app/Contents/ MacOS/Vivaldi' executablePath: '/Applications/Microsoft Edge.app/ Contents/MacOS/Microsoft Edge' }); const page = (await browser.pages())[0] || (await browser.newPage()); ɾ ɾ ɾ Vivaldi͸ͪΐͬͱ͚ͩڍಈ͕ҧ͏ 7JWBMEJΛࢦఆͨ࣌͠ ʮελʔτϖʔδʯ͕͋Δঢ়ଶʢϒϥ΢βىಈ௚ޙʣ CSPXTFSOFX1BHF ͢Δͱ݁Ռ͕ฦͬͯ͜ͳ͍ λϒ͕ଘࡏ͢Δ৔߹͸ͦͷλϒΛ࢖͏͜ͱͰରԠ ʮελʔτϖʔδʯͰͳ͚Ε͹OFX1BHF ͰλϒΛ૿΍ͤΔ

Slide 11

Slide 11 text

MicrosoftެࣜDocsʹ΋ Puppeteerͷϖʔδ͕Ͱ͖ͯΔ https://docs.microsoft.com/en-us/microsoft-edge/puppeteer

Slide 12

Slide 12 text

EdgeͰಈ͔͢ํ๏·Ͱ͋Δ https://docs.microsoft.com/en-us/microsoft-edge/puppeteer

Slide 13

Slide 13 text

͜ͷ࣌͸EdgeͰ ͍Ζ͍Ζ༡Ϳͭ΋Γͩͬͨ

Slide 14

Slide 14 text

Ұिؒޙʹ ಥ೗ݱΕͨPlaywright

Slide 15

Slide 15 text

2020/01/23

Slide 16

Slide 16 text

Playwright https://github.com/microsoft/playwright

Slide 17

Slide 17 text

Playwrightͱ͸ • Chromium, Firefox, WebkitΛಈ͔͢ Node੡ϥΠϒϥϦ • ϔουϨεϞʔυ΋Մೳ • Microsoft͔Βఏڙʢͨͩ͠·ͩVersion0.10.0ʣ • It enables cross-browser web automation that is ever-green, capable, reliable and fast.

Slide 18

Slide 18 text

Puppeteerͱ Ͳ͏ҧ͏ͷ͔ʁ

Slide 19

Slide 19 text

࠷ॳ͸Puppeteerͱಉ͡νʔϜ ಉ͡APIͱઆ໌͞Ε͍ͯͨ https://github.com/microsoft/playwright/tree/f03b64860f64e05e1e8bb41a952e999dbdf6b150#faq

Slide 20

Slide 20 text

2020/01/29

Slide 21

Slide 21 text

Puppeteer v2.1.0 ϦϦʔε

Slide 22

Slide 22 text

ެࣜͰFirefoxΛαϙʔτ https://twitter.com/mathias/status/1222183802870607872 'JSFGPYͰ1VQQFUFFS͕ ಈ͘Α͏ʹͳΓ·ͨ͠

Slide 23

Slide 23 text

͜ͷπΠʔτʹ࣭໰͕ࡴ౸ https://twitter.com/mathias/status/1222183802870607872

Slide 24

Slide 24 text

ಛʹ͜ͷπΠʔτ https://twitter.com/mathias/status/1222189671389835269 -> ͦΕͧΕผͷνʔϜͰ։ൃ -> Google͸͜Ε͔Β΋PuppeteerΛαϙʔτ

Slide 25

Slide 25 text

͞Βʹ͜ͷπΠʔτ https://twitter.com/benedyktdryl/status/1222196512144416768 ͜͜ͰผνʔϜͰ͋Δ͜ͱ͕Θ͔Δ

Slide 26

Slide 26 text

͞Βʹ͞Βʹ͜ͷπΠʔτ https://twitter.com/kentcdodds/status/1222199111341838336 ͜͜ͰνʔϜ͕Ҡಈͨ͜͠ͱ͕Θ͔Δ

Slide 27

Slide 27 text

2020/01/28

Slide 28

Slide 28 text

Yang Guo͕READMEʹ௥ه https://github.com/microsoft/playwright/pull/711/ﬁles

Slide 29

Slide 29 text

౜ಥʹ໊લग़ͨ͠ͷͰ https://twitter.com/malfaitrobin/status/1222199209761345536 :BOH(VP͸ ͜ͷਓͰ͢ :BOH(VP͸ ͜ͷਓͰ͢ ͲͪΒ΋ (PPHMFS

Slide 30

Slide 30 text

InfoQ͔͠هࣄ͕ݟ͔ͭΒͳ͍ t ͜͜Ͱͷ"OOPVODFT͸ (JUIVCͷ͜ͱͬΆ͍

Slide 31

Slide 31 text

Microsoft͔Β΋Google͔Β΋ هࣄ͕ग़͍ͯͳ͍ͷͰ ެࣜ৘ใ଴ͪͰ͢

Slide 32

Slide 32 text

Playwright ΍ͬͯΈͨ

Slide 33

Slide 33 text

const { firefox, webkit, chromium } = require("playwright"); const loginPageUrl = 'https://order.yodobashi.com/yc/login/ index.html'; (async () => { // const browser = await webkit.launch(); // const browser = await chromium.launch({headless: false}); const browser = await firefox.launch({dumpio: true}); const context = await browser.newContext(); const page = await context.newPage(); await page.setViewport({width: 1920, height: 2000}); await page.goto(loginPageUrl, { waitUntil: 'networkidle2', }); ɾ ɾ ɾ ΄΅Puppeteerͱಉ͡ίʔυͰಈ͍ͨ 8FCLJUͷ৔߹ $ISPNJVNͷ৔߹ 'JSFGPYͷ৔߹ 1VQQFUFFSͱҧ͏෦෼

Slide 34

Slide 34 text

ಈ͔ͳ͍෦෼΋͋Δ FirefoxͰwaitForSelector͕ ಈ͔ͳ͍ ʢࣗ෼ͷௐࠪෆ଍͔΋͠Εͳ͍ʣ