Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
PuppeteerとPlaywrightの15日間の演劇 / relation of Puppeteer and Playwright
taminif
February 12, 2020
Programming
3
1.3k
PuppeteerとPlaywrightの15日間の演劇 / relation of Puppeteer and Playwright
taminif
February 12, 2020
Tweet
Share
More Decks by taminif
See All by taminif
Redashの開発はじめました / How to get started Redash development
taminif
0
490
私の生活を変えたHeadless Chrome / Headless Chrome who changed my life
taminif
3
300
WebSocketをiOSに持ち込んで辛い思いをした経験がありますか!? / have you painful experience in web socket?
taminif
3
3.7k
LINEで馬券を購入する / Purchase a betting ticket at LINE
taminif
1
1.1k
SkyWayで一年間運用してきたけどWebRTCってつらいんじゃないの
taminif
2
900
オンライン英会話とSkyWay
taminif
0
320
オンライン英会話アプリとSkyWay
taminif
0
300
Mac1台でアプリを作る時代再び
taminif
1
370
iOS11は本当にWebRTCに対応したのか
taminif
1
1.1k
Other Decks in Programming
See All in Programming
The strategies behind ddd – AdeoDevSummit 2022
lilobase
PRO
4
240
GitHub Actions を導入した経緯
tamago3keran
1
430
Android スキルセットをフル活用して始めるスマートテレビアプリ開発
satsukies
1
190
Web API連携でCSRF対策がどう実装されてるか調べた / how to implements csrf-detection on Web API
yasuakiomokawa
2
310
heyにおけるCI/CDの現状と課題
fufuhu
2
550
個人開発でReact Native + Expo製アプリを作った話
ryonakae
1
450
io22 extended What's new in app performance
veronikapj
0
330
Jetpack Compose best practices 動画紹介 @GoogleI/O LT会
takakitojo
0
280
Android Compose Component - mapping.
taehwandev
0
110
Android Tools & Performance
takahirom
1
430
エンジニアによる事業指標計測のススメ
doyaaaaaken
1
180
#JJUG_CCC 「サポート」は製品開発? - JDBCライブラリ屋さんが実践する攻めのテクニカルサポートとJavaエンジニアのキャリアについて -
cdataj
0
410
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
Designing for humans not robots
tammielis
241
23k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
How STYLIGHT went responsive
nonsquared
85
3.9k
Agile that works and the tools we love
rasmusluckow
319
19k
For a Future-Friendly Web
brad_frost
166
7.4k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
BBQ
matthewcrist
74
7.9k
Raft: Consensus for Rubyists
vanstee
126
5.4k
Designing with Data
zakiwarfel
91
3.9k
Transcript
PuppeteerͱPlaywrightͷ 15ؒͷԋܶ ؔNodeֶԂ 9࣌ݶ 2020/02/12 େౡ ޫو@sbntaminif
ࣗݾհ • ΣϒϦΦגࣜձࣾɹ։ൃGϦʔμʔ • ීஈژͰಇ͍͍ͯ·͢ • ۙگɹ໌͕ଉࢠͷ1ࡀͷੜͰ͢ ࠓ݄͔Βಋೖ͞Εͨه೦ٳՋͰ ໌͓ٳΈͰ͢
ϓϥΠϕʔτͰ։ൃ͢Δ͕࣌ؒ औΕ͍ͯͳ͍ࢲ͕ ٱ͠ͿΓʹPuppeteer͓͏ͱ ࢥͬͨ1݄15ͷग़དྷࣄ
2020/01/15
Microsoft EdgeͷChromium൛ ϦϦʔε https://support.microsoft.com/ja-jp/help/4501095/download-the-new-microsoft-edge-based-on-chromium
Puppeteer Chrome or ChromiumͰ ಈ࡞͢Δ
ಈ͘ͷ͔ݕূ͢Δ
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Λࢦఆ͢Δ͜ͱͰ ҙͷϒϥβͰ࣮ߦ -> ͳ͘ಈ͍ͨ
READMEʹ هࡌ͕͋Δ https://github.com/puppeteer/puppeteer#default-runtime-settings
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 ͰλϒΛ૿ͤΔ
MicrosoftެࣜDocsʹ Puppeteerͷϖʔδ͕Ͱ͖ͯΔ https://docs.microsoft.com/en-us/microsoft-edge/puppeteer
EdgeͰಈ͔͢ํ๏·Ͱ͋Δ https://docs.microsoft.com/en-us/microsoft-edge/puppeteer
͜ͷ࣌EdgeͰ ͍Ζ͍Ζ༡ͿͭΓͩͬͨ
Ұिؒޙʹ ಥݱΕͨPlaywright
2020/01/23
Playwright https://github.com/microsoft/playwright
Playwrightͱ • Chromium, Firefox, WebkitΛಈ͔͢ NodeϥΠϒϥϦ • ϔουϨεϞʔυՄೳ • Microsoft͔Βఏڙʢͨͩ͠·ͩVersion0.10.0ʣ
• It enables cross-browser web automation that is ever-green, capable, reliable and fast.
Puppeteerͱ Ͳ͏ҧ͏ͷ͔ʁ
࠷ॳPuppeteerͱಉ͡νʔϜ ಉ͡APIͱઆ໌͞Ε͍ͯͨ https://github.com/microsoft/playwright/tree/f03b64860f64e05e1e8bb41a952e999dbdf6b150#faq
2020/01/29
Puppeteer v2.1.0 ϦϦʔε
ެࣜͰFirefoxΛαϙʔτ https://twitter.com/mathias/status/1222183802870607872 'JSFGPYͰ1VQQFUFFS͕ ಈ͘Α͏ʹͳΓ·ͨ͠
͜ͷπΠʔτʹ࣭͕ࡴ౸ https://twitter.com/mathias/status/1222183802870607872
ಛʹ͜ͷπΠʔτ https://twitter.com/mathias/status/1222189671389835269 -> ͦΕͧΕผͷνʔϜͰ։ൃ -> Google͜Ε͔ΒPuppeteerΛαϙʔτ
͞Βʹ͜ͷπΠʔτ https://twitter.com/benedyktdryl/status/1222196512144416768 ͜͜ͰผνʔϜͰ͋Δ͜ͱ͕Θ͔Δ
͞Βʹ͞Βʹ͜ͷπΠʔτ https://twitter.com/kentcdodds/status/1222199111341838336 ͜͜ͰνʔϜ͕Ҡಈͨ͜͠ͱ͕Θ͔Δ
2020/01/28
Yang Guo͕READMEʹه https://github.com/microsoft/playwright/pull/711/files
ಥʹ໊લग़ͨ͠ͷͰ https://twitter.com/malfaitrobin/status/1222199209761345536 :BOH(VP ͜ͷਓͰ͢ :BOH(VP ͜ͷਓͰ͢ ͲͪΒ (PPHMFS
InfoQ͔͠هࣄ͕ݟ͔ͭΒͳ͍ t ͜͜Ͱͷ"OOPVODFT (JUIVCͷ͜ͱͬΆ͍
Microsoft͔ΒGoogle͔Β هࣄ͕ग़͍ͯͳ͍ͷͰ ެࣜใͪͰ͢
Playwright ͬͯΈͨ
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ͱҧ͏෦
ಈ͔ͳ͍෦͋Δ FirefoxͰwaitForSelector͕ ಈ͔ͳ͍ ʢࣗͷௐࠪෆ͔͠Εͳ͍ʣ
2020ͷϝδϟʔϦϦʔε͕ ظ͞Ε͍ͯΔ (͜ΕInfoQͷΈ)
ͦͯ͠Puppeteer ։ൃଓ͘
ͲͪΒΩϟονΞοϓͯ͠ ͍͖ͬͯ·͠ΐ͏ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