Locating Elements Using JavaScript

// We start out our test just like all the others, importing the WebDriver
// objects and functions we need. We also import the page object class we're
// going to set up.
const {Browser, By, Key, until} = require("selenium-webdriver");
const {suite} = require("selenium-webdriver/testing");
const assert = require('assert');
const ButtonsPage = require('../pages/buttons.js');

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

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

        // Our test is going to ensure that the status text gets updated
        // when we click the Save button.
        it('Updates status text', async function() {
            // The test itself won't be much different from the ones we defined
            // in previous videos. We call a method that we're going to define
            // on our page object to click the Save button.
            await page.clickSave();
            // Once that's done, we locate the span element that shows the
            // status.
            let span = await driver.findElement(page.locators.status);
            // We get its text.
            let text = await span.getText();
            // Then we assert that the status includes the string "Saved!"
            assert(text.includes("Saved!"));
        });

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

const {Browser, By, Key, until} = require("selenium-webdriver");

const url = 'https://treehouse-projects.github.io/selenium-webdriver-intermediate/byjs/app/';

class ButtonsPage {
    constructor(driver) {
        this.driver = driver;
        this.locators = {
            // The locator for the "status" span is pretty simple. We can locate
            // it by its ID.
            status: By.id('status'),
            // To write a locator for the Save button, we'll use the By.js
            // locator. You call the By.js() method, and pass it a callback
            // function that returns the element you want to select.
            // Within that function, we can use JavaScript code just like
            // we would in the web page itself.
            saveButton: By.js(function() {
                // Just like in ordinary JavaScript code, the "document"
                // object represents the web page. And as always, it has
                // a getElementsByTagName() method that we can use to find
                // all the <button> elements.
                var buttons = document.getElementsByTagName('button');
                // All the other features of ordinary JavaScript are available
                // to us, too. Here, we write a "for" loop to loop over the
                // array of button elements and find the button we want.
                for (index = 0; index < buttons.length; ++index) {
                    // We test whether the current button has text content
                    // of "Save". If it does, we've found our element.
                    if (buttons[index].textContent === "Save") {
                        // We return that element from the function, and
                        // that becomes the result of the By.js locator.
                        return buttons[index];
                    }
                }
            }),
        }
    }

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

    // Now we need to add a clickSave() method, which will actually click
    // the Save button.
    async clickSave() {
        // Since we already have the locator written, this part is easy.
        // We just call the driver's findElement() method, and pass it the
        // locator we defined above.
        var button = await this.driver.findElement(this.locators.saveButton);
        // Then we call the click() method on the button it returns.
        await button.click();
    }
}

module.exports = ButtonsPage;