How to Handle Playwright Alerts and Dropdowns

Prompt Alert

Prompt alerts request input from the user and pause interaction until a value is entered and OK or Cancel is clicked.

Test Scenario:

• Navigate to the Javascript Alert Box Demo page.
• Click the Click Me button under the Prompt box.
• Enter a value and accept the prompt.

Implementation:

The test script below listens for the prompt alert, enters a value, and verifies that the text appears in the output.

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

test("Prompt alert", async ({ page }) => {
await page.goto("https://www.testmuai.com/selenium-playground/javascript-alert-box-demo
");

page.on("dialog", async (alert) => {
console.log(alert.message());
await alert.accept("koushik");
});

await page.locator("button:has-text('Click Me')").nth(2).click();

await expect(page.locator("#prompt-demo")).toContainText("'koushik'");
});

Code Walkthrough:

• Imports and Test Setup: Imports expect and test from Playwright and defines a test named Prompt alert with a page object.
• Navigation: Navigates the browser to the JavaScript alert demo page using page.goto() method.
• Dialog Handling: Sets up a dialog event listener that logs the alert message and accepts it with the input koushik.
• Trigger Prompt: Clicks the third button with text Click Me to trigger the prompt dialog.
• Verification: Verifies that the element with ID #prompt-demo contains the text koushik.

Modal Alert

Modal alerts are page-based pop-ups that appear over the main content to capture attention. They are handled using standard DOM interactions rather than browser-level dialog methods.

Test Scenario:

• Navigate to the Bootstrap Modal page.
• Click the Launch Modal button.
• Click the Save Changes button inside the modal.

Implementation:

The test script below interacts with a Bootstrap modal by clicking the buttons using standard selectors.

import { test } from "@playwright/test";

test("Modal alert", async ({ page }) => {
await page.goto("https://www.testmuai.com/selenium-playground/bootstrap-modal-demo
");

await page.click("//button[@data-target='#myModal']");
await page.click("(//button[text()='Save Changes'])[1]");
});

Code Walkthrough:

• Imports and Test Setup: Imports test from Playwright and defines a test named Modal alert with a page object.
• Navigation: Navigates the browser to the Bootstrap modal demo page using the page.goto() method.
• Modal Trigger: Clicks the button that launches the modal using the data-target='#myModal' XPath selector.
• Interaction: Clicks the Save Changes button inside the modal using its XPath selector.

Since modals rely on precise DOM clicks, understanding the Playwright click() method helps you handle edge cases like overlapping elements or delayed rendering.

Single-Select Dropdown

Single-select dropdowns allow choosing only one option at a time.

Test Scenario:

• Navigate to the Select Dropdown Demo page.
• Select an option from the dropdown using index, label, or value.

Implementation:

The test script below selects an option from a single-select dropdown.

import { test } from "@playwright/test";

test("Single-select dropdown", async ({ page }) => {
  await page.goto("https://www.testmuai.com/selenium-playground/select-dropdown-demo");

  await page.selectOption("#select-demo", {
    index: 5 // alternatively, use label: "Tuesday" or value: "Friday"
  });
});

Code Walkthrough:

• Imports and Test Setup: Imports test from Playwright and defines a test named Single-select dropdown with a page object.
• Navigation: Navigates the browser to the select dropdown demo page using the page.goto() method.
• Dropdown selection: Uses page.selectOption() on #select-demo to select the option at index: 5 (alternatively can use label or value).

Multi-select dropdowns allow selecting multiple options simultaneously.

Test Scenario:

• Navigate to the Select Dropdown Demo page.
• Select multiple options using a mix of index, label, and value.

Implementation:

import { test } from "@playwright/test";

test("Multi-select dropdown", async ({ page }) => {
  await page.goto("https://www.testmuai.com/selenium-playground/select-dropdown-demo");

  await page.selectOption("#multi-select", [
    { label: "Texas" },
    { index: 2 },
    { value: "Washington" }
  ]);
});

Code Walkthrough:

• Imports and Test Setup: Imports test from Playwright and defines a test named Multi-select dropdown with a page object.
• Navigation: Navigates the browser to the select dropdown demo page using page.goto().
• Dropdown Selection: Uses page.selectOption() on #multi-select to select multiple options with label, index, and value.

Bootstrap / jQuery Dropdown

Custom dropdowns like Bootstrap or jQuery require opening the menu and selecting items using DOM locators. Choosing the right targeting strategy is critical here, so having a solid understanding of Playwright locators makes your dropdown tests more resilient to UI changes.

Test Scenario:

• Navigate to the jQuery Dropdown Search Demo page.
• Select multiple countries using the dropdown search functionality.

Implementation:

import { test } from "@playwright/test";

test("Bootstrap/jQuery dropdown", async ({ page }) => {
  await page.goto("https://www.testmuai.com/selenium-playground/jquery-dropdown-search-demo");

  await selectCountry("India");
  await selectCountry("Denmark");
  await selectCountry("South Africa");

  async function selectCountry(countryName) {
    await page.click("#country+span");
    await page.locator("ul#select2-country-results")
      .locator("li", { hasText: countryName })
      .click();
  }
});

Code Walkthrough:

• Imports and Test Setup: Imports test from Playwright and defines a test named Bootstrap/jQuery dropdown with a page object.
• Navigation: Navigates the browser to the jQuery dropdown search demo page using page.goto().
• Country Selection: Calls selectCountry() for each country: "India", "Denmark", and "South Africa".
• Function Definition: Defines selectCountry(countryName) which clicks the dropdown #country+span, locates the results list ul#select2-country-results, finds the li containing the given country, and clicks it.

Test Execution:

Now, let's run the test for Playwright dropdowns using the following command:

npx playwright test tests/dropdown.test.ts