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

73e80d16abc7cc65e08d430c2eae811b?s=47 taminif
February 12, 2020

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

73e80d16abc7cc65e08d430c2eae811b?s=128

taminif

February 12, 2020
Tweet

Transcript

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

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

  3. ϓϥΠϕʔτͰ΋։ൃ͢Δ͕࣌ؒ औΕ͍ͯͳ͍ࢲ͕ ٱ͠ͿΓʹPuppeteer࢖͓͏ͱ ࢥͬͨ1݄15೔ͷग़དྷࣄ

  4. 2020/01/15

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

  6. Puppeteer͸ Chrome or ChromiumͰ ಈ࡞͢Δ

  7. ಈ͘ͷ͔ݕূ͢Δ

  8. 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Λࢦఆ͢Δ͜ͱͰ ೚ҙͷϒϥ΢βͰ࣮ߦ -> ໰୊ͳ͘ಈ͍ͨ
  9. READMEʹ΋ هࡌ͕͋Δ https://github.com/puppeteer/puppeteer#default-runtime-settings

  10. 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 ͰλϒΛ૿΍ͤΔ
  11. MicrosoftެࣜDocsʹ΋ Puppeteerͷϖʔδ͕Ͱ͖ͯΔ https://docs.microsoft.com/en-us/microsoft-edge/puppeteer

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

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

  14. Ұिؒޙʹ ಥ೗ݱΕͨPlaywright

  15. 2020/01/23

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

  17. Playwrightͱ͸ • Chromium, Firefox, WebkitΛಈ͔͢ Node੡ϥΠϒϥϦ • ϔουϨεϞʔυ΋Մೳ • Microsoft͔Βఏڙʢͨͩ͠·ͩVersion0.10.0ʣ

    • It enables cross-browser web automation that is ever-green, capable, reliable and fast.
  18. Puppeteerͱ Ͳ͏ҧ͏ͷ͔ʁ

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

  20. 2020/01/29

  21. Puppeteer v2.1.0 ϦϦʔε

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

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

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

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

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

  27. 2020/01/28

  28. Yang Guo͕READMEʹ௥ه https://github.com/microsoft/playwright/pull/711/files

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

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

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

  32. Playwright ΍ͬͯΈͨ

  33. 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ͱҧ͏෦෼
  34. ಈ͔ͳ͍෦෼΋͋Δ FirefoxͰwaitForSelector͕ ಈ͔ͳ͍ ʢࣗ෼ͷௐࠪෆ଍͔΋͠Εͳ͍ʣ

  35. 2020೥಺ͷϝδϟʔϦϦʔε͕ ظ଴͞Ε͍ͯΔ (͜Ε΋InfoQͷΈ)

  36. ͦͯ͠Puppeteer΋ ։ൃ͸ଓ͘

  37. ͲͪΒ΋ΩϟονΞοϓͯ͠ ΍͍͖ͬͯ·͠ΐ͏ʂ

  38. ͋Γ͕ͱ͏͍͟͝·ͨ͠