_javascript
TL;DR - Show Me The Code
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");
});
});
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.
{
"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"
}
Finally, we can run the test by executing npm test
from the command-line.