From fc84fdbd99bfd3ebc344f31cd8a1a8ac328aad2a Mon Sep 17 00:00:00 2001
From: Sergei Dedkov <dsv.mail@yandex.ru>
Date: Wed, 8 Feb 2023 11:13:09 +0600
Subject: [PATCH] fix hovering-toolbar playwright integration test (#5284)

---
 playwright.config.ts                          |  3 +++
 .../examples/hovering-toolbar.test.ts         | 20 +++++++------------
 site/components.tsx                           |  1 +
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index 255330a01..7b1ef4050 100644
--- a/playwright.config.ts
+++ b/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 */
diff --git a/playwright/integration/examples/hovering-toolbar.test.ts b/playwright/integration/examples/hovering-toolbar.test.ts
index 54e68d38e..672672680 100644
--- a/playwright/integration/examples/hovering-toolbar.test.ts
+++ b/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')
   })
 })
diff --git a/site/components.tsx b/site/components.tsx
index 210ae1ca2..01aaf03aa 100644
--- a/site/components.tsx
+++ b/site/components.tsx
@@ -149,6 +149,7 @@ export const Menu = React.forwardRef(
   ) => (
     <div
       {...props}
+      data-test-id="menu"
       ref={ref}
       className={cx(
         className,