Test Setup and Teardown

2:27 with Jay McGavren

Mocha lets us define a before callback that's called before each test, and an after callback that's called after each test. We can move duplicated test code to those two callbacks.

Teacher's Notes
Video Transcript
Downloads

We're going to want to add more tests for this app. Here, we've added a second test to ensure the registration form is available under the correct ID.

const {Browser, By, Key, until} = require("selenium-webdriver");
const {suite} = require("selenium-webdriver/testing");
const assert = require('assert');

const url = "https://treehouse-projects.github.io/selenium-webdriver-intermediate/waits/app/index.html";

suite(function(env) {
    describe('RSVP site', function() {
        it('has invitee list', async function() {
            let driver = await env.builder().build();
            await driver.get(url);
            let elements = await driver.findElements(By.id('invitedList'));
            assert(elements.length > 0);
            driver.quit();
        });

        it('has registration form', async function() {
            let driver = await env.builder().build();
            await driver.get(url);
            let elements = await driver.findElements(By.id('registrar'));
            assert(elements.length > 0);
            driver.quit();
        });
    });
});

But the code to build the browser driver, load the page, and quit the browser again when the tests are done is repeated between the two tests.
Mocha lets us define a before callback that's called before each test, and an after callback that's called after each test. We can move the duplicated code to those two callbacks.

const {Browser, By, Key, until} = require("selenium-webdriver");
const {suite} = require("selenium-webdriver/testing");
const assert = require('assert');

const url = "https://treehouse-projects.github.io/selenium-webdriver-intermediate/waits/app/index.html";

suite(function(env) {
    describe('RSVP site', async function() {
        // Move variable definition here so it remains in scope
        let driver;

        // Call before() and pass it a callback function that will be called before each test.
        // We make our callback function asynchronous so we can use await within it.
        before(async function() {
            // Move driver building here so it happens before each test
            driver = await env.builder().build();
            // Need to get the page before each test too
            await driver.get(url);
        });

        // This test (and any others defined within the describe() callback) will be run after the
        // before() callback, and before the after() callback.
        it('has invitee list', async function() {
            // These lines are specific to this test, so we leave them here.
            let elements = await driver.findElements(By.id('invitedList'));
            assert(elements.length > 0);
        });

        // The setup code in the before() callback and the teardown code in the after()
        // callback are run before each test, so we can remove the duplicated code from
        // this test too.
        it('has registration form', async function() {
            // We leave only the code that's specific to this particular test.
            let elements = await driver.findElements(By.id('registrar'));
            assert(elements.length > 0);
        });

        // Call after() and pass it another callback function that will be called after each test.
        after(async function() {
            // Move code to close browser here, because it needs to be run after each test.
            driver.quit();
        });
    });
});

0:00
We're going to want to add additional tests to describe
0:02
more aspects of this site.
0:04
For example, there's a registrar form here that we're going to want to make sure is
0:08
present as well.
0:09
I've added a second test here within the description for
0:12
the RSVP site to ensure that it has that registration form.
0:17
It looks for elements with an id of registrar, and ensures that they exist.
0:22
It'll just let us check that the form is still there in future versions of the app.
0:27
But the code to build the browser driver, load the page, and
0:31
quit the driver again afterwards is repeated between the two tests.
0:36
Mocha lets us define a before callback that's called before each test,
0:40
and an after callback that's called after each test.
0:43
We can move the duplicated code to those two callbacks.
0:47
So the first thing I'm going to do,
0:49
since both test functions are going to need the driver variable, is I'm going to
0:53
move its definition up here to the interior of the describe function.
0:59
That way it'll remain in scope for both of our tests.
1:05
Now we can take the portion where we build our driver, and
1:08
move it to the before function.
1:11
That way, a driver object will be built before each test.
1:16
We can also move the code to get the page to the before function as well.
1:25
This test and any others defined within the describe callback will be run after
1:30
the before callback, and before the after callback.
1:35
So first, it'll create the driver and get the page, then it'll run this code.
1:40
Each test also requires us to call quit on the driver object, but
1:44
we don't want that to happen until after the test run.
1:47
So we can call the after function, and pass that another synchronous callback.
2:02
And paste that driver.quit() code there.
2:05
With that set up,
2:06
we should be able to remove the duplicated code from the second test as well.
2:12
Let's save that and go back to our terminal and try running Mocha again.
2:16
And before each test, it'll set up a driver object and load the page.
2:20
And it'll quit out of the driver object after each test.
2:23
We've gotten the same result with much less repeated code.

You need to sign up for Treehouse in order to download course files.

Intermediate Selenium WebDriver

Test Setup and Teardown

Sign in