UI Testing with Selenium in PHP

How to use User Interface testing to increase product quality and decrease support costs.

Benjamin Cool / @benjamincool

Benjamin Cool

• Application Optimizer at A2 Hosting
• M.S. in Computer Science
• Concentration in Artificial Intelligence
• Member of the awesome WebDev team at A2 Hosting
• Follow me @benjamincool for slides

Takeaways

• UI testing is important
• UI testing is valuable for your business
• Brittle testing methods are no good
• The Page Object Model is better
• Testing can be done in PHP

Business Value

Acceptance Testing

• The project meets the clients needs
• Each element of the project meets acceptance criteria
• Helps develop clear communication of needs

Reduce Time "Bug Fixing"

• Tests are run any time new code is developed
• Allows for catching potential problems early
• Code does not go live without passing tests.

Increase Overall Product Quality

• The product meets the specs defined
• Improves project workflow
• Forces higher quality coding practices
• Improves customer confidence

Value to Development Teams

• Again, less time fixing bugs
• Protects from collateral damage
• Forces better communication of customer needs
• Developers can PROVE code works
• lowers stress

Brittle testing methods

Screen Capture / Recorders

• Selenium IDE (firefox plugin)
• Ghost Inspector

How screen Capture tests work

• Open a web page
• start recording
• click around and fill out forms
• stop recording
• run the test against multiple browsers

What screen capture based tests are good for

• quick testing
• pages that will never, ever change
• proof of concepts

What screen capture based tests are NOT good for

• robust testing
• dynamic pages
• pages under development
• pages that will change over time
• surviving a redesign

Selenium WebDriver Primer

PHP WebDriver Common Functions

• WebDriver Class
• • get()
  • FindElements()
  • FindElement()
  • getTitle()

WebDriverElement Functions

• FindElements()
• FindElement()
• getAttribute()
• getCSSValue()
• getLocation()
• getSize()

WebDriverElement Functions Continued

• getTagName()
• isEnabled()
• isSelected()
• submit()
• clear()

WebDriverElement Functions Continued

• click()
• isDisplayed()
• sendKeys()
• getText()
• getID()
• getLocationOnScreenOnceScolledIntoView()

FindElement and WebDriverBy::

• id()
• className()
• cssSelector()
• xpath()
• tagName()
• name()
• linkText()

Brittle WebDriver test in PHPUnit

class UITestWPExample extends PHPUnit_Framework_TestCase {
 ...
 public function setUp(){
  $capabilities = array(\WebDriverCapabilityType::BROWSER_NAME => 'firefox');
  $this->driver = RemoteWebDriver::create('http://127.0.0.1:4444/wd/hub',$capabilities);
  $this->driver->get('http://local.wordpress.dev/wp-login.php');
 }
 ...
}

class UITestWPExample extends PHPUnit_Framework_TestCase {
 protected $driver;
 
 public function canLogInAndSeeHelloDolly() {
  $driver = $this->driver;
  $username   = $driver->findElement(WebDriverBy::id('user_login'));
  $password   = $driver->findElement(WebDriverBy::id('user_pass'));
  $rememberme = $driver->findElement(WebDriverBy::id('rememberme'));
  $submit     = $driver->findElement(WebDriverBy::id('wp-submit'));
  $username->sendText('admin');
  $password->sendText('password');
  $rememberme->click();
  $submit->click();
  $admin_url = 'http://local.wordpress.dev/wp-admin/index.php';
  $driver->wait(5,500)->until(
   function () use ($driver) {
    return $driver->getCurrentURL() == $admin_url;
   },
   '5 seconds passed page did not load. oh noes.'
  );
  $this->assertEquals($admin_url,$driver->getCurrentURL());
  $this->assertTrue($driver->findElement(WebDriverBy::id('dolly'))->isDisplayed());
 }
}

