<title> 08/26/25

Count Multiple Elements in Dropdown in Playwright

Dropdown in Playwright

A dropdown is usually represented in HTML using a <select> tag with multiple <option> elements, or sometimes as a custom dropdown built with <div> or <li> elements.

When working with dropdowns in automation, sometimes you don’t just want to select an option, but also count how many options are present.

Counting Multiple Elements in a Dropdown in Playwright

(1) Locate the Dropdown

First, you need to identify the dropdown element (e.g., <select> or custom dropdown).
In Playwright, we interact with it using a Locator.

(2) Identify Dropdown Options

Inside the dropdown, multiple child elements represent available options. For <select>, these are <option> elements. For custom dropdowns, it could be <li>, <div>, or any repeated tag structure.

(3) Retrieve All Options

Using Playwright, you can fetch all the matching elements (for example, all <option> tags inside the dropdown).
This gives you a list/collection of elements.

(4) Count the Elements

Once you have the collection, you can count how many elements are present.
This tells you the total number of items in the dropdown.

(5) Use Cases in Testing

Validation: Verify the dropdown has the expected number of options.
Dynamic dropdowns: Check if the options are loading correctly (e.g., states list changes when you pick a country).
Data-driven testing: Ensure that no option is missing or duplicated.

Example Website:

We’ll use: https://rahulshettyacademy.com/AutomationPractice/

Code in Playwright Java:

import com.microsoft.playwright.*;

public class DropdownCountExample {
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
            BrowserContext context = browser.newContext();
            Page page = context.newPage();

            // Navigate to demo site
            page.navigate("https://rahulshettyacademy.com/AutomationPractice/");

            // Locate the dropdown and get all option elements
            Locator dropdownOptions = page.locator("#dropdown-class-example");

            // Count the number of dropdown options
            int optionCount = dropdownOptions.count();
            System.out.println("Total options in dropdown: " + optionCount);

            // Print each option text
            for (int i = 0; i < optionCount; i++) {
                System.out.println("Option " + (i + 1) + ": " + dropdownOptions.nth(i).textContent());
            }

            browser.close();
        }
    }
}

Code explanation:

Launch the browser.
Navigate to a web page with a dropdown (e.g., https://rahulshettyacademy.com/AutomationPractice/).
Locate the dropdown element.
Get all options inside the dropdown using a locator.
Count the number of options.

Code for count multiple elements:

Open a New Tab in Playwright

What is a Tab in Playwright?

In browser automation, a tab is represented as a Page object in Playwright.
Each new tab is essentially a new Page instance, but it still belongs to the same BrowserContext.
This allows multiple tabs to run in parallel, isolated from each other’s states like cookies, local storage, and sessions (if contexts are separated).

How to Open a New Tab in Playwright?

(1) Start with a Browser and Context

When you launch a browser in Playwright, you typically work inside a BrowserContext.
A single context can represent one user session.

(2) Create a New Page (Tab)

To open a new tab, you create a new Page inside the same BrowserContext.
Each new Page = a new tab in that browser window.

(3) Switching Between Tabs

Each tab (Page) can be referenced independently.
You can perform actions like navigation, clicking, form filling, etc., on one Page while keeping the other Page open in the background.

(4) Running Multiple Tabs

Playwright allows multiple Page instances in parallel.
This is useful for scenarios like: Testing multi-tab workflows (e.g., clicking a link opens a new tab), Comparing data across tabs, Simulating multiple user journeys side by side.

(5) Closing Tabs

Once a tab (Page) is no longer needed, it can be closed independently without affecting other open tabs.

Example Use Cases in Testing

E-commerce: Add a product to the cart in one tab, check order history in another.
Authentication: Login in one tab, open a secure page in another tab to verify session sharing.
Social Media: Open multiple tabs to simulate different user feeds.

In Playwright Java, opening a new tab is done by creating a new Page from the existing BrowserContext. A tab in a browser corresponds to a Page object in Playwright. Here's how it works:

Steps to Open a New Tab in Playwright Java:

Launch the browser.
Create a browser context using browser.newContext().
Open the first tab using context.newPage().
Open a second tab (new page) using the same context.newPage().
Navigate both tabs to different websites or perform other actions.

Example Website Used:

We'll use https://example.com for the first tab and https://playwright.dev for the second.

Java Code to Open New Tab in Playwright:

import com.microsoft.playwright.*;

public class OpenNewTabExample {
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
            // Step 1: Launch browser
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));

            // Step 2: Create a new browser context
            BrowserContext context = browser.newContext();

            // Step 3: Open the first tab
            Page firstTab = context.newPage();
            firstTab.navigate("https://example.com");
            System.out.println("First tab title: " + firstTab.title());

            // Step 4: Open a new tab (second tab)
            Page secondTab = context.newPage();
            secondTab.navigate("https://playwright.dev");
            System.out.println("Second tab title: " + secondTab.title());

            // Wait so you can see the browser tabs before the program closes
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }
}

Code explanation:

(a) Launch the browser

(b) Open a Browser Context

(d) Open the second tab

(e) Wait time to see the execution

Important Points:

BrowserContext behaves like an incognito window — tabs (Pages) under the same context can share session data.
context.newPage() opens a new tab in the same browser window.
navigate(url) is used to open a website in that tab.
You can interact with both tabs using their respective Page objects.