Browser Automation Testing with Headless Chrome - That Conference

Slide 1

Slide 1 text

Derek Binkley - @DerekB_WI

Slide 2

Slide 2 text

Derek Binkley - @DerekB_WI

Slide 3

Slide 3 text

Derek Binkley - @DerekB_WI Browser Automation Testing with Headless Chrome

Slide 4

Slide 4 text

Derek Binkley - @DerekB_WI Is anybody there?

Slide 5

Slide 5 text

Derek Binkley - @DerekB_WI Who Am I? • Derek Binkley • TurnTo Networks • Married, 2 daughters, 1 son

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Derek Binkley - @DerekB_WI Who Are You? • JavaScript? • QA? • Selenium? • DevOps?

Slide 8

Slide 8 text

Derek Binkley - @DerekB_WI What are we doing? • Automate a Browser • Try a site like a user • Validate Functionality

Slide 9

Slide 9 text

Derek Binkley - @DerekB_WI Headless Chrome • Introduced June 2017 • Full Browser • No GUI • Controlled by Node library (Puppeteer)

Slide 10

Slide 10 text

Derek Binkley - @DerekB_WI Headless Chrome to replace PhantomJS

Slide 11

Slide 11 text

Derek Binkley - @DerekB_WI Selenium v. Headless Chrome • Won’t replace selenium • Selenium complex and powerful • Chrome - single browser testing • Different uses

Slide 12

Slide 12 text

Derek Binkley - @DerekB_WI Why? • Reliability • Dependability • Sleep better after an update • In addition to other tests

Slide 13

Slide 13 text

Derek Binkley - @DerekB_WI Components • Using Node • Puppeteer - give us Chrome • Mocha - Runs Test • Chai - Provides assertions

Slide 14

Slide 14 text

Derek Binkley - @DerekB_WI Setup Script • package.json

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Derek Binkley - @DerekB_WI Run It

Slide 17

Slide 17 text

Derek Binkley - @DerekB_WI

Slide 18

Slide 18 text

Derek Binkley - @DerekB_WI •Assemble •Act •Assert

Slide 19

Slide 19 text

Derek Binkley - @DerekB_WI Imports

Slide 20

Slide 20 text

Derek Binkley - @DerekB_WI Define

Slide 21

Slide 21 text

Derek Binkley - @DerekB_WI Setup

Slide 22

Slide 22 text

Derek Binkley - @DerekB_WI Tear down

Slide 23

Slide 23 text

Derek Binkley - @DerekB_WI The Assertion

Slide 24

Slide 24 text

Derek Binkley - @DerekB_WI

Slide 25

Slide 25 text

Derek Binkley - @DerekB_WI

Slide 26

Slide 26 text

Derek Binkley - @DerekB_WI

Slide 27

Slide 27 text

Derek Binkley - @DerekB_WI click()

Slide 28

Slide 28 text

Derek Binkley - @DerekB_WI Class change

Slide 29

Slide 29 text

Derek Binkley - @DerekB_WI screenshot()

Slide 30

Slide 30 text

Derek Binkley - @DerekB_WI

Slide 31

Slide 31 text

Derek Binkley - @DerekB_WI this.currentTest.state

Slide 32

Slide 32 text

Derek Binkley - @DerekB_WI pdf()

Slide 33

Slide 33 text

Derek Binkley - @DerekB_WI PDF options • https://github.com/GoogleChrome/puppeteer/blob/master/docs/ api.md#pagepdfoptions

Slide 34

Slide 34 text

Derek Binkley - @DerekB_WI

Slide 35

Slide 35 text

Derek Binkley - @DerekB_WI type()

Slide 36

Slide 36 text

Derek Binkley - @DerekB_WI Click the button

Slide 37

Slide 37 text

Derek Binkley - @DerekB_WI The assertion

Slide 38

Slide 38 text

Derek Binkley - @DerekB_WI

Slide 39

Slide 39 text

Derek Binkley - @DerekB_WI hover()

Slide 40

Slide 40 text

Derek Binkley - @DerekB_WI getComputedStyle()

Slide 41

Slide 41 text

Derek Binkley - @DerekB_WI RGB value

Slide 42

Slide 42 text

Derek Binkley - @DerekB_WI setViewport()

Slide 43

Slide 43 text

Derek Binkley - @DerekB_WI Resolution?

Slide 44

Slide 44 text

Derek Binkley - @DerekB_WI emulate()

Slide 45

Slide 45 text

Derek Binkley - @DerekB_WI Sessions

Slide 46

Slide 46 text

Derek Binkley - @DerekB_WI waitForNavigation()

Slide 47

Slide 47 text

Derek Binkley - @DerekB_WI Page Interactions • page.focus(‘#myselector’) • page.mouse.move(x, y, [options]) • page.mouse.click(x, y, [options]) • page.keyboard.press(‘Tab’) • page.touchscreen.tap(x, y)

Slide 48

Slide 48 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 • https://puppeteersandbox.com/ • https://groups.google.com/forum/m/#!topic/phantomjs/9aI5d-LDuNE • https://medium.com/@kensoh/chromeless-chrominator-chromy-navalia-lambdium-ghostjs- autogcd-ef34bcd26907

Slide 49

Slide 49 text

Derek Binkley - @DerekB_WI Resources • https://about.gitlab.com/2017/12/19/moving-to- headless-chrome/ • https://github.com/nesk/puphpeteer • http://mickadoo.github.io/php,phpunit,chrome,testing/ 2017/10/08/php-tests-using-headless-chrome.html • https://github.com/nesk/puphpeteer