Practical 10: List and Combo Box Verification

Get access to whole semester resourcesSemester Pass

Chapter Thirteen

Syllabus topic Module 1, "List and Combo Box Item Verification", "Tool: Selenium WebDriver", "Automate the process of identifying a list or dropdown box on a web page and determine the total number of items. Validate default selected value and perform selection testing."

Pages 86 to 89 of 162

Aim

To identify a dropdown and a list box on a web page, to determine how many items each holds, to validate the default selected value, and to test every selection.

What you need to know before you start

A combo box or dropdown shows one choice and opens to show the rest. A list box shows several items at once and may allow more than one to be chosen. In HTML both are the same element, <select>, holding <option> elements; the list box simply has a size attribute, and a multiple attribute when more than one may be chosen.

Selenium's Select class wraps a select element and gives it the methods a test needs:

getOptions(): every option, as a list
getFirstSelectedOption(): the selected option (the first, in a multiple list)
getAllSelectedOptions(): every selected option
isMultiple(): whether more than one may be chosen
selectByVisibleText(text): choose by the text the user sees
selectByValue(value): choose by the option's value attribute
selectByIndex(i): choose by position, counting from 0
deselectByVisibleText(text) and deselectAll(): unchoose, in a multiple list only

The default selected value is what the box shows before the user touches it. HTML decides it: the option carrying the selected attribute, or the first option if none does. Validating it matters because a wrong default is a real defect: a form that arrives with "Semester 1" already chosen for a Semester 5 student will be submitted wrongly by everybody who does not look.

Selection testing means choosing each option in turn and checking that the box, and anything the page does in response, follow.

The page under test

practice/lists.php has three boxes: a course dropdown whose first option is a placeholder and whose last is disabled, a semester dropdown whose default is not its first option, and a multiple-choice electives list:

<?php $title = 'Lists and Combo Boxes'; include 'inc/top.php'; ?>
<h1>Lists and Combo Boxes</h1>

<label>Course
  <select id="course">
    <option value="" selected>-- Select a course --</option>
    <option value="BSCCS">B.Sc. Computer Science</option>
    <option value="BSCIT">B.Sc. Information Technology</option>
    <option value="BCOM">B.Com.</option>
    <option value="BA">B.A.</option>
    <option value="BMS">B.M.S.</option>
    <option value="BSCDS" disabled>B.Sc. Data Science (closed)</option>
  </select>
</label>
<p id="courseResult"></p>

<label>Semester
  <select id="semester">
    <option>Semester 1</option>
    <option>Semester 2</option>
    <option>Semester 3</option>
    <option>Semester 4</option>
    <option selected>Semester 5</option>
    <option>Semester 6</option>
  </select>
</label>

<label>Electives (hold Ctrl to choose more than one)
  <select id="electives" multiple size="5">
    <option selected>Software Testing</option>
    <option>Wireless Sensor Networks</option>
    <option>Ethical Hacking</option>
    <option>Cloud Computing</option>
    <option>Data Mining</option>
  </select>
</label>

<script>
document.getElementById('course').addEventListener('change', function () {
  const chosen = this.options[this.selectedIndex].text;
  document.getElementById('courseResult').textContent = this.value === '' ? '' : 'You chose ' + chosen;
});
</script>
<?php include 'inc/bottom.php'; ?>

The program

Create practicals/ListsTest.java:

package practicals;

import java.util.ArrayList;
import java.util.List;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;

public class ListsTest {
    static List<String> texts(List<WebElement> options) {
        List<String> out = new ArrayList<>();
        for (WebElement o : options) out.add(o.getText());
        return out;
    }

