Automating Dropdown Selection

Introduction to Automating Dropdown Selection

Welcome to an exciting part of our course where we delve into automating dropdown selections using Playwright . Dropdowns are common on web pages for user selections, such as choosing a category of books or filtering search results. This lesson will guide you through writing automated tests to interact with dropdowns, enhancing your Playwright skills.

Key Concepts and Techniques

In this lesson, you will learn how to automate dropdown selection with Playwright. We'll cover the process of identifying and interacting with dropdown elements on a webpage to select a specific option. Here's a sneak peek: TypeScriptimport { test, expect } from '@playwright/test'; test('automate dropdown selection', async ({ page }) => { await page.goto('http://localhost:3000/books'); await page.selectOption('select#categories', 'Fantasy'); const selectedValue = await page.$eval('select#categories', select => select.value); expect(selectedValue).toBe('Fantasy'); await expect(page.locator('.book-title >> text=Harry Potter and the Philosopher\'s Stone')).toBeVisible(); await expect(page.locator('.book-title >> text=The Hobbit')).toBeVisible(); await expect(page.locator('.book-title >> text=The Great Gatsby')).not.toBeVisible(); }); In this test, we perform the following actions: Navigate to a Web Page: Using page.goto('http://localhost:3000/books'), Playwright opens the specified URL, which hosts the dropdown we want to manipulate. Select an Option from a Dropdown: We use page.selectOption('select#categories', 'Fantasy') to automate the action of selecting the 'Fantasy' option. The CSS selector select#categories is used to fetch the 'select' element with an id of 'categories', which corresponds to an HTML element like <select id="categories"…>. This simulates the user action of choosing an option from the dropdown. Verify the Selected Value: By evaluating the current value of the dropdown with page.$eval('select#categories', select => select.value), we ensure it's set to 'Fantasy'. This serves as a check to confirm that the selection occurred as expected. The page.$eval method fetches the element matching the CSS selector 'select#categories', which is the dropdown element. The arrow function select => select.value then takes this element as input and returns its value attribute. Expectations for Page Content: We employ expect assertions to check that specific content is visible on the page following the selection. Specifically, we assert that elements with classes '.book-title' containing the texts 'Harry Potter and the Philosopher's Stone' and 'The Hobbit' are visible, and that 'The Great Gatsby' is not visible. This confirms that selecting 'Fantasy' filters the page contents correctly. These steps collectively demonstrate how to automate dropdown selection in Playwright, confirming that the webpage's filtering functionality responds accurately after interaction.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Retrieving All Possible Dropdown Options

In addition to selecting a specific option, it can be beneficial to understand how to retrieve all possible options from a dropdown. This assists in scenarios where you need to verify the presence of certain options or dynamically interact with them.

TypeScript

import { test, expect } from '@playwright/test';

test('retrieve all dropdown options', async ({ page }) => {
  await page.goto('http://localhost:3000/books');

  const expectedOptions = ['', 'Literature', 'Science Fiction', 'Fantasy'];

  const options = await page.$$eval('select#categories option', options => options.map(option => option.value));  

  expect(options).toEqual(expectedOptions);
});

In this example, we perform the following actions:

Navigate to a Web Page: Just like selecting an option, we first navigate to the desired page using page.goto('http://localhost:3000/books').
Understand Arrays: Arrays are used to store multiple items in a single variable and are defined using square brackets []. In the code, the array expectedOptions is initialized as const expectedOptions = ['', 'Literature', 'Science Fiction', 'Fantasy'];, containing the list of expected dropdown values. This list will be then used to compare and verify the list of options that we get from the page.
Retrieve All Options: We use page.$$eval('select#categories option', options => options.map(option => option.value)) to fetch all option elements within the dropdown. The CSS selector select#categories option targets each option under the dropdown. This returns an array of option values.
- Notice that we use $$eval here instead of $eval: $eval is used to select a single element and execute a function on it, while $$eval is used to select all matching elements and apply a function to an array of those elements.
- The map function is used to create a new array containing the values of each 'option' element. It iterates over the array of 'option' elements and extracts their 'value' attribute.
- CSS selectors separated by spaces are known as descendant selectors. They target elements that are descendants of a specified ancestor in the HTML structure. The space between two selectors indicates that the second selector is a descendant, not necessarily a direct child, of the element targeted by the first selector. Consider the selector select#categories option used in our Playwright example:
  - select#categories: This part selects the <select> element with the id of 'categories'.
  - option: Following the space, this part selects <option> elements that are descendants (at any level) of the <select> element. It doesn't matter how many levels down the <option> elements are; as long as they are nested within the <select>, they will be targeted.
Verify Options Content: By comparing the retrieved options array with an expectedOptions array using expect(options).toEqual(expectedOptions), we ensure that the options in the dropdown match the expected set of categories. The toEqual assertion checks that the arrays are equal in both content and order, ensuring that the dropdown includes all required categories in a precise sequence.

This technique provides a robust way to verify the exact set of dropdown options, ensuring that the dropdown includes all required categories in a precise order.

Introduction to Automating Dropdown Selection

Key Concepts and Techniques

Join the 1M+ learners on CodeSignal

Retrieving All Possible Dropdown Options

Arrow functions

Why It Matters