Web UI Automation with Selenium for Beginners

Slide 1

Slide 1 text

Web UI Automation with Selenium for Beginners Og Maciel

Slide 2

Slide 2 text

● Name: Og Maciel ● Work: Red Hat since 2011; rPath previously ● Job: Senior Manager, Quality Engineering ● Quality Engineer since 2008 ● Projects: ○ RH Satellite 5 and 6 ○ Pulp ○ Sonar

Slide 3

Slide 3 text

Objective aka What’s in this for you? ● Cover Web UI automation using Selenium with a focus on the Python programming language ● Learn how to easily gather Web UI information, record their actions and play them back via Selenium IDE or Scirocco ● Write Python code to perform the same actions ● Run your code with unitest and py.test ● Time allowing, use SauceLabs to execute automated tests on multiple types of operating systems and web browser combinations. ● BONUS: Travis.CI

Slide 4

Slide 4 text

Follow Along https://github.com/omaciel/Web-UI-Automation-with-Selenium-for-Beginners

Slide 5

Slide 5 text

(My) Definitions

Slide 6

Slide 6 text

When I say web UI Automation... … I mean: ● Control a web browser by accessing a web page’s elements ● Programmatically :) ● Web elements are part of the DOM object

Slide 7

Slide 7 text

Document Object Model (DOM)

Slide 8

Slide 8 text

Locating web elements ● Different schemes for locating web elements ○ CSS attributes ○ Value ○ Tag name ○ XPATH ○ ...

Slide 9

Slide 9 text

CSS > XPATH XPATH is EVIL! ● //a[contains(@href,'compute_resources') and normalize-space(.)='%s']/../following-sibling:: td[@class='ellipsis'] CSS: ● compute_resource_password

Slide 10

Slide 10 text

Selenium ● Selenium seems to dominate this area ● Selenium webdriver let’s you interact with elements ○ Click ○ Select ○ Type ○ Mouse interaction (hover, move, etc) ○ ...

Slide 11

Slide 11 text

Selenium IDE

Slide 12

Slide 12 text

Overview ● Firefox plugin ONLY ● Can be tricky to install ● Requires Firefox == 45 or older :/ ● Records all interactions with browser ● Can replay all recordings ● Allows for multiple tests to be recorded ● GREAT IDE with tons of useful features ● Exports test cases into Python code (and other formats) ● Requires creativity to ensure that playing back activities will wait for web elements to be present

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

DEMO: Selenium IDE https://youtu.be/e1jrrg39V_k

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Scirocco Recorder

Slide 17

Slide 17 text

Overview ● Easier to install ● Works with latest Chrome browser ● Records all interactions with browser ● Can replay all recordings ● Not as full fledged IDE as Selenium IDE ● Limited range of commands ● Limited options for exporting test cases (Python is NOT supported)

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

DEMO: Scirocco https://youtu.be/zEL6-pt9hoM

Slide 21

Slide 21 text

Python + Selenium

Slide 22

Slide 22 text

Overview Install the selenium python module mkvirtualenv -p $(which python3) -i selenium selenium-talk pip install bpython Install Web Driver ○ Chrome: https://sites.google.com/a/chromium.org/chromedriver/downloads ○ Edge: https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/ ○ Firefox: https://github.com/mozilla/geckodriver/releases ○ Safari: https://webkit.org/blog/6900/webdriver-support-in-safari-10/ For this presentation I chose to use the web driver for the chrome web browser. * include the ChromeDriver location in your PATH environment variable

Slide 23

Slide 23 text

DEMO https://youtu.be/FQwwiVh5Cok

Slide 24

Slide 24 text

Python + Selenium + Unittest

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

DEMO pytest -v tests/test_SeleniumUnittest.py

Slide 27

Slide 27 text

Python + Selenium + PyTest

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

DEMO pytest -v tests/test_SeleniumPytest.py

Slide 30

Slide 30 text

BONUS Python + Selenium + PyTest + SauceLabs

Slide 31

Slide 31 text

DEMO pytest -v tests/test_SeleniumSauce.py https://youtu.be/dxr8lxTv90A

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

EXTRA BONUS Python + Selenium + PyTest + SauceLabs + Travis

Slide 34

Slide 34 text

Enable repository on Travis CI

Slide 35

Slide 35 text

Add .travis.yml file to your repository

Slide 36

Slide 36 text

Trigger your build https://travis-ci.org/omaciel/Web-UI-Automation-with-Selenium-for-Beginners

Slide 37

Slide 37 text

Links ● Git Repository: https://github.com/omaciel/Web-UI-Automation-with-Selenium-for-Beginners ● Older Firefox downloads: https://ftp.mozilla.org/pub/firefox/releases/ ● Selenium IDE: https://addons.mozilla.org/en-US/firefox/addon/selenium-ide/ ● Scirocco: https://chrome.google.com/webstore/detail/scirocco-recorder-for-chr/ibclajljffeaafooicpmkcjdnkbao iih ● Selenium: http://docs.seleniumhq.org/ ● Python Selenium: http://selenium-python.readthedocs.io/ ● Pytest: http://pytest.org/ ● SauceLabs: ● Travis: https://travis-ci.org/ ● Videos: ○ Selenium IDE: https://youtu.be/e1jrrg39V_k ○ Scirocco: https://youtu.be/zEL6-pt9hoM ○ Interactive Python + Selenium: https://youtu.be/FQwwiVh5Cok ○ Using SauceLabs: https://youtu.be/dxr8lxTv90A

Slide 38

Slide 38 text

Thanks!!! https://speakerdeck.com/omaciel/web-ui-automation-with-selenium-for-beginners