    public static void main(String[] args) {
        WebDriver driver = new ChromeDriver();
        try {
            driver.get("http://localhost:8080/lists.php");

            // 1. Identify the boxes on the page.
            List<WebElement> boxes = driver.findElements(By.tagName("select"));
            System.out.println("Select boxes on the page: " + boxes.size());
            for (WebElement b : boxes) {
                Select s = new Select(b);
                System.out.println("  " + b.getDomAttribute("id") + ": " + s.getOptions().size()
                        + " items, multiple=" + s.isMultiple());
            }

            // 2. The course dropdown: items, default, and every selection.
            Select course = new Select(driver.findElement(By.id("course")));
            System.out.println("Course items: " + texts(course.getOptions()));
            System.out.println("Course default: " + course.getFirstSelectedOption().getText());
            int ok = 0, tried = 0;
            for (WebElement option : course.getOptions()) {
                if (option.getDomAttribute("value").isEmpty() || !option.isEnabled()) continue;
                tried++;
                course.selectByVisibleText(option.getText());
                String chosen = course.getFirstSelectedOption().getText();
                String shown = driver.findElement(By.id("courseResult")).getText();
                boolean pass = chosen.equals(option.getText()) && shown.equals("You chose " + option.getText());
                if (pass) ok++;
                System.out.println("  select " + option.getText() + " -> page says \"" + shown + "\" " + (pass ? "PASS" : "FAIL"));
            }
            System.out.println("Selection tests passed: " + ok + " of " + tried);

            // 3. The disabled option cannot be selected.
            try {
                course.selectByVisibleText("B.Sc. Data Science (closed)");
            } catch (UnsupportedOperationException e) {
                System.out.println("Disabled option: " + e.getMessage());
            }

            // 4. The semester dropdown's default is not its first item.
            Select semester = new Select(driver.findElement(By.id("semester")));
            System.out.println("Semester default: " + semester.getFirstSelectedOption().getText()
                    + " (first item is " + semester.getOptions().get(0).getText() + ")");
            semester.selectByIndex(0);
            System.out.println("After selectByIndex(0): " + semester.getFirstSelectedOption().getText());
            try {
                semester.deselectAll();
            } catch (UnsupportedOperationException e) {
                System.out.println("deselectAll on a single-choice box: " + e.getMessage());
            }

            // 5. The electives list allows several choices.
            Select electives = new Select(driver.findElement(By.id("electives")));
            System.out.println("Electives default: " + texts(electives.getAllSelectedOptions()));
            electives.selectByVisibleText("Cloud Computing");
            try {
                electives.selectByValue("Data Mining");       // these options have no value attribute
            } catch (org.openqa.selenium.NoSuchElementException e) {
                System.out.println("selectByValue: " + e.getMessage().lines().findFirst().orElse(""));
            }
            electives.selectByVisibleText("Data Mining");
            System.out.println("After two more: " + texts(electives.getAllSelectedOptions()));
            electives.deselectByVisibleText("Software Testing");
            System.out.println("After deselecting one: " + texts(electives.getAllSelectedOptions()));
            electives.deselectAll();
            System.out.println("After deselectAll: " + electives.getAllSelectedOptions().size() + " selected");
        } finally {
            driver.quit();
        }
    }
}

Practical 10: List and Combo Box Verification

Select boxes on the page: 3
  course: 7 items, multiple=false
  semester: 6 items, multiple=false
  electives: 5 items, multiple=true
Course items: [-- Select a course --, B.Sc. Computer Science, B.Sc. Information Technology, B.Com., B.A., B.M.S., B.Sc. Data Science (closed)]
Course default: -- Select a course --
  select B.Sc. Computer Science -> page says "You chose B.Sc. Computer Science" PASS
  select B.Sc. Information Technology -> page says "You chose B.Sc. Information Technology" PASS
  select B.Com. -> page says "You chose B.Com." PASS
  select B.A. -> page says "You chose B.A." PASS
  select B.M.S. -> page says "You chose B.M.S." PASS
Selection tests passed: 5 of 5
Disabled option: You may not select a disabled option
Semester default: Semester 5 (first item is Semester 1)
After selectByIndex(0): Semester 1
deselectAll on a single-choice box: You may only deselect all options of a multi-select
Electives default: [Software Testing]
selectByValue: Cannot locate option with value: Data Mining
After two more: [Software Testing, Cloud Computing, Data Mining]
After deselecting one: [Cloud Computing, Data Mining]
After deselectAll: 0 selected

