Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Headless Chrome Tutorial

derek-b
April 19, 2018
Technology
0
55

Headless Chrome Tutorial

Madison PHP tutorial using Puppeteer, Mocha, Chai and Headless Chrome.

derek-b

April 19, 2018
Tweet

More Decks by derek-b

See All by derek-b
Pardon the disruption: a user-first approach to software design
derekb
0
17
Teaching Through Code Review
derekb
0
82
Add Location-Based Searching to Your Site with Elasticsearch
derekb
0
14
Add Location-based Searching to Your PHP App with Elasticsearch
derekb
1
120
Map, Filter, and Reduce in PHP
derekb
0
200
You Version Your Code, Why Not Your Database?
derekb
0
44
Taming Your Data with Elasticsearch - PHP Benelux
derekb
1
250
What Raising 3 Kids Taught Me About Working With Users
derekb
0
140
Taming Your Data With Elasticsearch - PHP[world]
derekb
0
140

Other Decks in Technology

See All in Technology
Zigでコンテナランタイム作ってみた
line_developers
PRO
4
1.1k
「欲しい情報がすぐに手に入る」を実現するNotionでの開発ドキュメント管理
toshiakia
1
620
A1A会社紹介資料-2022-09-12
a1a
2
1.9k
Swiftで我が家を より便利に、安全に!
u503
0
210
続CPUとは何か / What is a CPU continued
tomzoh
1
240
マネジメント3.0モデル入門（120分版）
takufujii
1
370
DevOpsDays Taipei 2022 Opening
cheng_wei_chen
3
910
Java SEの動向 2022夏版
chiroito
4
1.4k
頻度主義統計学を「完全に理解」しよう
ueniki
1
130
Elastic Observability 體驗工作坊 @ DevOpsDays Taipei 2022
unclejoe
0
510
デイリースクラムいらなくなくなくなーい！？
kitamu_mu
17
15k
Renewal of UIT INSIDE beyonds native app and web
line_developers
PRO
1
100

Featured

See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
8
1.1k
A Tale of Four Properties
chriscoyier
149
21k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
Facilitating Awesome Meetings
lara
31
4.2k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
Git: the NoSQL Database
bkeepers
PRO
416
59k
Rebuilding a faster, lazier Slack
samanthasiow
63
7.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
223
49k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
1k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k

Transcript

  1. Browser Automated Testing with Headless Chrome Derek Binkley @DerekB_WI

  2. Derek Binkley @DerekB_WI JavaScript Experience?

  3. What is It?

  4. Derek Binkley @DerekB_WI Testing Tools • Text based • Page

    recorder • Selenium WebDriver • Browser Emulator

  5. Derek Binkley @DerekB_WI Headless Chrome • June 2017 • Full

    browser • Chrome Dev Tools • No GUI

  6. Is Anybody There?

  7. Derek Binkley @DerekB_WI Why? • Reliability • Dependability • Sleep

    better after an update

  8. What do we need? Node Chrome Puppeteer Mocha Chai

  9. Derek Binkley @DerekB_WI Install • npm init • npm i

    —save mocha chai • npm i --save puppeteer • Add test script to package.json

  10. Derek Binkley @DerekB_WI Setup Command package.json

  11. Derek Binkley @DerekB_WI Basics • Test Defined as JavaScript •

    Full Access to DOM • Assertions using Chai • Run using Mocha

  12. Examples

  13. Derek Binkley @DerekB_WI Thanks • @DerekB_WI • https:/ /joind.in/talk/034f5

  14. Derek Binkley @DerekB_WI Resources • https:/ /developers.google.com/web/updates/2017/06/ headless-karma-mocha-chai • https:/

    /medium.com/@ankit_m/ui-testing-with- puppeteer-and-mocha-part-1-getting-started- b141b2f9e21 • https:/ /github.com/GoogleChrome/puppeteer • https:/ /github.com/checkly/puppeteer-examples • https:/ /puppeteersandbox.com/