The power of Headless Chrome and browser automation (Google I/O '18)

  Рет қаралды 197,965

Chrome for Developers

Chrome for Developers

6 жыл бұрын

The headless browser revolution has arrived! Headless browsers are powerful tools that all developers can adopt in their workflow. This session will showcase examples of the amazing things that Chrome can do without a UI: write programs to control the browser; test a site; automate UI tasks; integrate into a CI system; setup A/B perf monitoring; prerender a client-side app for SEO; and more. The focus will be on using Puppeteer, Google's Node library for controlling headless Chrome.
Rate this session by signing-in on the I/O website here → goo.gl/PEoVtB
Getting Started with Headless Chrome → goo.gl/wg3u1W
Puppeteer → goo.gl/YXrgqX
Examples → goo.gl/G4QcBC
Demo sites:
→ pptraas.com
→ try-puppeteer.appspot.com
Watch more Chrome and Web sessions from I/O '18 here → goo.gl/5fgXhX
See all the sessions from Google I/O '18 here → goo.gl/q1Tr8x
Subscribe to the Chrome Developers channel → goo.gl/LLLNvf
#io18 event: Google I/O 2018; re_ty: Publish; product: Chrome - Web - Puppeteer; fullname: Eric Bidelman; event: Google I/O 2018;

Пікірлер: 84
@zss123456789
@zss123456789 4 жыл бұрын
*Timestamps* 0:07 introduction (Eric Bidelman) 1:17 agenda 1:38 Intro to Headless Chrome 3:00 What does it unlock for us? 4:54 [Pyramid of Puppeteer] Chrome DevTools Protocol (CDP) 5:45 [Pyramid of Puppeteer] Puppeteer w/ usage examples 10 Things you can do (your scripts at the top of Pyramid of Puppeteer) 9:02 0. Quick Intro 9:30 1. *Pre-rendering* *JS* *sites* 12:46 1.1 Performance Comparison Demo 13:51 1.2 4 Pre-rendering Optimization tips 17:29 2. *Is* *Lazy-loading* *paying* *off?* 19:22 3. *A/B* *Testing* 21:09 4. *Catch* *issues* *for* *the* *Google* *crawler* 22:54 5. *Create* *custom* *PDFs* 24:20 6. *Make* *your* *browser* *talk* 26:28 7. *Test* *a* *Chrome* *extension* 28:10 8. *Crawl* *a* *SPA* 29:13 9. *Verify* *service* *worker* *offline* *caching* 30:52 10. *Procrastinate* (showcase touch/keyboard API) 31:39 Closing Remarks
@AV-fd5wn
@AV-fd5wn 4 жыл бұрын
Thank youu :)
@kvenk001
@kvenk001 3 жыл бұрын
You're doing God's work here
@jwgmail
@jwgmail 3 жыл бұрын
awesome
@AbdallaElmedny
@AbdallaElmedny 6 жыл бұрын
I have been using puppeteer to automate the process of finding a new apartment and it has been such a great experience. The API is really well documented and its really straight forward to use.
@mrbigsmizzy
@mrbigsmizzy 3 жыл бұрын
Having a hard time with this. I need to do the same thing. Are you able to give a step by step please?
@camelCaseFTW
@camelCaseFTW 6 жыл бұрын
24:55 "The rise of the machines has begun" _me nervously laughing_
@cindysi63
@cindysi63 6 жыл бұрын
Very cool tech that I didn’t know existed. Thanks for sharing. Now to learn more about this
@dev.syedmh
@dev.syedmh 5 жыл бұрын
This is cool and all, but at 9:43 he put his words where his mouth is, and i think thats the greatest thing of all.
@anamuslimun
@anamuslimun 3 жыл бұрын
headless chrome with puppeteer is a bliss
@torch2424
@torch2424 6 жыл бұрын
Such a genius idea to SSR with puppeteer. Great work!
@wizardOfRobots
@wizardOfRobots 5 жыл бұрын
I don't understand tho...why ssr with puppeteer when you can ssr the whole thing?
@TSulemanW
@TSulemanW 5 жыл бұрын
Nicely Explaination
@waliddu62
@waliddu62 5 жыл бұрын
headless chrome is the best, I used lot of headless browser and lot of them don't support some javascript sometime I couldnt load a page but with chromium you can load any web site I never had any issue to load pages or with the javascript, you can just do everything even watching a youtube video ^^, all you do with chrome you can do with headless chrome and you can run it on linux.I have been using pupeeteer for a moment and it's the best headless browser, just thank a lot for making this.
@darnaud3679
@darnaud3679 5 жыл бұрын
Great video thank you
@sparrow6084
@sparrow6084 4 жыл бұрын
super powerful headless browser in the world, for test or crawl or automation .... a lot of usecase.
@rk1only4u3
@rk1only4u3 6 жыл бұрын
Thank you
@Denzelzeldi
@Denzelzeldi 3 жыл бұрын
in case someone is trying the 2nd example of server.mjs, the example is missing a line of code. If your index.html is located in the root folder of the server, add : app.use(express.static('.'))
@iamtheiconoclast3
@iamtheiconoclast3 4 жыл бұрын
That's not a pyramid, mate; that's a triangle.
@chibiebil
@chibiebil 4 жыл бұрын
it can still be a pyramid from an orthographic point of view :p
@sickodelic1
@sickodelic1 4 жыл бұрын
ROFL
@shrlklondnes
@shrlklondnes 3 жыл бұрын
14:35 “How to wait until pages get partly or completely loaded”
@elgs1980
@elgs1980 6 жыл бұрын
WOW! WOW! WOW!
@leeroyescu
@leeroyescu 6 жыл бұрын
22:54 *Creating custom PDFs* I would very much like support for adding metadata to PDFs, like you can with PDFKit. For storing PDF page snapshots it would be great to have them associated with searchable metadata (like Title, Author, Subject, Keywords, Comments). Where should I create the feature request? Puppeteer? SkiaPDF? Chromium?
@21Million
@21Million 3 жыл бұрын
Headless Chrome + Karate + Gatling is the bomb.
@chrischoir3594
@chrischoir3594 5 жыл бұрын
"Kinda cool"..."Really Awesome !!!"
@avimehenwal
@avimehenwal 4 жыл бұрын
Nice ...
@marchino3577
@marchino3577 4 жыл бұрын
Hi, Can I insert script that using puppeteer library in a tag of a web page?
@geooot
@geooot 6 жыл бұрын
What about concurrency? Is it really ok to call a puppetier browser in an enpoint that can be called by multiple clients at the same time?
@sharon0x1
@sharon0x1 6 жыл бұрын
why would not be? just create a module which exposes one instance on headless chrome. Now you can create as many tabs as your system can handle. Or, more realistically, you can create a queue for rendering tasks, and reause let's say 10 tabs, to render the queued requests.
@temitopes7066
@temitopes7066 6 жыл бұрын
i dont think it is a major issue if you put the caching in place
@ishubagga4579
@ishubagga4579 5 жыл бұрын
First of all many thanks for uploading the info about headless chrome. Problem : I am trying to access a password protected url which loads pdf. This works absolutely fine in normal chrome browser, however, in Chrome headless mode because of some reason the PDF never gets loaded. Need your help to approach this problem. It would really be a BIG help if you can help me in anyways… Many thanks to you in advance
@testpassion1338
@testpassion1338 4 жыл бұрын
Would like to run with it's "head full", i n incognito mode, and would like to save the interactive timeline report from the performance tab as is. Can this be done? Where can I find a video that shows this?
@KaiBuskirk
@KaiBuskirk 3 жыл бұрын
LUV!
@davidconnelly
@davidconnelly 6 жыл бұрын
How does it compare to Nightmare?
@dougb70
@dougb70 3 жыл бұрын
apparently it made it obsolete
@familyechev
@familyechev 6 жыл бұрын
Nice video, Does Puppeteer-SSR is more effective than TemplateEngines-SSR ?. My point is, template engines do not require for taking care of filtering requests, and also you could inject data on templates without calling external services. I like the puppet-ssr approach but just asking for any advantages over template engines ssr.
@sivapalaniappan701
@sivapalaniappan701 Жыл бұрын
Great
@mainguyenvu9205
@mainguyenvu9205 4 жыл бұрын
I do not understand why this approach does not wait the whole browser to load? Because server side have to do all the work before res.send to the client.
@tamduong1722
@tamduong1722 5 жыл бұрын
I want to import expression in control panel is not it?
@AmeerHamza-cy6km
@AmeerHamza-cy6km 5 жыл бұрын
help me.. i want to use puppeteer to fetch a page and press a specific button on the page..how can i do that?
@manjurulkhan2308
@manjurulkhan2308 4 ай бұрын
10:38 FIrst code sample
@patrickriggen719
@patrickriggen719 6 жыл бұрын
So far ahead of me automation
@vds2011
@vds2011 5 жыл бұрын
Unable to use download options in headless chrome.
@ridrogoxd
@ridrogoxd 5 жыл бұрын
I tried this the other day, but I couldn't bypass Cloudflare DDOS protection, don't know why...
@Ajwebdaman02
@Ajwebdaman02 4 жыл бұрын
good
@nguyentrongtrinh1678
@nguyentrongtrinh1678 3 жыл бұрын
how can i set background image add use margin @page for each page in file pdf, i can margin top and bottom for each pages but can't set background image, Please help me, Thanks!
@heratpatel7174
@heratpatel7174 6 жыл бұрын
can we use pupeeteer for cross browsers as silenium ?
@KarthikeyanSkarthikeyanmadurai
@KarthikeyanSkarthikeyanmadurai 6 жыл бұрын
Puppeteer works only with Chromium or Chrome. However, many teams only run unit tests with a single browser (e.g. PhantomJS). In non-testing use cases, Puppeteer provides a powerful but simple API because it's only targeting one browser that enables you to rapidly develop automation scripts. Puppeteer bundles the latest versions of Chromium.
@chrischoir3594
@chrischoir3594 5 жыл бұрын
"Basically"
@MikeNugget
@MikeNugget 3 жыл бұрын
Still can't easily download files with Puppeteer and without crunches.
@vigd6298
@vigd6298 4 жыл бұрын
why he didnt use chromebook?
@NolaanOne
@NolaanOne 6 жыл бұрын
Am I the only one feeling web developers spent 20 years slowing down the internet only to realize that all of this wasn't necessary in the first place. And now the pyroman is the fireman. We'll soon have to pay Google to generate html. Just like Maps. 😔
@cappie2000
@cappie2000 5 жыл бұрын
I can't come up with a reason why all this shit is needed when you have Varnish and a random scripting language like PHP 7.2, or HELL.. server-side NODEJS even... just sitting there that can render this stuff at 5000 hits per second instead of 4...
@cappie2000
@cappie2000 5 жыл бұрын
So we've gone from PHP or server-side nodejs that renders all this directly to HTML to a client-side language that should create this, but instead, we do this server side using a headless browser which scales in much the same way that a banana doesn't, all instead of a fast script interpreter, and then send it to the client to be handled as static HTML.. only to have it all in 1 language? is that really the only reason?! the lazyness of being able to use one language?
@psilocyberspaceman
@psilocyberspaceman 6 жыл бұрын
Yes. Let's use eager Promises instead of lazy Futures. And, wow, we also get a then then then then. Bravo.
@ianvisser7899
@ianvisser7899 Жыл бұрын
8:30 Web scraping at it's finest right there, with OCR
@trialusert
@trialusert 5 жыл бұрын
Can you simulate mouse clicks at a specific location?
@leonardolourencocrespilhoh511
@leonardolourencocrespilhoh511 5 жыл бұрын
With puppeteer you can click on Css Selectors (pptr.dev/#?product=Puppeteer&version=v1.13.0&show=api-pageclickselector-options) or you can use the DevTools Protocol Input.dispatchMouseEvent method to specify a (x,y) location. See puppeteer's CDPSession class for examples of how to use DevTools Protocol with puppeteer.
@SouravBagchigoogleplus
@SouravBagchigoogleplus 4 жыл бұрын
Sad thing is, this is only for node.js
@anonymenet
@anonymenet 5 жыл бұрын
kzbin.info/www/bejne/opm9gHmLjpaqm9E The presentation mentioned a protocol monitor panel there. Its not in the menu in Chrome 72, even when Im in the right context (localhost:9222). Did it get remove ?
@leonardolourencocrespilhoh511
@leonardolourencocrespilhoh511 5 жыл бұрын
Yes, it was removed. I saw this protocol monitor pannel for a while in a early version. Don't remember exactly when... maybe 8 months ago.... maybe...
@paulosandsten983
@paulosandsten983 3 жыл бұрын
I wonder why we even care about 3g for most part. It’s like the same old discussion to support IE but now it’s network. If your page requires animations and high-performance. Seriously, don’t even think about what is better for the first paint. Think of what is the best overall. This first paint strategy is Google dogma
@emilyfukuyama2170
@emilyfukuyama2170 4 жыл бұрын
nothing works -
@kaypakaipa8559
@kaypakaipa8559 6 жыл бұрын
If puppetier is the way, then why not use PHP as it does server side rendering. Personally i love JS, but are we not reinventing the wheel in another language here.
@Venistro
@Venistro 6 жыл бұрын
You can also control the headless chrome with PHP, via websockets. So someone could reprogram Puppeteer in PHP or is there something against?
@shifteleven
@shifteleven 6 жыл бұрын
Because you can re-use the JS that you wrote for the client to work for server-side rendering. You don't have to duplicate the logic in two places. Furthermore, Puppeteer gives you more than just SSR - you can take screenshots, make PDFs. Those things you cannot do with just PHP (of course you could use PHP and websockets to control a headless chrome, but I sense that's not the point you're trying to make, correct me if I'm wrong). That said, using a bunch of headless chrome instances might use more computing resources than you want, at which point PHP or Go or any other language would work. Tons of ways to do this, it's all dependent on your requirements.
@kaypakaipa8559
@kaypakaipa8559 6 жыл бұрын
Stephan Bijzitter i guess the benefit here is utilizing one language. Thanks
@rckd5903
@rckd5903 5 жыл бұрын
Nope. The benefit is that you can build apps with a great user experience (=pure js frontend) without the disadvantages (in terms of seo, ssr complexity and initial page load).
@cappie2000
@cappie2000 5 жыл бұрын
@@rckd5903 but wait.. isn't all the javascript removed from the page when it's sent to the browser... soooo.. the next request HAS to go through that headless monstrosity again?
@jackisjack_bysun
@jackisjack_bysun 6 жыл бұрын
still too slow in x2...
@epk1001
@epk1001 5 жыл бұрын
How to download the files in chrome headless mode in automation.... Can you please help me on this
@spot8961
@spot8961 3 жыл бұрын
too long...
@AmeerHamza-cy6km
@AmeerHamza-cy6km 5 жыл бұрын
puppeteer is opening doors to alot of hacking methods and will be banned i think..........
@philadams9254
@philadams9254 6 жыл бұрын
You can do all this stuff in normal Chrome.
@cammeymokmon8280
@cammeymokmon8280 5 жыл бұрын
good
What's new in Chrome DevTools (Google I/O '18)
34:29
Chrome for Developers
Рет қаралды 24 М.
Modern Web Testing and Automation with Puppeteer (Google I/O ’19)
29:46
Chrome for Developers
Рет қаралды 79 М.
3 wheeler new bike fitting
00:19
Ruhul Shorts
Рет қаралды 29 МЛН
Sprinting with More and More Money
00:29
MrBeast
Рет қаралды 179 МЛН
Build the future of the web with WebAssembly and more (Google I/O '18)
34:28
Chrome for Developers
Рет қаралды 91 М.
What Is a Headless Browser?
5:00
Oxylabs
Рет қаралды 1 М.
Understand Kotlin Coroutines on Android (Google I/O'19)
37:49
Android Developers
Рет қаралды 173 М.
The fastest way to solve captcha
0:16
Tech Fury
Рет қаралды 209 М.
A Beginner's Guide to WebSockets
29:26
freeCodeCamp.org
Рет қаралды 314 М.
An introduction to WebAssembly
25:23
Coding Tech
Рет қаралды 186 М.
The Best Web Browser
10:18
Chris Titus Tech
Рет қаралды 603 М.
#miniphone
0:16
Miniphone
Рет қаралды 3,1 МЛН
Купил этот ваш VR.
37:21
Ремонтяш
Рет қаралды 234 М.
i love you subscriber ♥️ #iphone #iphonefold #shortvideo
0:14
Si pamerR
Рет қаралды 3,2 МЛН