Practical 10: List and Combo Box Verification

Reading the output against the page:

Identification. Three select elements: course with 7 items, semester with 6, and electives with 5, the only one where multiple is true.
Total items and the default. The course box holds seven options and starts on its placeholder, "-- Select a course --", because that option carries selected. That is the correct default for a form that must not guess.
Selection testing. The loop skipped the placeholder (its value is empty) and the disabled option, selected each of the other five by its visible text, and checked two things each time: that the box shows it, and that the page's own response line says "You chose" followed by the same course. Five of five passed.
The disabled option. Selecting it raised UnsupportedOperationException with Selenium's message, which is the right behaviour: a user cannot choose it either.
A default that is not first. The semester box starts on Semester 5, its fifth item, because of selected. selectByIndex(0) chose Semester 1: indexes start at 0.
deselectAll on a single-choice box is refused with its own message, since such a box must always show a choice.
selectByValue needs a value attribute. The electives' options are written with no value attribute, and selectByValue("Data Mining") failed with "Cannot locate option with value: Data Mining". Selenium looks for an option whose value attribute is that text, and there is none. (A browser submitting the form would use the option's text as its value, but that is the element's value property, not an attribute written in the page.) The program then chose it by visible text instead.
The multiple list. It started with one choice, took two more, let one be removed, and could be emptied.

getDomAttribute("value"), asked of each option, reads the value attribute exactly as written in the HTML: codes such as BSCCS for the courses, an empty string for the placeholder, which is how the loop recognises it.

Observations

Box	Items	Multiple	Default	Selection tests
course	7	no	-- Select a course --	5 of 5 passed; disabled option refused
semester	6	no	Semester 5	index 0 chose Semester 1
electives	5	yes	Software Testing	added 2, removed 1, cleared all

Result

Three select boxes were identified on the page. The course dropdown holds 7 items with the placeholder as its default; each of its five selectable courses was selected and verified against the page's response, and its disabled option was refused. The semester dropdown's default was validated as Semester 5. The electives list was verified as a multiple-choice list, with selections added, removed and cleared.

Practical 10: List and Combo Box Verification

Where marks are lost

Counting the placeholder as a course. It is an item of the box, so it counts in the total, but it is not a real selection; say both.

Assuming the default is the first item. Check getFirstSelectedOption(); the semester box proves the difference.

selectByIndex(1) expected to be the first option. Index 0 is the first.

Testing only one selection. MU says "perform selection testing": every selectable item.

Not checking what the page does after a selection. The box can change while the page's response is wrong.

Calling deselectAll() on a single-choice box. Selenium refuses it.

For the journal

Aim; the page under test; the table of Select methods; the program; its output; the observations table; the result.

Quick revision

Dropdown and list box are both <select>; multiple allows several choices.
new Select(element), then getOptions().size() for the total.
getFirstSelectedOption() gives the default before anything is chosen.
selectByVisibleText, selectByValue, selectByIndex (from 0).
A disabled option cannot be selected: UnsupportedOperationException.
getAllSelectedOptions(), deselectByVisibleText, deselectAll for a multiple list.
selectByValue matches the value attribute; an option with none cannot be chosen that way.

Questions you must be able to answer

1. How do you find the total number of items in a dropdown? Wrap it in Select and take getOptions().size().

2. How do you validate a dropdown's default value? Read getFirstSelectedOption() before selecting anything and compare its text with the expected default.

3. Why was the semester box's default not its first item? Its fifth option carries the selected attribute, which sets the default.

4. What happens when a test selects a disabled option? Select raises UnsupportedOperationException, as a user could not choose it either.

5. How can you tell a list box allows several choices? isMultiple() returns true, because the select has the multiple attribute.

6. Why did selectByValue("Data Mining") fail? selectByValue looks for an option whose value attribute is that text, and the electives' options have no value attribute. Choose them by visible text.

The rest of this subject

These notes are cut from the University's printed syllabus. Open the syllabus itself for the same subject.

Syllabus for Software Testing and Quality Assurance Practical

Issue