"Local WordPress Development" was retired on November 30, 2017. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Intermediate Selenium WebDriver!
You have completed Intermediate Selenium WebDriver!
Let's follow best practices and move the code that interacts with our page to a page object class.
In this video, we'll be using this version of the RSVP site.
- It's best practice to use "page objects" with WebDriver. See this video if you're not familiar with them.
- Make
pages
directory.- Make
pages/rsvp.js
file.
- Make
const {Browser, By, Key, until} = require("selenium-webdriver");
const url = "https://treehouse-projects.github.io/selenium-webdriver-intermediate/waits/app/index.html";
// Define a class to represent the page.
// Instances of this class will be responsible for controlling WebDriver to do operations on the page.
class RsvpPage {
// The class constructor sets up new instances of the class.
// We're going to have the test pass in a browser driver object when creating a page object.
// The page object will call methods on the driver object to control the page.
constructor(driver) {
// We'll set the "driver" property of the new object to equal the driver that's passed in.
this.driver = driver;
// The locators property will be an object containing locators for the different page
// elements we need to find.
this.locators = {
// Our first test uses this locator to find the list that we'll populate with invitees.
// We'll move the locator from the test to here.
invitedList: By.id('invitedList'),
// Our second tests uses this locator to find the form to register invitees.
// We'll move that here, too.
registrationForm: By.id('registrar'),
}
}
// This method will load the page. It will use whatever driver object we pass into the constructor.
open() {
this.driver.get(url);
}
}
// We need to set the values that will be returned when this module is required from another module.
// We'll set it up to return the RsvpPage class.
module.exports = RsvpPage;
- Then we need to update our test to load our new module and use the class.
const {Browser, By, Key, until} = require("selenium-webdriver");
const {suite} = require("selenium-webdriver/testing");
const assert = require('assert');
// Load the RsvpPage class.
const RsvpPage = require('../pages/rsvp.js')
suite(function(env) {
describe('RSVP site', async function() {
let driver;
// Define a variable to hold the page object here so that it stays in scope
// for all our tests as well.
let page;
before(async function() {
driver = await env.builder().build();
// Create a new page object that will use our driver object.
// Store it in the page variable.
page = new RsvpPage(driver);
// Instead of calling driver.get() ourselves, we'll let the page object
// load the page for us.
await page.open();
});
it('has invitee list', async function() {
// Use the locator from the page object instead.
let elements = await driver.findElements(page.locators.invitedList);
assert(elements.length > 0);
});
it('has registration form', async function() {
// Use the locator from the page object instead.
let elements = await driver.findElements(page.locators.registrationForm);
assert(elements.length > 0);
});
after(async function() {
driver.quit();
});
});
});
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