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

Browser Automation Testing

D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=47 derek-b
June 05, 2018
0
120

Browser Automation Testing

D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=128

derek-b

June 05, 2018
Tweet

More Decks by derek-b

See All by derek-b
Pardon the disruption: a user-first approach to software design
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
14
Teaching Through Code Review
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
78
Add Location-Based Searching to Your Site with Elasticsearch
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
13
Add Location-based Searching to Your PHP App with Elasticsearch
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
1
110
Map, Filter, and Reduce in PHP
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
180
You Version Your Code, Why Not Your Database?
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
42
Taming Your Data with Elasticsearch - PHP Benelux
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
1
230
What Raising 3 Kids Taught Me About Working With Users
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
130
Taming Your Data With Elasticsearch - PHP[world]
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
130

Featured

See All Featured
A designer walks into a library…
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
196
16k
Why Our Code Smells
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
55k
What’s in a name? Adding method to the madness
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
7
1.1k
GitHub's CSS Performance
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
420k
The Language of Interfaces
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
The Mythical Team-Month
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
209
39k
A better future with KSS
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
225
15k
What's new in Ruby 2.0
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
336
30k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
The Pragmatic Product Professional
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
19
3k
Code Review Best Practice
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
43
9.3k

Transcript

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

  2. Derek Binkley @DerekB_WI Who Am I? • Derek Binkley •

    @TurnTo networks • Married, 2 daughters, 1 son
  3. None
  4. None

  5. Customer Generated Content

  6. Derek Binkley @DerekB_WI JavaScript Experience?

  7. What is It?

  8. Derek Binkley @DerekB_WI What Are We Doing? • Automate a

    browser • Try out a site/application • Validate functionality

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

    browser • Chrome Dev Tools • No GUI

  10. Headless Chrome will replace PhantomJS

  11. Is Anybody There?

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

    better after an update

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

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

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

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

  15. Derek Binkley @DerekB_WI Setup Command package.json

  16. Let’s Get Working

  17. Imports

  18. Test Suite Setup

  19. Setup and Teardown

  20. The Assertion

  21. Run the Test

  22. Example 2

  23. None
  24. None

  25. Setup Next Test

  26. Click a Button

  27. CSS Class Change

  28. Evaluate page

  29. Run the Test

  30. Take a Screenshot

  31. afterEach() runs after every test

  32. Example 4

  33. Print to PDF

  34. • Try out some pdf options of your own •

    https:/ /github.com/GoogleChrome/puppeteer/blob/ master/docs/api.md#pagepdfoptions

  35. Example 5

  36. None

  37. page.type

  38. Challenge: Write test for blank input. Does it pass?

  39. Example 6

  40. Test CSS

  41. page.hover

  42. getComputedStyle()

  43. Example 8

  44. setViewport()

  45. Viewport 1200x800

  46. deviceScaleFactor: 3

  47. viewport 300x200

  48. Emulate a Device

  49. Look for iPhone selector

  50. Testing a login session

  51. Example 10

  52. waitForNavigation

  53. Successful Login

  54. Check for logged in message

  55. Derek Binkley @DerekB_WI Experiment Further const context = await browser.createIncognitoBrowserContext();

    page.focus(‘#myselector’) page.mouse.move(x, y, [options]) page.mouse.click(x, y, [options]) page.keyboard.press(‘Tab’) page.touchscreen.tap(x, y) https:/ /github.com/GoogleChrome/puppeteer/blob/master/docs/api.md
  56. None

  57. Derek Binkley @DerekB_WI Thanks Bedankt • @DerekB_WI • https:/ /joind.in/talk/e62ac

  58. 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/ • https:/ /groups.google.com/forum/m/#!topic/phantomjs/9aI5d-LDuNE • Photos courtesy of https:/ /www.flickr.com/photos/internetarchivebookimages • https:/ /medium.com/@kensoh/chromeless-chrominator-chromy-navalia-lambdium- ghostjs-autogcd-ef34bcd26907