✅ Add E2E tests for toolbar zoom controls

frontend/packages/e2e/tests/e2e/toolbar.test.ts

@@ -0,0 +1,46 @@
+import { expect, test } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/')
+  const cookieButton = page.getByRole('button', {
+    name: 'Accept All Cookies',
+  })
+  await cookieButton.click({ timeout: 3000, force: true }).catch(() => {})
+})
+
+test.describe('Desktop Toolbar', () => {
+  test('should be visible', async ({ page }) => {
+    const toolbar = page.getByRole('toolbar', { name: 'Toolbar' })
+    await expect(toolbar).toBeVisible()
+  })
+
+  test('zoom in button should increase zoom level', async ({ page }) => {
+    const toolbar = page.getByRole('toolbar', { name: 'Toolbar' })
+    const zoomLevelText = toolbar.locator('span[class*="zoomLevelText"]')
+
+    const zoomLevelBefore = await zoomLevelText.textContent()
+
+    const zoomInButton = toolbar.getByRole('button', { name: 'Zoom in' })
+    await zoomInButton.click()
+
+    const zoomLevelAfter = await zoomLevelText.textContent()
+    expect(Number.parseInt(zoomLevelBefore)).toBeLessThan(
+      Number.parseInt(zoomLevelAfter),
+    )
+  })
+
+  test('zoom out button should decrease zoom level', async ({ page }) => {
+    const toolbar = page.getByRole('toolbar', { name: 'Toolbar' })
+    const zoomLevelText = toolbar.locator('span[class*="zoomLevelText"]')
+
+    const zoomLevelBefore = await zoomLevelText.textContent()
+
+    const zoomOutButton = toolbar.getByRole('button', { name: 'Zoom out' })
+    await zoomOutButton.click()
+
+    const zoomLevelAfter = await zoomLevelText.textContent()
+    expect(Number.parseInt(zoomLevelBefore)).toBeGreaterThan(
+      Number.parseInt(zoomLevelAfter),
+    )
+  })
+})

frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/DesktopToolbar.tsx

@@ -8,7 +8,7 @@ import { ZoomControls } from './ZoomControls'
 
 export const DesktopToolbar: FC = () => {
   return (
-    <ToolbarPrimitive.Root className={styles.root}>
+    <ToolbarPrimitive.Root className={styles.root} aria-label="Toolbar">
       <ZoomControls />
       <ToolbarPrimitive.Separator className={styles.separator} />
       <div className={styles.buttons}>

frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar/MobileToolbar.tsx

@@ -57,6 +57,7 @@ export const MobileToolbar: FC = () => {
           [styles.open]: isOpen && !isShowModeMenu,
           [styles.openShowModeMenu]: isOpen && isShowModeMenu,
         })}
+        aria-label="Toolbar"
       >
         <div className={styles.positionRelative}>
           {/* Default(closed) */}

frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/ZoomControls/ZoomControls.tsx

@@ -42,13 +42,21 @@ export const ZoomControls: FC = () => {
   return (
     <div className={styles.wrapper}>
       <ToolbarButton asChild onClick={handleClickZoomOut}>
-        <IconButton icon={<Minus />} tooltipContent="Zoom Out" />
+        <IconButton
+          icon={<Minus />}
+          tooltipContent="Zoom Out"
+          aria-label="Zoom out"
+        />
       </ToolbarButton>
       <span className={styles.zoomLevelText}>
         {Math.floor(zoomLevel * 100)}%
       </span>
       <ToolbarButton asChild onClick={handleClickZoomIn}>
-        <IconButton icon={<Plus />} tooltipContent="Zoom In" />
+        <IconButton
+          icon={<Plus />}
+          tooltipContent="Zoom In"
+          aria-label="Zoom in"
+        />
       </ToolbarButton>
     </div>
   )