From 6b406002ddec9fa0fe4d204532df28298ee89c9e Mon Sep 17 00:00:00 2001 From: Danila Poyarkov Date: Fri, 15 May 2026 13:02:41 +0300 Subject: [PATCH] test(e2e): remove remaining raw test id strings --- tests/e2e/code/panel.spec.ts | 20 ++++---------------- tests/e2e/components/assets-panel.spec.ts | 7 +------ tests/e2e/editor/auto-layout/basic.spec.ts | 12 ++++++------ tests/e2e/properties/panel.spec.ts | 4 +--- tests/e2e/viewport/zoom-pan.spec.ts | 2 +- tests/helpers/canvas.ts | 2 +- 6 files changed, 14 insertions(+), 33 deletions(-) diff --git a/tests/e2e/code/panel.spec.ts b/tests/e2e/code/panel.spec.ts index 0958095a2..22ce75ce1 100644 --- a/tests/e2e/code/panel.spec.ts +++ b/tests/e2e/code/panel.spec.ts @@ -54,10 +54,7 @@ test('selecting a rectangle shows JSX code', async () => { await expect(codePanel()).toBeVisible() - const code = await page.evaluate(() => { - const el = document.querySelector('[data-test-id="code-panel"]') - return el?.textContent ?? '' - }) + const code = await codePanel().textContent() expect(code).toContain('Rectangle') }) @@ -70,10 +67,7 @@ test('format toggle switches between OpenPencil and Tailwind', async () => { await formatToggle().click() await expect(formatToggle()).toContainText('Tailwind') - const code = await page.evaluate(() => { - const el = document.querySelector('[data-test-id="code-panel"]') - return el?.textContent ?? '' - }) + const code = await codePanel().textContent() expect(code).toContain('div') await formatToggle().click() @@ -106,18 +100,12 @@ test('selecting a frame shows Frame in JSX', async () => { }) await canvas.waitForRender() - const code = await page.evaluate(() => { - const el = document.querySelector('[data-test-id="code-panel"]') - return el?.textContent ?? '' - }) + const code = await codePanel().textContent() expect(code).toContain('Frame') }) test('switching back to Design tab works', async () => { await designTab().click() - const panel = page.locator( - '[data-test-id="design-panel-single"], [data-test-id="design-panel-empty"]' - ) - await expect(panel.first()).toBeVisible() + await expect(page.getByTestId('design-panel-single').or(page.getByTestId('design-panel-empty')).first()).toBeVisible() }) diff --git a/tests/e2e/components/assets-panel.spec.ts b/tests/e2e/components/assets-panel.spec.ts index efaad3df8..3a9569995 100644 --- a/tests/e2e/components/assets-panel.spec.ts +++ b/tests/e2e/components/assets-panel.spec.ts @@ -233,12 +233,7 @@ test('assets insertion accounts for entered container coordinates', async ({ pag const selected = selectedId ? store.graph.getNode(selectedId) : null if (!selected) return null const abs = store.graph.getAbsolutePosition(selected.id) - const canvasEl = document.querySelector('[data-test-id="canvas-area"]') - const rect = canvasEl?.getBoundingClientRect() - const center = store.screenToCanvas( - (rect?.width ?? window.innerWidth) / 2, - (rect?.height ?? window.innerHeight) / 2 - ) + const center = store.screenToCanvas(...Object.values(store.viewportCanvasCenter()) as [number, number]) return { parentId: selected.parentId, centerX: abs.x + selected.width / 2, diff --git a/tests/e2e/editor/auto-layout/basic.spec.ts b/tests/e2e/editor/auto-layout/basic.spec.ts index a66b10de2..922a1ef79 100644 --- a/tests/e2e/editor/auto-layout/basic.spec.ts +++ b/tests/e2e/editor/auto-layout/basic.spec.ts @@ -118,18 +118,18 @@ test('padding controls set horizontal and vertical padding pairs', async () => { await page.getByTestId('layout-horizontal-padding-input').click() await canvas.waitForRender() - const horizontalInput = page.locator( - '[data-test-id="layout-horizontal-padding-input"] [data-test-id="scrub-input-field"]' - ) + const horizontalInput = page + .getByTestId('layout-horizontal-padding-input') + .getByTestId('scrub-input-field') await horizontalInput.fill('24') await horizontalInput.press('Enter') await canvas.waitForRender() await page.getByTestId('layout-vertical-padding-input').click() await canvas.waitForRender() - const verticalInput = page.locator( - '[data-test-id="layout-vertical-padding-input"] [data-test-id="scrub-input-field"]' - ) + const verticalInput = page + .getByTestId('layout-vertical-padding-input') + .getByTestId('scrub-input-field') await verticalInput.fill('16') await verticalInput.press('Enter') await canvas.waitForRender() diff --git a/tests/e2e/properties/panel.spec.ts b/tests/e2e/properties/panel.spec.ts index aa51de05f..58d853c4e 100644 --- a/tests/e2e/properties/panel.spec.ts +++ b/tests/e2e/properties/panel.spec.ts @@ -43,9 +43,7 @@ test('corner radius uniform sets cornerRadius', async () => { const scrubContainer = page.getByTestId('corner-radius-input') await scrubContainer.click() await canvas.waitForRender() - const input = page.locator( - '[data-test-id="corner-radius-input"] [data-test-id="scrub-input-field"]' - ) + const input = page.getByTestId('corner-radius-input').getByTestId('scrub-input-field') await input.fill('12') await input.press('Enter') await canvas.waitForRender() diff --git a/tests/e2e/viewport/zoom-pan.spec.ts b/tests/e2e/viewport/zoom-pan.spec.ts index 0cd9b0864..cb7288e92 100644 --- a/tests/e2e/viewport/zoom-pan.spec.ts +++ b/tests/e2e/viewport/zoom-pan.spec.ts @@ -252,7 +252,7 @@ test.describe('Zoom and pan', () => { store.state.panX = 0 store.state.panY = 0 - const canvas = document.querySelector('[data-test-id="canvas-element"]') + const canvas = document.querySelector('[data-ready="1"]') if (!canvas) throw new Error('Canvas element not found') const wheelStart = performance.now() for (let i = 0; i < iterations; i++) { diff --git a/tests/helpers/canvas.ts b/tests/helpers/canvas.ts index 1f2cfdb18..28e2ea982 100644 --- a/tests/helpers/canvas.ts +++ b/tests/helpers/canvas.ts @@ -138,7 +138,7 @@ export class CanvasHelper { await this.waitForRender() } - /** Point `locator` at the outer ScrubInput container (`[data-test-id="scrub-input"]`), not the inner ``. */ + /** Point `locator` at the outer ScrubInput container, not the inner ``. */ async dragScrubInput(locator: Locator, deltaX: number) { await locator.scrollIntoViewIfNeeded() const box = await locator.boundingBox()