Scrolling

// At the top, we load functions from the usual set of modules.
const {Browser, By, Key, until} = require("selenium-webdriver");
const {suite} = require("selenium-webdriver/testing");
const assert = require('assert');
// We load a ScrollPage class from the scroll.js module in the "pages"
// directory, which we'll show you in a moment.
const ScrollPage = require('../pages/scroll.js');

// We set up a test suite with driver and page objects, just as in
// previous videos.
suite(function(env) {
    describe('Infinite scroll demo', function() {
        let driver;
        let page;

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

        // We need to add a test to check whether more boxes get
        // added when we scroll.
        it('adds more boxes', async function() {
            // First we need to get the boxes that are already on the
            // page. We call findElements() with a locator that we'll
            // set up in the page object class, that finds all elements
            // with a CSS class of "box1". findElements returns a
            // promise, so of course we need to use the "await" keyword.
            let boxes = await driver.findElements(page.locators.boxes);
            // The result is an array of all the box elements. We get
            // the length of that array, and store it in a variable.
            // After we load more boxes, we'll get the new count and
            // compare it to this one.
            let oldBoxCount = boxes.length;
            // Let's just log the current count to the terminal so we
            // can see it. You'll want to remove any logging from the
            // final version of your test.
            console.log(oldBoxCount);
            // Remember, we're relying on the page object to actually
            // interact with the page. So we'll call a method on the
            // page object to load more content by scrolling.
            await page.loadContent();
            // After the call to loadContent() completes, there should
            // be more boxes on the page. So we make a call to 
            // findElements() that's identical to the previous one, and
            // store the new array of elements.
            boxes = await driver.findElements(page.locators.boxes);
            // Then we get the size of the array again.
            let newBoxCount = boxes.length;
            // And let's log this new count so we can see it.
            console.log(newBoxCount);
            // We end the test by asserting that there are more boxes
            // on the page now that we've loaded new content.
            assert(newBoxCount > oldBoxCount);
        });

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

// We load the same set of objects from the "selenium-webdriver"
// module that we did for our previous page objects.
const {Browser, By, Key, until} = require("selenium-webdriver");

// We've pasted the page URL here, for our open() function to use.
const url = 'http://scrollmagic.io/examples/advanced/infinite_scrolling.html';

// Our class definition, constructor, and open() methods look
// the same as they did for previous page objects.
class ScrollPage {
    constructor(driver) {
        this.driver = driver;
        this.locators = {
            // We need to define the locators that our test will
            // use. The "boxes" locator finds all elements with
            // a CSS class of "box1".
            boxes: By.css('.box1'),
            // And the "loader" locator finds the element with
            // an ID of "loader", so we can scroll to it.
            loader: By.id('loader'),
        }
    }

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

    // Now we need to define the method that our test calls
    // to scroll to the loader element at the bottom of the
    // page.
    async loadContent() {
        // We start by calling findElement() on our driver object
        // to find the loader locator we defined above.
        var loader = await this.driver.findElement(this.locators.loader);
        // To scroll the page, we need to execute some
        // JavaScript on the page. We do this by calling
        // the executeScript() method on the driver. We pass
        // the JavaScript we want to run as the first
        // argument. Additional arguments to executeScript()
        // get passed as arguments to that JavaScript code.
        // So we pass it our loader element, and then have
        // the JavaScript code scroll that element into view.
        await this.driver.executeScript("arguments[0].scrollIntoView();", loader);
        // There's one more problem; the boxes don't get added
        // immediately after we scroll to the loader element.
        // If we checked for more boxes right away, they
        // wouldn't be present, and the test would fail. Luckily,
        // this demo is set up to add the "active" CSS class to the
        // loader element while it's adding new content, and remove
        // that class when it's done. So we can just add an explicit
        // wait here that waits until the loader element no longer
        // has the "active" class.
        await this.driver.wait(until.elementLocated(By.css('#loader:not(.active)')));
    }
}

module.exports = ScrollPage;