Add firefox, webkit testing, improve size matching

.github/workflows/build.yml

@@ -41,7 +41,7 @@ jobs:
  env:
  SESSION_SIGNING_SECRET: notsosecretthing
  - name: Prepare Playwright
- run: npx playwright install chromium
+ run: npx playwright install chromium firefox webkit
  - name: Run playwright tests
  run: yarn test:playwright
  - name: Archive results

playwright.config.ts

@@ -1,4 +1,4 @@
-import { PlaywrightTestConfig } from "@playwright/test"
+import { PlaywrightTestConfig, devices } from "@playwright/test"
 
 const ci = process.env.CI === "true"
 
@@ -15,5 +15,19 @@ const config: PlaywrightTestConfig = {
  trace: "on",
  },
  reporter: ci ? "github" : "line",
+ projects: [
+ {
+ name: "chromium",
+ use: { ...devices["Desktop Chrome"] },
+ },
+ {
+ name: "firefox",
+ use: { ...devices["Desktop Firefox"] },
+ },
+ {
+ name: "webkit",
+ use: { ...devices["Desktop Safari"] },
+ },
+ ],
 }
 export default config

playwright/src/pages/BoardPage.ts

@@ -57,6 +57,11 @@ export function BoardPage(page: Page) {
  })
  }
 
+ async function getElementSize(item: Locator) {
+ const { width, height } = assertNotNull(await item.boundingBox())
+ return { width, height }
+ }
+
  async function createNew(paletteItem: Locator, x: number, y: number) {
  await expect(paletteItem).toBeVisible()
 
@@ -137,7 +142,17 @@ export function BoardPage(page: Page) {
  },
  async assertItemPosition(item: Locator, x: number, y: number) {
  const pos = await getElementPosition(item)
- expect(pos).toEqual({ x, y })
+ expect(pos.x).toBeGreaterThan(x - 5)
+ expect(pos.x).toBeLessThan(x + 5)
+ expect(pos.y).toBeGreaterThan(y - 5)
+ expect(pos.y).toBeLessThan(y + 5)
+ },
+ async assertItemSize(item: Locator, width: number, height: number) {
+ const size = await getElementSize(item)
+ expect(size.width).toBeGreaterThan(width - 5)
+ expect(size.width).toBeLessThan(width + 5)
+ expect(size.height).toBeGreaterThan(height - 5)
+ expect(size.height).toBeLessThan(height + 5)
  },
  async getItemPosition(item: Locator) {
  return await getElementPosition(item)

playwright/src/tests/board.spec.ts

@@ -35,7 +35,7 @@ test.describe("Basic board functionality", () => {
  await board.selectItems(monoids, semigroups)
  await board.dragItem(monoids, 400, 300)
  await board.assertItemPosition(monoids, 400, 300)
- await board.assertItemPosition(semigroups, 300, 197)
+ await board.assertItemPosition(semigroups, 300, 200)
  })
  })
 
@@ -107,7 +107,7 @@ test.describe("Basic board functionality", () => {
  const n2 = await board.createNoteWithText(300, 100, "ALL")
  const n3 = await board.createNoteWithText(320, 190, "THESE")
  await board.createNoteWithText(300, 250, "BUT NOT THIS")
- await board.selectItems(n1, n2, n3)
+ await board.selectItems(n3, n2, n1)
  const originalCoordinates = await Promise.all([n1, n2, n3].map((n) => board.getItemPosition(n)))
  await (await board.contextMenu.openHorizontalAlign()).left.click()
  const newCoordinates = await Promise.all([n1, n2, n3].map((n) => board.getItemPosition(n)))
@@ -140,7 +140,7 @@ test.describe("Basic board functionality", () => {
  await test.step("Can drag to resize items", async () => {
  await board.selectItems(monoids)
  await board.dragSelectionBottomCorner(550, 550)
- await expect(monoids).toHaveCSS("width", "382.562px")
+ await board.assertItemSize(monoids, 380, 380)
  })
  })