Speed up E2E tests: reuse page, 14s → 4.6s

tests/e2e/create-shapes.spec.ts

@@ -1,47 +1,57 @@
-import { test, expect } from '@playwright/test'
+import { test, expect, type Page } from '@playwright/test'
 
 import { CanvasHelper } from '../helpers/canvas'
 
-test.describe('create shapes', () => {
-  let canvas: CanvasHelper
+let page: Page
+let canvas: CanvasHelper
 
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/?test')
-    canvas = new CanvasHelper(page)
-    await canvas.waitForInit()
-  })
+test.describe.configure({ mode: 'serial' })
 
-  test('empty canvas', async () => {
-    await expect(canvas.canvas).toHaveScreenshot({ timeout: 3000 })
-  })
-
-  test('draw rectangle', async () => {
-    await canvas.drawRect(100, 100, 200, 150)
-    await expect(canvas.canvas).toHaveScreenshot({ timeout: 3000 })
-  })
-
-  test('draw ellipse', async () => {
-    await canvas.drawEllipse(100, 100, 200, 150)
-    await expect(canvas.canvas).toHaveScreenshot({ timeout: 3000 })
-  })
-
-  test('draw rectangle then move it', async () => {
-    await canvas.drawRect(100, 100, 200, 150)
-    await canvas.selectTool('select')
-    await canvas.drag(200, 175, 400, 300)
-    await canvas.waitForRender()
-    await expect(canvas.canvas).toHaveScreenshot({ timeout: 3000 })
-  })
-
-  test('draw and delete', async () => {
-    await canvas.drawRect(100, 100, 200, 150)
-    await canvas.deleteSelection()
-    await expect(canvas.canvas).toHaveScreenshot({ timeout: 3000 })
-  })
-
-  test('draw and undo', async () => {
-    await canvas.drawRect(100, 100, 200, 150)
-    await canvas.undo()
-    await expect(canvas.canvas).toHaveScreenshot({ timeout: 3000 })
-  })
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage()
+  await page.goto('/?test')
+  canvas = new CanvasHelper(page)
+  await canvas.waitForInit()
+})
+
+test.afterAll(async () => {
+  await page.close()
+})
+
+test.beforeEach(async () => {
+  await canvas.clearCanvas()
+})
+
+test('empty canvas', async () => {
+  await expect(canvas.canvas).toHaveScreenshot({ timeout: 3000 })
+})
+
+test('draw rectangle', async () => {
+  await canvas.drawRect(100, 100, 200, 150)
+  await expect(canvas.canvas).toHaveScreenshot({ timeout: 3000 })
+})
+
+test('draw ellipse', async () => {
+  await canvas.drawEllipse(100, 100, 200, 150)
+  await expect(canvas.canvas).toHaveScreenshot({ timeout: 3000 })
+})
+
+test('draw rectangle then move it', async () => {
+  await canvas.drawRect(100, 100, 200, 150)
+  await canvas.selectTool('select')
+  await canvas.drag(200, 175, 400, 300)
+  await canvas.waitForRender()
+  await expect(canvas.canvas).toHaveScreenshot({ timeout: 3000 })
+})
+
+test('draw and delete', async () => {
+  await canvas.drawRect(100, 100, 200, 150)
+  await canvas.deleteSelection()
+  await expect(canvas.canvas).toHaveScreenshot({ timeout: 3000 })
+})
+
+test('draw and undo', async () => {
+  await canvas.drawRect(100, 100, 200, 150)
+  await canvas.undo()
+  await expect(canvas.canvas).toHaveScreenshot({ timeout: 3000 })
 })

tests/helpers/canvas.ts

@@ -10,7 +10,7 @@ export class CanvasHelper {
   }
 
   async waitForRender() {
-    await this.page.waitForTimeout(500)
+    await this.page.waitForTimeout(100)
   }
 
   async waitForInit() {
@@ -18,6 +18,12 @@ export class CanvasHelper {
     await this.page.waitForTimeout(1000)
   }
 
+  async clearCanvas() {
+    await this.selectAll()
+    await this.pressKey('Backspace')
+    await this.waitForRender()
+  }
+
   async screenshotCanvas() {
     return this.canvas.screenshot()
   }