test(e2e): remove remaining raw test id strings

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()
 })

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<HTMLElement>('[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,

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()

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()

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<HTMLCanvasElement>('[data-test-id="canvas-element"]')
+      const canvas = document.querySelector<HTMLCanvasElement>('[data-ready="1"]')
       if (!canvas) throw new Error('Canvas element not found')
       const wheelStart = performance.now()
       for (let i = 0; i < iterations; i++) {

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 `<input>`. */
+  /** Point `locator` at the outer ScrubInput container, not the inner `<input>`. */
   async dragScrubInput(locator: Locator, deltaX: number) {
     await locator.scrollIntoViewIfNeeded()
     const box = await locator.boundingBox()