Selection from Drop-Downs

// This test follows the same routine as the others. We load all the usual
// modules, including our page object class, build a driver and page object,
// and load the page.
const {Browser, By, Key, until} = require("selenium-webdriver");
const {suite} = require("selenium-webdriver/testing");
const assert = require('assert');
const ExamplePage = require('../pages/example.js');

suite(function(env) {
    describe('Dropdown', function() {
        let driver;
        let page;

        before(async function() {
            driver = await env.builder().build();
            page = new ExamplePage(driver);
            await page.open();
        });

        // Here's our test to ensure the status text gets updated when we
        // select an item from the dropdown.
        it('Updates status text', async function() {
            // If we right-click the drop-down and choose Inspect, we'll
            // see its HTML code. It contains several option elements,
            // each of which has the plain text shown to users, and a
            // "value" attribute that holds the actual data that gets
            // submitted with the form.
            // We'll set up a clickOption method on our page object that
            // clicks the option with the value we specify. For now we'll
            // just add a call to that method here, and pass the value
            // "option3" as the one it should click on.
            await page.clickOption('option3');
            // We'll add another method to the page object called submit(),
            // which will submit the form. Again, we just put a placeholder
            // call to that method here for now.
            await page.submit();
            // Once the form is submitted, the text of the form results
            // section should be updated with the drop-down value. We'll
            // use the driver's findElement() method to find that form
            // results element.
            let results = await driver.findElement(page.locators.formResults);
            // Then we'll get its text.
            let text = await results.getText();
            // Finally, we'll assert that the text includes the value of
            // the drop-down option we selected.
            assert(text.includes("option3"));
        });

        after(async function() {
            driver.quit();
        });
    });
});

// This page object class has all the setup code we're used to seeing by now.
const {Browser, By, Key, until} = require("selenium-webdriver");

const url = 'http://crossbrowsertesting.github.io/selenium_example_page.html';

class ExamplePage {
    constructor(driver) {
        this.driver = driver;
        this.locators = {
            // This locator finds the drop-down by its ID.
            dropDown: By.id('dropdown'),
            // This locator finds the form results section.
            formResults: By.id('form-results'),
            // And this locator finds the button to submit the form.
            submit: By.id('submitbtn'),
        }
    }

    open() {
        this.driver.get(url);
    }

    // Now we need a method to select an option from the drop-down. clickOption()
    // takes a string parameter with the value attribute of the option it should
    // look for.
    async clickOption(value) {
        // First we find the drop-down element itself.
        await this.driver.findElement(this.locators.dropDown)
            // Then we call findElement() on the drop-down element to locate
            // only elements that are a child of the drop-down element.
            // We need to find the <option> element whose "value" attribute
            // matches the value we passed in to the clickOption() method.
            // When writing CSS selectors, you can look for elements with
            // certain attribute values by including the attribute names
            // and expected values in square brackets. See below
            // if you'd like to know more. The By.css locator lets
            // us find elements using a CSS selector. So we look for elements
            // whose "value" attribute matches the value passed in to this
            // clickOption() method.
            .findElement(By.css('[value=' + value + ']'))
            // Finally, if a matching option was found, we call its click()
            // method to simulate clicking on it with the mouse. That will
            // select it.
            .click();
    }

    // We also need a method that will submit the form.
    async submit(value) {
        // We use the locator we defined above to find the submit button,
        // then call its click() method to click on it.
        await this.driver.findElement(this.locators.submit).click();
    }
}

module.exports = ExamplePage;