Browser Automated Tests

Slide 1

Slide 1 text

Browser Automated Tests Derek Binkley @DerekB_WI

Slide 2

Slide 2 text

Derek Binkley @DerekB_WI Designer? Developer? Other?

Slide 3

Slide 3 text

What is It?

Slide 4

Slide 4 text

Derek Binkley @DerekB_WI Testing Tools • Text based • Page recorder • Selenium WebDriver • Browser Emulator

Slide 5

Slide 5 text

Derek Binkley @DerekB_WI Headless Chrome • June 2017 • Full browser • Chrome Dev Tools • No GUI

Slide 6

Slide 6 text

Is Anybody There?

Slide 7

Slide 7 text

Derek Binkley @DerekB_WI Why? • Reliability • Dependability • Sleep better after an update

Slide 8

Slide 8 text

What do we need? Node Chrome Puppeteer Mocha Chai

Slide 9

Slide 9 text

Derek Binkley @DerekB_WI Install • npm init • npm i —save mocha chai • npm i --save puppeteer • Add test script to package.json

Slide 10

Slide 10 text

Derek Binkley @DerekB_WI Setup Command package.json

Slide 11

Slide 11 text

Examples

Slide 12

Slide 12 text

Derek Binkley @DerekB_WI Basics • Test Deﬁned as JavaScript • Full Access to DOM • Assertions using Chai

Slide 13

Slide 13 text

Derek Binkley @DerekB_WI First Test

Slide 14

Slide 14 text

Derek Binkley @DerekB_WI First Test

Slide 15

Slide 15 text

Derek Binkley @DerekB_WI Test Search

Slide 16

Slide 16 text

Derek Binkley @DerekB_WI Test Search

Slide 17

Slide 17 text

Derek Binkley @DerekB_WI Test Failed

Slide 18

Slide 18 text

Derek Binkley @DerekB_WI Test Failed

Slide 19

Slide 19 text

Derek Binkley @DerekB_WI Screenshots

Slide 20

Slide 20 text

Derek Binkley @DerekB_WI Screenshots

Slide 21

Slide 21 text

Derek Binkley @DerekB_WI Interactive Test

Slide 22

Slide 22 text

Derek Binkley @DerekB_WI Interactive Test

Slide 23

Slide 23 text

Derek Binkley @DerekB_WI Reacting to Changes • Changing link names • Changing server builds • Partners changing integrations • New branding

Slide 24

Slide 24 text

Derek Binkley @DerekB_WI Thanks • @DerekB_WI • http:/ /derekb-wi.com

Slide 25

Slide 25 text

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