fix hovering-toolbar playwright integration test (#5284)

playwright.config.ts

@@ -78,6 +78,9 @@ const config: PlaywrightTestConfig = {
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+
+    /* Name of attribute for selecting elements by page.getByTestId */
+    testIdAttribute: 'data-test-id',
   },
 
   /* Configure projects for major browsers */

playwright/integration/examples/hovering-toolbar.test.ts

@@ -7,24 +7,18 @@ test.describe('hovering toolbar example', () => {
 
   test('hovering toolbar appears', async ({ page }) => {
     await page.pause()
-    await expect(page.locator('div').nth(12)).toHaveCSS('opacity', '0')
+    await expect(page.getByTestId('menu')).toHaveCSS('opacity', '0')
 
     await page
       .locator('span[data-slate-string="true"]')
       .nth(0)
       .selectText()
-    expect(
-      await page
-        .locator('div')
-        .nth(12)
-        .count()
-    ).toBe(1)
+    expect(await page.getByTestId('menu').count()).toBe(1)
 
-    await expect(page.locator('div').nth(12)).toHaveCSS('opacity', '1')
+    await expect(page.getByTestId('menu')).toHaveCSS('opacity', '1')
     expect(
       await page
-        .locator('div')
-        .nth(12)
+        .getByTestId('menu')
         .locator('span.material-icons')
         .count()
     ).toBe(3)
@@ -35,7 +29,7 @@ test.describe('hovering toolbar example', () => {
       .locator('span[data-slate-string="true"]')
       .nth(0)
       .selectText()
-    await expect(page.locator('div').nth(12)).toHaveCSS('opacity', '1')
+    await expect(page.getByTestId('menu')).toHaveCSS('opacity', '1')
     await page
       .locator('span[data-slate-string="true"]')
       .nth(0)
@@ -43,7 +37,7 @@ test.describe('hovering toolbar example', () => {
     await page
       .locator('div')
       .nth(0)
-      .click({ force: true })
-    await expect(page.locator('div').nth(12)).toHaveCSS('opacity', '0')
+      .click({ force: true, position: { x: 0, y: 0 } })
+    await expect(page.getByTestId('menu')).toHaveCSS('opacity', '0')
   })
 })

site/components.tsx

@@ -149,6 +149,7 @@ export const Menu = React.forwardRef(
   ) => (
     <div
       {...props}
+      data-test-id="menu"
       ref={ref}
       className={cx(
         className,