Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Puppeteerのお話
Similar to Puppeteerのお話 (20)
Recently uploaded
Recently uploaded (20)
Puppeteerのお話
- 2. Agenda • Puppeteer 🤔 • Puppeteer 🐣 • Puppeteer E2E 🐌
- 3. • 👀 > 🙇 • E2E 🙊
- 4. Web
- 6. Puppeteer 🤔
- 8. Puppeteer Headless Chrome Chrome Devtools Protocols Headless Chrome • • Websocket port:9222
- 9. Headless Chrome Chrome Devtools Protocols CDP • Devtools API • Json Puppeteer
- 10. Headless Chrome Chrome Devtools Protocols Puppeteer • API • Test • Puppeteer
- 11. Google I/O 2018 Puppeteer Session I/O • Keyboard & Touch & Mouse • Page ScreenShot & PDF • Create PDF • Running Headless in the Cloud • A/B Testing & Network interception • SSR/Pre-Rendering • Google Crower
- 12. Hack A/B Testing & Network Interception Cloud BFF Backend, … etc
- 13. Hack ? A/B Testing & Network Interception Cloud BFF Backend, … etc Proxy-Server SSR A/B Testing
- 14. 🐥 Puppeteer 🐣
- 15. $ npm i puppeteer $ npm i puppeteer-core Install puppeteer Chromium puppeteer-core
- 16. Screenshot
- 17. import * as puppeteer from 'puppeteer' (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://yahoo.co.jp'); await page.screenshot({ path: ‘out/yahoo.png’, fullPage: true }); await browser.close(); })(); Take a Screenshot
- 18. Select Dom & Screenshot
- 19. const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(`https://twitter.com/xxxx`); const tweet = await page.$( ‘.tweet.permalink-tweet' ); await tweet.screenshot({ path: 'out/tweet.png' }); await browser.close(); Select Dom & Screenshot
- 20. 📷 📸
- 21. Create a PDF
- 22. (async () => { const browser = await puppeteer.launch(); const page1 = await browser.newPage(); await page1.goto('https://yahoo.co.jp'); await page1.pdf({path: 'out/yahoo.pdf'}); await page1.close(); })(); Create a PDF
- 23. const browser = await puppeteer.launch(); const page2 = await browser.newPage(); await page2.setContent(` <!DOCTYPE html> <html> <head> <style>… HTML PDF `); await page2.pdf({path: 'out/sample.pdf'}); await browser.close(); Create a PDF
- 24. Navigate Page
- 25. const page = await browser.newPage(); await page.goto(`https://twitter.com/xxxx`); await page.$eval( `.tweet[data-screen-name=“kobashinG"]`, (tweet: HTMLElement) => tweet.click() ); await page.waitForSelector( ‘.tweet.permalink-tweet', {visible: true} ); Navigate Page
- 26. Keyboard Input
- 27. await page.goto('https://google.com'); await page.keyboard.type(' '); const [response] = await Promise.all([ page.waitForNavigation(), // page.click('#srchbtn') page.keyboard.press('Enter') ]); Keyboard Input
- 28. * Puppeteer with Jest 🎉 Puppeteer E2E 🐌
- 29. "jest": { "preset": "jest-puppeteer", Install & Configuration TypeScript $ npm i jest jest-puppeteer jest-image-snapshot ts-jest @types/jest
- 30. $ npm i jest jest-puppeteer jest-image-snapshot $ npm i ts-jest @types/jest @types/puppeteer @types/jest-environment-puppeteer @types/expect-puppeteer Install TypeScript
- 31. describe("Google", () => { beforeAll(async () => { await page.goto('https://google.com'); }); it('should display "google" text on page’, async () => { await expect(page).toMatch(‘google') }) }) Hello World ,
- 32. describe("Google", () => { beforeAll(async () => { await page.goto('https://google.com'); }); it('should display "google" text on page’, async () => { await expect(page).toMatch(‘google') }) }) E2E , Modern Frontend Test 🤩
- 33. 🐥 🐣 • Puppeteer 🐌 • Headless Chrome 🎉
- 34. 🙇