Merge branch 'main' into main

Author: ddudenin

playwright/hover-card.spec.ts

@@ -4,7 +4,7 @@ test("test", async ({ page }) => {
   await page.goto("http://127.0.0.1:8080/component/?name=hover_card&");
   let tooltip = page.getByRole("tooltip");
   // tabbing to the trigger element should show the tooltip
-  await page.getByRole("heading", { name: "hover card" }).click();
+  await page.locator("#component-preview-frame").focus();
   await page.keyboard.press("Tab");
   await expect(tooltip).toBeVisible();
   // tabbing out of the trigger element should hide the tooltip

playwright/popover.spec.ts

@@ -1,27 +1,29 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from "@playwright/test";
 
-test('test', async ({ page }) => {
-  await page.goto('http://127.0.0.1:8080/component/?name=popover&');
-  const popoverButton = page.getByRole('button', { name: 'Show Popover' });
+test("test", async ({ page }) => {
+  await page.goto("http://127.0.0.1:8080/component/?name=popover&");
+  const popoverButton = page.getByRole("button", { name: "Show Popover" });
   await expect(popoverButton).toBeVisible();
   await popoverButton.click();
   // pressing the first input should be focused
-  const confirm = page.getByRole('button', { name: 'Confirm' });
-  const cancel = page.getByRole('button', { name: 'Cancel' });
+  const confirm = page.getByRole("button", { name: "Confirm" });
+  const cancel = page.getByRole("button", { name: "Cancel" });
   await expect(confirm).toBeFocused();
   // pressing tab again should focus the cancel button
-  await page.keyboard.press('Tab');
+  await page.keyboard.press("Tab");
   await expect(cancel).toBeFocused();
   // pressing tab again should focus the confirm button again
-  await page.keyboard.press('Tab');
+  await page.keyboard.press("Tab");
   await expect(confirm).toBeFocused();
   // pressing enter should close the popover
-  await page.keyboard.press('Enter');
+  await page.keyboard.press("Enter");
   // the item should show deleted under component-preview-frame
-  await expect(page.locator('.component-preview-frame')).toContainText('Item deleted!');
+  await expect(page.locator("#component-preview-frame")).toContainText(
+    "Item deleted!",
+  );
 
   // Open the popover again
   await popoverButton.click();
   // pressing escape should close the popover
-  await page.keyboard.press('Escape');
-});
+  await page.keyboard.press("Escape");
+});

playwright/tabs.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from "@playwright/test";
 test("test", async ({ page }) => {
   await page.goto("http://127.0.0.1:8080/component/?name=tabs&");
   let activeTab = page.locator(
-    ".component-preview-frame > .tabs > .tabs-content[data-state='active']"
+    "#component-preview-frame > .tabs > .tabs-content[data-state='active']",
   );
   let tab1Button = page.getByRole("tab", { name: "Tab 1" });
   let tab2Button = page.getByRole("tab", { name: "Tab 2" });

playwright/toolbar.spec.ts

@@ -8,7 +8,7 @@ test("test", async ({ page }) => {
   let alignLeft = page.getByRole("button", { name: "Align Left" });
   let alignCenter = page.getByRole("button", { name: "Align Center" });
   let alignRight = page.getByRole("button", { name: "Align Right" });
-  await page.getByRole("heading", { name: "Toolbar" }).click();
+  await page.locator("#component-preview-frame").focus();
   // Tabbing to the first button should focus it
   await page.keyboard.press("Tab");
   await expect(bold).toBeFocused();

playwright/tooltip.spec.ts

@@ -4,7 +4,7 @@ test("test", async ({ page }) => {
   await page.goto("http://127.0.0.1:8080/component/?name=tooltip&");
   let tooltip = page.getByRole("tooltip");
   // tabbing to the trigger element should show the tooltip
-  await page.getByRole("heading", { name: "tooltip" }).click();
+  await page.locator("#component-preview-frame").focus();
   await page.keyboard.press("Tab");
   await expect(tooltip).toBeVisible();
   // tabbing out of the trigger element should hide the tooltip