Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
Using Selenium WebDriver together with a testing framework lets you write tests once, and keep using them forever. Old tests can be run automatically against new versions of your app, to ensure that no new bugs are introduced.
Using Selenium WebDriver together with a testing framework lets you write tests once, and keep using them forever. Old tests can be run automatically against new versions of your app, to ensure that no new bugs are introduced.
In JavaScript, the most popular testing frameworks are Jasmine and Mocha. We'll be using Mocha for this course. If you're not familiar with Mocha already, see our JavaScript Unit Testing course.
In this video, we'll be working with this version of our RSVP app.
- Create
test
directory- Create
test/invitees.js
- Create
const {Browser, By, Key, until} = require("selenium-webdriver");
const {suite} = require("selenium-webdriver/testing");
const assert = require('assert');
suite(function(env) {
describe('RSVP site', function() {
it('has invitee list', function() {
assert(1 === 2);
});
});
});
- In your terminal, change to the project directory and run
mocha
.- Tests fail because
1 === 2
returns false, which causes our call toassert
to fail. - Notice that it runs the tests once with the Chrome browser, and then again with the Firefox browser. If you use the
suite
function fromselenium-webdriver/testing
package to wrap your tests, it will automatically run them for each browser driver you have installed.
- Tests fail because
- If we change our assertion to
assert(1 === 1);
, tests pass - Now, let's add code to get the page using Selenium WebDriver, and run a test against it.
- This version of the site has an unordered list element with an ID of
invitedList
, which we populate using an AJAX request. - Let's add a test to ensure that element is present, to alert us if we accidentally remove the element later and break our code.
- I'm going to show you how to write these tests two ways. The way I show you in this video is going to look really complicated, but it will show you what's going on behind the scenes. In the next video, I'll show you some simpler-looking code that does the same thing.
- This version of the site has an unordered list element with an ID of
// Run `node`, demo `require("selenium-webdriver")`
const {Browser, By, Key, until} = require("selenium-webdriver");
const {suite} = require("selenium-webdriver/testing");
const assert = require('assert');
// We set up this sample app on a public web server for your convenience.
// But when you're testing your own apps, you'll probably want to install it on the same
// computer where you're running your tests, so that you can connect to "localhost"
// and not have your tests slowed down by network delays.
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', function() {
// env passed in from suite() is an object that can build web driver instances
env.builder().build()
// We won't get the driver back right away. Instead, we get a PROMISE
// that we'll EVENTUALLY get a driver. We need to call then() on
// this promise, and pass it a callback function that will be called when
// the driver is available.
// This uses JavaScript's arrow function syntax. If you're not familiar
// with this notation, see below.
.then(driver => {
// Get the webpage. Since we have to send a network request
// for the page, again, this is something that won't complete right
// away.
driver.get(url)
// Again, returns a promise we need to call then() on.
// We pass then() a function that will be called once the page
// is retrieved.
.then(() => driver.findElements(By.id('invitedList')))
// findElements() returns ANOTHER promise. When the list of
// matching elements is found, we test that it's not empty.
.then(elements => assert(elements.length > 0))
// Finally, we need to tell WebDriver to exit, so it doesn't
// leave an open browser cluttering our desktop.
.then(() => driver.quit());
});
});
});
});
If you're not familiar with JS arrow funciton syntax, check out our Introducing Arrow Function Syntax course.
We can run this test by returning to the terminal, changing to the project directory, and running mocha
.
Now, I don't know about you, but I find this promise syntax utterly confusing. If we miss any parentheses or curly braces, it won't work. In the next video, I'll show you the async
and await
keywords, which will help us simplify this code a lot.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up