Automated UI Testing with Selenium - WPCampus 2017

An introduction to user interface testing with Selenium WebDriver. Delivered at WPCampus 2017 in Buffalo New York on July 15, 2017.

Transcript

1. Blog - shawnhooper.ca
 Twitter - @shawnhooper Automated UI Testing Using Selenium
 WPCampus 2017, Buffalo NY
 
 Shawn Hooper Director of IT, Actionable.co
2. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 Shawn Hooper
 
 Director of IT at Actionable.co
 
 Remote Worker
 
 WordPress Developer Since 2011
 
 Co-Organizer of WordCamp Ottawa, Ontario
 
 2nd WPCampus
 about( $me );
3. Blog - shawnhooper.ca
 Twitter - @shawnhooper Today we’re going to talk about….
4. Blog - shawnhooper.ca
 Twitter - @shawnhooper Unit Testing
5. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 Testing individual units of source code
 
 Run a function with with X arguments,
 we expect Y return value, or the test fails. Unit Testing
6. Blog - shawnhooper.ca
 Twitter - @shawnhooper A unit test would assert that calling:
 
 $y = plus_one( 10 );
 
 equals 11, or the test fails. Unit Testing
7. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 
 
 Testing how our web application works in the browser window. UI Testing
8. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 
 Integration Testing / Functional Testing
 
 Responsive Testing
 
 Cross-Browser Testing Dynamic Page Testing UI Testing
9. Blog - shawnhooper.ca
 Twitter - @shawnhooper Selenium
10. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 
 Selenium automates browsers. Perfect for testing. Selenium
11. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 
 Requires a Server and a Client Library Selenium
12. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 Mac (with Homebrew):
 
 brew install selenium-server-standalone
 
 Install Browser Drivers: brew install chromedriver
 brew install geckodriver Installing Selenium Server
13. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 
 brew services start chromedriver;
 brew services start geckdriver;
 selenium-server; Starting Selenium Server
14. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 http://localhost:4444/wd/hub 
 You can see what sessions are running.
 This is also the URL referenced in your tests. Starting Selenium Server
15. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 When you run your tests, you’ll see a browser window open, and run through the actions you’ve defined in your test. Starting Selenium Server
16. Blog - shawnhooper.ca
 Twitter - @shawnhooper Let’s Offload the Server Component
17. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 
 There are many web services that will run the server-side of the Selenium tests for you. We use Sauce Labs. Offloading the Server
18. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 Includes Support for Multiple Platforms, Browsers & Versions 
 
 Manual and Automated Testing Logs of all tests Captures Screenshots Includes a REST API Offloading the Server
19. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 Change the URL you use for WebDriver: Offloading the Server
20. Blog - shawnhooper.ca
 Twitter - @shawnhooper
21. Blog - shawnhooper.ca
 Twitter - @shawnhooper WebDriver is the API that speaks to Selenium Server. WebDriver
22. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 There are officially supported WebDrivers from Selenium for:
 
 Java
 C#
 Ruby
 Python
 JavaScript (Node) WebDriver
23. Blog - shawnhooper.ca
 Twitter - @shawnhooper But what about PHP ? WebDriver
24. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 There are lots of unofficial WebDriver libraries as well, including for PHP.
 The one we’ll use in this demo is php-webdriver
 a library developed by Facebook. WebDriver
25. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 
 We can install php-webdriver into our project with composer:
 
 composer require facebook/webdriver WebDriver
26. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 
 The official tests for WordPress are all written in PHPUnit, so let’s take advantage of it for our Selenium testing! composer require phpunit/phpunit PHPUnit
27. Blog - shawnhooper.ca
 Twitter - @shawnhooper Getting Started…
28. Blog - shawnhooper.ca
 Twitter - @shawnhooper HomePageTest.php
29. Blog - shawnhooper.ca
 Twitter - @shawnhooper Run it…
30. Blog - shawnhooper.ca
 Twitter - @shawnhooper If it failed…
31. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 get() — Retrieves a web page by URL getTitle() - Return the <title> of the page
 
 quit() - Close the Web Browser
 
 findElement() - Find 1st element matching query findElements() - Find all elements matching query
 
 WebDriver
32. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 switchTo() - Switch window or frame navigate() - move through the browser history
 
 manage() - manage cookies & logs
 
 getPageSource() - “View Source” getCurrentURL() - Get the Current URL WebDriver
33. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 getMouse() - Execute Mouse Actions getKeyboard() - Execute Keyboard Actions getTouch() - Execute Touch Screen Actions executeScript() - Execute Synchronous JS executeAsyncScript() - Execute Asynchronous JS WebDriver
34. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 Queries the current page to retrieve one or more elements. Returns a WebDriverElement object or an array of WebDriverElement objects. FindElement(s)
35. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 Includes several query mechanisms 
 (WebDriverBy Class):
 
 cssSelector
 className
 id
 linkText
 partialLinkText
 name
 tagName
 xPath FindElement(s)
36. Blog - shawnhooper.ca
 Twitter - @shawnhooper FindElement(s)
37. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 sendKeys() - Enter a value into an input or textarea
 click() - Click on the element
 clear() - Clear an input or textarea
 getID() - Get the ID of the element
 getAttribute() - Returns any attribute of the element
 getTagName() - Returns the HTML tag name 
 getCSSValue() - Returns the value of a CSS property
 getLocation() - Returns x y coordinate
 getSize() - Get the Size (Height & Width) of the Element
 isDisplayed() - Is this element visible
 isEnabled() - Is this element enabled WebDriverElement
38. Blog - shawnhooper.ca
 Twitter - @shawnhooper wp-login.php source:
39. Blog - shawnhooper.ca
 Twitter - @shawnhooper WebDriverElement
40. Blog - shawnhooper.ca
 Twitter - @shawnhooper You can also run a FindElement() or FindElements() query on the RemoteWebElement object to find child element(s). WebDriverElement
41. Blog - shawnhooper.ca
 Twitter - @shawnhooper Back to Our Test…
42. Blog - shawnhooper.ca
 Twitter - @shawnhooper Let’s Abstract a WordPress Page into a class that we can use for our tests. Abstract Page Class
43. Blog - shawnhooper.ca
 Twitter - @shawnhooper
44. Blog - shawnhooper.ca
 Twitter - @shawnhooper
45. Blog - shawnhooper.ca
 Twitter - @shawnhooper
46. Blog - shawnhooper.ca
 Twitter - @shawnhooper Login to WP Admin…
47. Blog - shawnhooper.ca
 Twitter - @shawnhooper Let’s see this Abstract class as I’m using it on a real project. Revenue Calculator Example
48. Blog - shawnhooper.ca
 Twitter - @shawnhooper
49. Blog - shawnhooper.ca
 Twitter - @shawnhooper
50. Blog - shawnhooper.ca
 Twitter - @shawnhooper
51. Blog - shawnhooper.ca
 Twitter - @shawnhooper
52. Blog - shawnhooper.ca
 Twitter - @shawnhooper
53. Blog - shawnhooper.ca
 Twitter - @shawnhooper Alert Dialogs Wait() & WebDriverExpectedCondition
54. Blog - shawnhooper.ca
 Twitter - @shawnhooper Integrate into Build Servers
55. Blog - shawnhooper.ca
 Twitter - @shawnhooper 
 
 Run Selenium Tests as part of your build processes, so that you don’t deploy sites that fail any of your functional UI tests. Integrate into Build Servers
56. Blog - shawnhooper.ca
 Twitter - @shawnhooper Slides for this presentation will be available on shawnhooper.ca
 
 WPCampus Speaker Survey:
 https://2017.wpcampus.org/session-survey/436
 
 Tweet Me @shawnhooper
 WordPress Slack: shooper Thank You!