Automated Tests

with Selenium

...from a developers perspective

About Me:

Matt Thomas - Full Stack Developer

~2 years experience writing automated tests with Selenium

Problem:

Testing the functionality of the web app to verify it does what it was meant to do.

We would like to test the application as the User would interact with it.

We will not be covering other kinds of tests. I.E.: Unit Testing

The Solution:

Selenium - Browser Automation Server

Often referred to as "Selenium Web Driver"
or "Standalone Selenium Server"

APIs for many languages
(PHP, Java, JavaScript (including Node.js), Ruby, Python C#)

Integrates with all modern browsers

Grid can be used to run many tests on numerous "servers" in parallel using different configurations

Getting it up & running...

It's Java.... easy right?!?!?

Documentation can be found on the Selenium website

  • Install Java JRE
  • Download Selenium
  • Download Web Drivers (Chrome & Firefox or IE???)
  • Start Selenium server

Install Java

Oracle JRE 1.8 or greater or Open JRE 1.8 or greater

Download Selenium

http://www.seleniumhq.org/download/

The server is a Java Jar file, so it is cross platform by nature.

Move to an easily accessible location i.e.: ~/bin

Download Web Drivers

(Chrome & Firefox or IE???)

Most Web Drivers are third party and are developed by the browser manufacturers.

They can be accessed via the Selenium Download page

Download to the same location as the Selenium server Jar file.

Getting Internet Explorer to work with Selenium

...can make you want to...

Requires Admin permissions to the computer to allow:
Registry key creation/edit using regedit
Set Internet Explorer security settings
Disable Enhanced Protected Mode

Also:
Must use Native Events
Have browser focus
Set zoom level set to 100%
IE WebDriver Documentation

Start Selenium server

java -Dwebdriver.chrome.driver=./chromedriver -jar selenium-server-standalone-3.4.0.jar

Using the Selenium Web Driver API

Various frameworks have abstracted the use in many languages

API support varies for each testing framework.

Locating elements

The API supports locating elements in various ways including:

  • By ID
  • By Class Name
  • By Tag Name
  • By Name
  • By Link Text
  • By Partial Link Text
  • By CSS
  • By XPath
  • By Javascript

Interacting with elements

The API supports interacting with the browser in the following ways:

  • Retrieving text values
  • Filling in Forms inputs
  • Clicking Links and Buttons
  • Moving between Windows, Tabs, Frames
  • Handling Popup Dialogs (in browser)
  • Navigation, including History and Location (URL)
  • Cookies
  • User Agent (Firefox only?)
  • Drag and Drop
  • Via Javascript

Selenium & PHP

using Codeception PHP testing framework

Implements Acceptance, Functional & Unit tests

Integrates with Laravel, Zend (1 & 2), Symfony, Yii (1 & 2)

Built on top of PHPUnit

Codeception Example

                        
                            public function register(AcceptanceTester $I)
                            {
                                $I->wantTo('Register a new user ' . $this->email);
                                $I->amOnPage('/');
                                $I->see("Your Application's Landing Page.");

                                $I->click('Register');

                                $I->fillField('name', $this->name);
                                $I->fillField('email', $this->email);
                                $I->fillField('password', $this->password);
                                $I->fillField('password_confirmation', $this->password);

                                $I->click('button[type=submit]');
                                $I->see($this->name, 'a.dropdown-toggle');
                            }
                        
                    

Selenium & Python

using Python API

Python Example

                        
                            from selenium import webdriver

                            driver = webdriver.Chrome()

                            driver.get('http://localhost:8000')

                            driver.find_element_by_link_text('Login').click()
                            driver.find_element_by_name('email').send_keys("matsinet@gmail.com")
                            driver.find_element_by_name('password').send_keys("password")
                            driver.find_element_by_class_name('btn-primary').click()

                            driver.find_element_by_id('task-name').send_keys('Mocha task for STL Full Stack Meetup')
                            driver.find_element_by_class_name('btn-default').click()

                            driver.find_element_by_class_name('btn-danger').click()

                            driver.find_element_by_link_text('Matt Thomas').click()
                            driver.find_element_by_link_text('Logout').click()

                            driver.close()
                        
                    

Selenium & JavaScript

using Mocha testing framework

Implements Acceptance, Functional & Unit tests

Integrates with Node.js, React, Angular

Mocha Example

                        
                            test = require('selenium-webdriver/testing'),
                            webdriver = require('selenium-webdriver');

                            test.describe('Create a task', function () {
                                test.it('should work', function () {
                                    this.timeout(15000);
                                    var driver = new webdriver.Builder().
                                        withCapabilities(webdriver.Capabilities.chrome()).
                                        build();
                                    driver.get('http://localhost:8000');
                                    driver.findElement(webdriver.By.linkText("Login")).click();

                                    driver.findElement(webdriver.By.name('email')).sendKeys('matsinet@gmail.com');
                                    driver.findElement(webdriver.By.name('password')).sendKeys('password');
                                    driver.findElement(webdriver.By.className("btn btn-primary")).click();

                                    driver.findElement(webdriver.By.id('task-name')).sendKeys('Mocha task for STL Full Stack Meetup');
                                    driver.findElement(webdriver.By.className("btn btn-default")).click();

                                    driver.findElement(webdriver.By.className("btn btn-danger")).click();

                                    driver.findElement(webdriver.By.linkText("Matt Thomas")).click();
                                    driver.findElement(webdriver.By.linkText("Logout")).click();

                                    driver.quit();
                                });
                            });
                        
                    

Selenium-IDE

No Code Required!!! but does requires Firefox

Some knowledge of HTML/CSS and possibly XPath is helpful

Even though Selenium IDE has a "Save"feature that allows users to keep the tests in a table-based format for later import and execution, it is not designed to run your test passes nor is it designed to build all the automated tests you will need.
Selenium IDE is simply intended as a rapid prototyping tool.

Can also be played back using Selenium HTML Runner

Remember...

It's not hard... unless you have to use IE :P

Install it and write your first test!

One step at a time, write small chucks and test, rinse and repeat

While writing your test, do the process manually, inspecting the DOM

If required, XPath is your best friend or your worth enemy.

All projects can use a limited set of acceptance tests, ok, maybe not APIs

Define a process for when and how your Acceptance tests should be run

Feedback...

Slides: /presentations/automated-tests-with-selenium

Print the presentation
Created with Reveal.js