1import { test, expect } from "@playwright/test"; 2import path from "path"; 3 4const httpHost = process.env.HTTP_HOST; 5 6if (typeof httpHost !== "string") { 7 throw new Error('Environment variable "HTTP_HOST" is not set.'); 8} 9 10test.beforeEach(async ({ page }) => { 11 await page.goto(httpHost); 12}); 13 14const openSearchModal = async (page) => { 15 await page.getByRole("button", { name: "Search" }).click(); 16 const modal = await page.getByRole("dialog", { name: "Search modal" }); 17 18 // Wait for the modal animation to finish 19 await expect(page.locator("#search-modal__backdrop.show")).not.toHaveClass( 20 "showing", 21 ); 22 23 expect(modal).toBeVisible(); 24 return modal; 25}; 26 27test("should match search modal visual snapshot", async ({ page }) => { 28 const modal = await openSearchModal(page); 29 await modal.getByRole("searchbox").fill("array"); 30 await expect(page).toHaveScreenshot(`tests/screenshots/search-modal.png`, { 31 // Cannot use mask as it ignores z-index 32 // See https://github.com/microsoft/playwright/issues/19002 33 stylePath: path.join(__dirname, "SearchModal.css"), 34 }); 35}); 36
