Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Puppeteerのお話

81 views

Published on

京都Devかふぇ#3でお話したときの資料です
https://kyoto-dev-cafe.connpass.com/event/94676/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Puppeteerのお話

  1. 1. Puppeteer Dev #3 @kobashinG
  2. 2. Agenda • Puppeteer 🤔 • Puppeteer 🐣 • Puppeteer E2E 🐌
  3. 3. • 👀
 > 🙇 • E2E 🙊
  4. 4. Web
  5. 5. • • Alexa 🙇🙇🙇
  6. 6. Puppeteer 🤔
  7. 7. Kotlin https://youtu.be/lhZOFUY1weo
  8. 8. Puppeteer Headless Chrome Chrome Devtools Protocols Headless Chrome • • Websocket port:9222
  9. 9. Headless Chrome Chrome Devtools Protocols CDP • Devtools API • Json Puppeteer
  10. 10. Headless Chrome Chrome Devtools Protocols Puppeteer • API • Test • Puppeteer
  11. 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. 12. Hack A/B Testing & Network Interception Cloud BFF Backend, … etc
  13. 13. Hack ? A/B Testing & Network Interception Cloud BFF Backend, … etc Proxy-Server SSR A/B Testing
  14. 14. 🐥 Puppeteer 🐣
  15. 15. $ npm i puppeteer $ npm i puppeteer-core Install puppeteer Chromium puppeteer-core
  16. 16. Screenshot
  17. 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. 18. Select Dom & Screenshot
  19. 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. 20. 📷 📸
  21. 21. Create a PDF
  22. 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. 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. 24. Navigate Page
  25. 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. 26. Keyboard Input
  27. 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. 28. * Puppeteer with Jest 🎉 Puppeteer E2E 🐌
  29. 29. "jest": { "preset": "jest-puppeteer", Install & Configuration TypeScript $ npm i jest jest-puppeteer jest-image-snapshot ts-jest @types/jest
  30. 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. 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. 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. 33. 🐥 🐣 
 • Puppeteer 🐌 • Headless Chrome 
 🎉
  34. 34. 🙇

×