archived-web-php/tests/Visual/SearchModal.spec.ts

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

const httpHost = process.env.HTTP_HOST;

if (typeof httpHost !== "string") {
    throw new Error('Environment variable "HTTP_HOST" is not set.');
}

test.beforeEach(async ({ page }) => {
    await page.goto(httpHost);
});

const openSearchModal = async (page) => {
    await page.getByRole("button", { name: "Search" }).click();
    const modal = await page.getByRole("dialog", { name: "Search modal" });

    // Wait for the modal animation to finish
    await expect(page.locator("#search-modal__backdrop.show")).not.toHaveClass(
        "showing",
    );

    expect(modal).toBeVisible();
    return modal;
};

test("should match search modal visual snapshot", async ({ page }) => {
    const modal = await openSearchModal(page);
    await modal.getByRole("searchbox").fill("array");
    await expect(page).toHaveScreenshot(`tests/screenshots/search-modal.png`, {
        // Cannot use mask as it ignores z-index
        // See https://github.com/microsoft/playwright/issues/19002
        stylePath: path.join(__dirname, "SearchModal.css"),
    });
});