Download as PDF, PPTX
![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](https://image.slidesharecdn.com/puppeteer-180914102501/85/Puppeteer-25-320.jpg)
![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](https://image.slidesharecdn.com/puppeteer-180914102501/85/Puppeteer-27-320.jpg)
![Docker for Developers - php[tek] 2017](https://cdn.slidesharecdn.com/ss_thumbnails/dockerfordevelopers-trainingtek2017-170523133513-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DockerCon 2019] Hardening Docker daemon with Rootless mode](https://cdn.slidesharecdn.com/ss_thumbnails/hardeningdockerdaemonwithrootlessmode-190501210234-thumbnail.jpg?width=640&height=640&fit=bounds)
![5G Explained! A High Level Overview [Introduction]](https://cdn.slidesharecdn.com/ss_thumbnails/5gexplainedahighleveloverview-260119165306-cc137a3e-thumbnail.jpg?width=640&height=640&fit=bounds)
Puppeteerのお話
- 1.
- 2. Agenda • Puppeteer 🤔 •Puppeteer 🐣 • Puppeteer E2E 🐌
- 3. • 👀 > 🙇 •E2E 🙊
- 4.
- 5.
- 6.
- 7.
- 8. Puppeteer Headless Chrome Chrome Devtools Protocols Headless Chrome • •Websocket port:9222
- 9. Headless Chrome Chrome Devtools Protocols CDP • DevtoolsAPI • Json Puppeteer
- 10. Headless Chrome Chrome Devtools Protocols Puppeteer • API •Test • Puppeteer
- 11. Google I/O 2018Puppeteer 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.
- 15. $ npm ipuppeteer $ npm i puppeteer-core Install puppeteer Chromium puppeteer-core
- 16.
- 17. import * aspuppeteer 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.
- 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.
- 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.
- 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 withJest 🎉 Puppeteer E2E 🐌
- 29. "jest": { "preset": "jest-puppeteer", Install& Configuration TypeScript $ npm i jest jest-puppeteer jest-image-snapshot ts-jest @types/jest
- 30. $ npm ijest 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.