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

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