06 - UI testing.md

Practical 6 - UI Testing

Objectives

• Install WebDriver and ChromeDriver, and get access to them in test code
• Spin up a web browser pointing to the system
• Use locators to assert on expected page text
• Use locators to navigate to a new page

Extensions

• Use locators to fill form values
• Use locators to submit a form
• Write test cases for happy-path functionality

Set-up Steps

Same pattern as previous pracs

1. Commit any outstanding changes on your Prac02 branch: git commit -am 'Some message'
2. Head back over to master: git checkout master
3. Check out the Start Point for Prac 3: git checkout Prac06-StartPoint
4. Create a branch to make your changes on without impacting the main repo: git checkout -b Prac06

---

Practical Steps

1. Add selenium-webdriver and chromedriver as dev dependencies
2. Create a new automated-ui folder
3. Create new package.json and launch.json entry points for our UI tests
4. Create a new test file for our UI tests
5. Add a reference to our app to ensure it gets spun up
6. Get access to chromedriver and selenium-webdriver in your test file
7. Get a reference to webdriver's By and until utilities
8. Ensure your tests start a Chrome instance and navigate to the app homepage before they run
9. Add a new test that asserts the homepage has today's date on it
10. Add another test that navigates to the Random page and requests a random pet match, and asserts that the correct text is displayed

Solutions

Here's a step-by-step walkthrough of the practical steps, for if you get stuck :)

1. Add selenium-webdriver and chromedriver as dev dependencies
   • npm install selenium-webdriver --save-dev
   • npm install chromedriver --save-dev
2. Create a new automated-ui folder
   • New folder test/automated-ui
3. Create new package.json and launch.json entry points for our UI tests
   • Follow equivalent steps from the Integration Testing prac for details
4. Create a new test file for our UI tests
   • New file test/automated-ui/browser-tests.js
5. Add a reference to our app to ensure it gets spun up
   • var app = require('../../app');
6. Get access to chromedriver and selenium-webdriver in your test file
   • var chromedriver = require('chromedriver');
   • var webdriver = require('selenium-webdriver');
7. Get a reference to webdriver's By and until utilities
   • var by = webdriver.By;
   • var until = webdriver.until;
8. Ensure your tests start a Chrome instance and navigate to the app homepage before they run

   var driver;
   before("Start Chrome and navigate to homepage", function() {
       driver = new webdriver.Builder()
           .forBrowser('chrome')
           .build();
   
       return driver.get("http://localhost:4000/");
   });

9. Add a new test that asserts the homepage has today's date on it

   describe("Spinning up our app", function() {
       it("should be greeted with today's date", function() {
           return driver.findElement(by.id("todaysDate"))
               .then((element) => element.getText())
               .then((dateText) => dateText.should.equal(new Date().toDateString()));
       });
   });

10. Add another test that navigates to the Random page and requests a random pet match

    describe("Randomiser", function() {
        describe("when randomly matching a pet", function() {
            beforeEach(function() {
                return driver.findElement(by.name("random"))
                    .then(m => m.click())
                    .then(() => driver.findElement(by.tagName("button")))
                    .then(button => button.click())
                    .then(() => driver.findElement(by.name("petInfo")))
                    .then(petInfo => driver.wait(until.elementIsVisible(petInfo)))
            });
    
            it("should find a match", function() {
                return driver.findElement(by.name("matchResult"))
                    .then(mr => driver.wait(until.elementIsVisible(mr)))
                    .then(mr => mr.getText())
                    .then(mrText => mrText.should.contain("Your perfect pet is a"));
            });
        });
    });

Extenion Steps

1. Write tests for the MatchMaker functionality
2. Write tests for the History functionality