class UITestWPExample extends PHPUnit_Framework_TestCase {
 ...
 ...
 ...
 public function canLogIn() {
   $driver = $this->driver;
  $username   = $driver->findElement(WebDriverBy::id('user_login'));
  $password   = $driver->findElement(WebDriverBy::id('user_pass'));
  $rememberme = $driver->findElement(WebDriverBy::id('rememberme'));
  $submit     = $driver->findElement(WebDriverBy::id('wp-submit'));
  $username->sendText('admin');
  $password->sendText('password');
  $rememberme->click();
  $submit->click();
  $admin_url = 'http://local.wordpress.dev/wp-admin/index.php';
  $driver->wait(5,500)->until(
   function () use ($driver) {
    return $driver->getCurrentURL() == $admin_url;
   },
   '5 seconds passed page did not load. oh noes.'
  );
  $this->assertEquals($admin_url,$driver->getCurrentURL(),'not logged in');
 }
}

There has to be a better way!

• Element IDs can change.
• Log in process can change.
• Same code being used over and over again.
• Same code being used over and over again.

Non-Brittle Tests

What is Non-Brittle

Page Object Model

Why We Use the Page Object Model

Separating Finding Page Elements From the Test

Page Object Model Basics

class WPPage {
  public $driver, $site_url, $login_url, $admin_url;

  public function __construct($driver){
    $this->driver = $driver;
    $this->site_url = "http://local.wordpress.dev";
    $this->login_url = "{$this->site_url}/wp-login.php";
    $this->admin_url = "{$this->site_url}/wp-admin/";
  }
  
  public function get_admin_url(){
    return $this->admin_url;
  }
  
  public function getCurrentURL(){
    return $this->driver->getCurrentURL();
  }
  
  public function is_hello_dolly_visible(){
    return $this->driver->findElement(WebDriverBy::id('dolly'))->isDisplayed();
  }
  
  public function login(){
    try{
      $this->driver->get($this->login_url);
      $this->driver->findElement(WebDriverBy::id('user_login'))->sendKeys('admin');
      $this->driver->findElement(WebDriverBy::id('user_pass'))->sendKeys('password');
      $this->driver->findElement(WebDriverBy::id('rememberme'))->click();
      $this->driver->findElement(WebDriverBy::id('wp-submit'))->click();
        $this->driver->wait(5,500)->until(
         function ()  {
          return $this->driver->getCurrentURL() == $this->admin_url;
         },
         '5 seconds passed page did not load. oh noes.'
        );
      }
    catch (Exception $e){
      return false;
    }
    return true;
  }
}

class WPPage {
  public $driver, $site_url, $login_url, $admin_url;

  public function __construct($driver){
    $this->driver = $driver;
    $this->site_url = "http://local.wordpress.dev";
    $this->login_url = "{$this->site_url}/wp-login.php";
    $this->admin_url = "{$this->site_url}/wp-admin/";
  }
  
  ...
}

class WPPage {
  ...
  
  public function get_admin_url(){
    return $this->admin_url;
  }
  
  ...
}

class WPPage {
  ...
  
  public function is_hello_dolly_visible(){
    return $this->driver->findElement(WebDriverBy::id('dolly'))->isDisplayed();
  }
  
  ...
}

class WPPage {
  ...
  
  public function login(){
    try{
      $this->driver->get($this->login_url);
      $this->driver->findElement(WebDriverBy::id('user_login'))->sendKeys('admin');
      $this->driver->findElement(WebDriverBy::id('user_pass'))->sendKeys('password');
      $this->driver->findElement(WebDriverBy::id('rememberme'))->click();
      $this->driver->findElement(WebDriverBy::id('wp-submit'))->click();
        $this->driver->wait(5,500)->until(
         function ()  {
          return $this->driver->getCurrentURL() == $this->admin_url;
         },
         '5 seconds passed page did not load. oh noes.'
        );
      }
    catch (Exception $e){
      return false;
    }
    return true;
  }
}

    $this->driver->findElement(WebDriverBy::id('user_login'))->sendKeys('admin');
    $this->driver->findElement(WebDriverBy::id('user_pass'))->sendKeys('password');
    $this->driver->findElement(WebDriverBy::id('rememberme'))->click();
    $this->driver->findElement(WebDriverBy::id('wp-submit'))->click();

public function login_enter_user_login($keys){
	$this->driver->findElement(WebDriverBy::id('user_login'))->sendKeys($keys);
}

public function login_enter_user_pass($keys){
	$this->driver->findElement(WebDriverBy::id('user_pass'))->sendKeys($keys);
}

public function login_click_rememberme(){
	$this->driver->findElement(WebDriverBy::id('wp-submit'))->click();
}

