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