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

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

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