public function login_click_submit(){
	$this->driver->findElement(WebDriverBy::id('wp-submit'))->click();
}

    $this->login_enter_user_login('admin');
    $this->login_enter_user_pass('password');
    $this->login_click_remember_me();
    $this->login_click_submit();

    $this->driver->wait(5,500)->until(
     function ()  {
      return $this->driver->getCurrentURL() == $this->admin_url;
     },
     '5 seconds passed page did not load. oh noes.'
    );

class WPAdminPage {
 protected $driver;
 public __construct($driver){
  $this->driver = $driver;
 }
 
 public function isHelloDollyVisible(){
  try{
    $dolly = $this->driver->findElement(WebDriverBy::id('dolly'));
    return $dolly->isDisplayed();
  }
  catch(NoSuchElementException $e){
    return false;
  }
 }
}

class UITestWPExample extends PHPUnit_Framework_TestCase {
 protected $driver;
 public function setUp(){
  $capabilities = array(\WebDriverCapabilityType::BROWSER_NAME => 'firefox');
  $this->driver = RemoteWebDriver::create('http://selenium_server',$capabilities);
  $this->driver->get('http://local.wordpress.dev/wp-login.php');
 }
 public function testCanLogIn() {
  $page = new WPLoginPage($this->driver);
  $page->logIn();
  $page = new WPAdminPage($this->driver);
  $this->assertEquals($page->get_admin_url(),$page->getCurrentURL());
 }
 public function testCanLogInAndSeeHelloDolly() {
  $page = new WPAdminPage($this->driver);
  $page->logIn();
  $page = new WPAdminPage($this->driver);
  $this->assertEquals($page->get_admin_url(),$page->getCurrentURL());
  $this->assertTrue($page->isHelloDollyVisible());
 }
}

class UITestWPExample extends PHPUnit_Framework_TestCase {
 ...
 public function setUp(){
  $capabilities = array(\WebDriverCapabilityType::BROWSER_NAME => 'firefox');
  $this->driver = RemoteWebDriver::create('http://selenium_server',$capabilities);
  $this->driver->get('http://local.wordpress.dev/wp-login.php');
 }
 ...
}

class UITestWPExample extends PHPUnit_Framework_TestCase {
 ...
 
 public function testCanLogIn() {
  $page = new WPLoginPage($this->driver);
  $page->logIn();
  $page = new WPAdminPage($this->driver);
  $this->assertEquals($page->get_admin_url(),$page->getCurrentURL());
 }
 
 ...
}

class UITestWPExample extends PHPUnit_Framework_TestCase {
 ...
 
 public function testCanLogInAndSeeHelloDolly() {
  $page = new WPAdminPage($this->driver);
  $page->login();
  $page = new WPAdminPage($this->driver);
  $this->assertEquals($page->get_admin_url(),$page->getCurrentURL());
  $this->assertTrue($page->isHelloDollyVisible());
 }
 
 ...
}

Testing for Accessibility

class UITestWPExample extends PHPUnit_Framework_TestCase {
 ...
 ...
 ...
 public function testButtonsHaveAriaRoles(){
  $page = new HomePage($this->driver);
  $buttons = $page->getButtons();
  foreach($buttons as $button){
    assertTrue($button->hasAttribute('aria-role'));
  }
 }
}

The Selenium Server

• Built in FireFox support
• Automates the browser
• Listens to commands from the Test
• 3rd party Drivers made by browser vendors

Selenium Server Services

• BrowserStack
• Sauce Labs
• Cross Browser Testing

Advantages of using a service

• Up to date WebDrivers
• Multiple Operating Systems
• Mobile Devices
• Parallel Tests

What is Needed

• Development Environment with PHP 5.6+
• PHPUnit
• PHP WebDriver by Facebook
• Selenium Server (Java) or Service

Installing PHPUnit and PHP Webdriver

Use composer for the easiest method

  {
    "require-dev" : {
      "phpunit/phpunit"    : "5.3.*",
      "facebook/webdriver" : "dev-master"
    }
  }

Using Selenium Standalone Server

• Download from seleniumhq.org
• java -jar selenium-server-standalone-2.53.0.jar
• http://127.0.0.1:4444/wd/hub

Running a test on your local machine

Thank You!