_javascript

TL;DR - Show Me The Code

5-select-from-a-dropdown/code/javascript/test/dropdown.spec

const assert = require("assert");
const {Builder, By} = require("selenium-webdriver");

describe("Dropdown", function () {
    let driver;

    beforeEach(async function () {
        driver = await new Builder().forBrowser("chrome").build();
    });

    afterEach(async function () {
        await driver.quit();
    });

    it("select the hard way", async function () {
        await driver.get("https://the-internet.herokuapp.com/dropdown");
        const options = await driver.findElements(By.css("#dropdown option"));
        let selection;
        for (const option in options) {
            if ((await options[option].getText()) === "Option 1") {
                await options[option].click();
                break;
            }
        }
        for (const option in options) {
            if (await options[option].isSelected()) {
                selection = await options[option].getText();
                break;
            }
        }
        assert(selection === "Option 1");
    });

    it("select the simpler way", async function () {
        await driver.get("https://the-internet.herokuapp.com/dropdown");
        await driver
            .findElement(
                By.xpath("//*[@id='dropdown']/option[contains(text(),'Option 1')]")
            )
            .click();
        const selection = await driver
            .findElement(By.css('#dropdown option[selected="selected"]'))
            .getText();
        assert(selection === "Option 1");
    });
});

Check out the complete solution

Code Walkthrough

Importing Libraries, Setup and Teardown

The first two lines are pulling in our testing framework (e.g., require("assert")), driving the browser with Selenium (e.g., const {Builder, By} = require("selenium-webdriver");). Then we wire up some test setup and teardown methods.

Example 1

Our first example is select the hard way, after visiting the example application we find the dropdown list by its ID and store it in a variable. We then find each clickable element in the dropdown list (e.g., each option) with findElements.

Grabbing all options returns a collection that we iterate over and when the text matches what we want it will click on it.

We finish the test by performing a check to see that our selection was made correctly. This is done by looping over the dropdown options collection one more time. This time we're getting the text of the item that was selected, storing it in a variable, and then making an assertion against it.

While this works, there is a more accessible way to do this.

Example 2

Our second example is select the simpler way, and similar to the first example, we are selecting a dropdown list option by its text. Instead of first finding the dropdown list, we will employ a more robust locator (e.g., XPath) to find an element within the dropdown list that contains our target text -- and click it.

We then determine what has been selected in the dropdown list by using one more powerful locator (e.g., a CSS selector). This time, looking to see which option has the selected attribute, and grabbing its text. We use this found text to assert that the correct item was chosen.

Executing the Test

Before executing the test, we need to make sure the required dependencies are declared on the package.json file.

Toggle to see the package.json file.

5-select-from-a-dropdown/code/javascript/package.json

{
  "dependencies": {
    "selenium-webdriver": "4.24.0"
  },
  "description": "A project to showcase working with multiple windows using official WebdriverJs",
  "devDependencies": {
    "mocha": "10.7.3"
  },
  "license": "MIT",
  "name": "select-from-a-dropdown",
  "scripts": {
    "test": "npx mocha test/**/*.spec.js --timeout 60000"
  },
  "version": "1.0.0"
}

Check out the complete solution

Finally, we can run the test by executing npm test from the command-line.