Fight Playwright

Author: hasparus

src/app/(main)/community/events/meetups-map.tsx

@@ -140,6 +140,7 @@ export function MeetupsMap() {
 
   return (
     <div
+      id="meetups-map"
       onMouseOut={() => {
         setActiveMeetupId(null)
       }}

test/e2e/community-events.spec.ts

@@ -3,36 +3,30 @@ import { test, expect } from "@playwright/test"
 test("map loads and Zurich meetup link works", async ({ page }) => {
   await page.goto("/community/events")
 
-  // Wait for the map canvas to be visible
   const mapCanvas = page.locator("canvas").first()
   await expect(mapCanvas).toBeVisible({ timeout: 10000 })
 
-  // Wait for map to finish loading by checking if it has proper dimensions
   await expect
     .poll(async () => {
       const box = await mapCanvas.boundingBox()
       return box && box.width > 100 && box.height > 100
     })
     .toBe(true)
 
-  // Take a screenshot of the map and verify it matches snapshot
-  const mapContainer = page.locator("canvas").first()
-  await expect(mapContainer).toHaveScreenshot("meetups-map.png", {
-    timeout: 20_000,
-  })
+  const mapContainer = page.locator("#meetups-map")
+  await mapContainer.scrollIntoViewIfNeeded()
+  await expect(mapContainer.locator("canvas").first()).toHaveScreenshot(
+    "meetups-map.png",
+    { timeout: 10_000 },
+  )
 
-  // Find the "Past events & meetups" section
   const pastEventsSection = page.locator("text=Past events & meetups")
   await pastEventsSection.scrollIntoViewIfNeeded()
 
-  // Find the scrollview container with past events and meetups
-
-  // Find the Zurich meetup card in the scrollable list (not the map popup)
   const link = page.getByRole("link", { name: /Zurich/i }).first()
   await link.scrollIntoViewIfNeeded()
   await link.click()
 
-  // Click the link and verify it opens to the correct URL
   const pagePromise = page.context().waitForEvent("page")
   await link.click()
   const newPage = await pagePromise
@@ -43,19 +37,23 @@ test("map loads and Zurich meetup link works", async ({ page }) => {
 
 test("map tooltip appears on marker hover", async ({ page }) => {
   await page.goto("/community/events")
-  const mapCanvas = page.locator("canvas").first()
-  await expect(mapCanvas).toBeVisible({ timeout: 10000 })
+  const mapContainer = page.locator("#meetups-map").first()
+  await mapContainer.scrollIntoViewIfNeeded()
+  await expect(mapContainer).toBeVisible({ timeout: 10000 })
   await expect
     .poll(async () => {
-      const box = await mapCanvas.boundingBox()
+      const box = await mapContainer.boundingBox()
       return Boolean(box && box.width > 100 && box.height > 100)
     })
     .toBe(true)
   const tooltip = page.getByRole("tooltip")
   await expect(tooltip).toHaveCount(0)
+  const mapCanvas = mapContainer.locator("canvas").first()
   await mapCanvas.hover()
   const { clientX, clientY } = await page.evaluate(() => {
-    const canvas = document.querySelector("canvas") as HTMLCanvasElement | null
+    const canvas = document.querySelector(
+      "#meetups-map canvas",
+    ) as HTMLCanvasElement | null
     if (!canvas) throw new Error("Canvas not found")
     const targetLat = 51.51
     const targetLon = -0.12

test/e2e/test-test.spec.ts

@@ -1,8 +1,5 @@
 import { test, expect } from "@playwright/test"
 
-const currentTime = Date.now()
-
-const url1 = "chrome://gpu/"
 const url2 = "https://www.soft8soft.com/webglreport"
 const url3 = "https://webglsamples.org/aquarium/aquarium.html"
 
@@ -14,24 +11,18 @@ test.beforeEach(async ({ browser }, testInfo) => {
   testInfo.setTimeout(testInfo.timeout + 160000)
 })
 
-test.describe("Testing 123", () => {
+test.describe("Testing WebGL Support", () => {
   test("2. webgl report", async ({ page }) => {
     await page.goto(url2)
 
     await waitFor(2000)
-    await page.screenshot({
-      path: "playwright-report/screenshot" + currentTime + "_2.png",
-      fullPage: true,
-    })
+    expect(page).toHaveScreenshot("webgl-report.png")
   })
 
   test("3. aquarium", async ({ page }) => {
     await page.goto(url3)
 
     await waitFor(5000)
-    await page.screenshot({
-      path: "playwright-report/screenshot" + currentTime + "_3.png",
-      fullPage: true,
-    })
+    expect(page).toHaveScreenshot("aquarium.png")
   })
 })