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.

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:

import { 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:

1. 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.

2. 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.

3. 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.

4. 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.

Arrow functions in JavaScript allow you to describe a task or behavior in a clear and straightforward way using the => symbol.

Here's how they work:

1. Parameters: These are like placeholders. When you write an arrow function, you may use parentheses () to list what the function needs to perform its task. For example, if you want to add two numbers, you'll have parameters for those numbers:

   const add = (a, b) => a + b;

   Here, a and b are parameters.

2. Task: After the parameters, an arrow function shows what it does using the => symbol. In the example above, a + b is the task of adding the two numbers.

In our Playwright examples, let's see arrow functions in action:

• In page.$eval('select#categories', select => select.value), select => select.value is an arrow function. Here, select acts as a placeholder for the dropdown element, and select.value describes the task of getting the dropdown's value.

• In page.$$eval('select#categories option', options => options.map(option => option.value)), options.map(option => option.value) uses placeholders option to represent each dropdown option, describing how to get each option's value.

Arrow functions provide a simple way to describe a task, focusing on what you want to achieve without adding extra complexity.

Automating dropdown selections is crucial for creating robust automated tests. It ensures that web applications function correctly across a variety of user interactions, leading to improved user experiences and saving time in manual testing. Mastery of this skill will boost your efficiency in writing tests and handling dynamic web environments.

With this newfound knowledge, you're all set to move into the practice section. Let's put these concepts into action and deepen your understanding!