chore: bump playwright (#13947)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Chores**
* Updated Playwright test tooling to 1.58.2 across the repository and
test packages.

* **Tests**
* Improved end-to-end robustness: replaced fragile timing/coordinate
logic with element-based interactions, added polling/retry checks for
flaky asserts and async state, and simplified input/rename flows to
reduce test flakiness.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

tests/affine-cloud-copilot/package.json

@@ -7,7 +7,7 @@
   },
   "devDependencies": {
     "@affine-test/kit": "workspace:*",
-    "@playwright/test": "=1.52.0"
+    "@playwright/test": "=1.58.2"
   },
   "version": "0.26.3"
 }

tests/affine-cloud/package.json

@@ -7,7 +7,7 @@
   },
   "devDependencies": {
     "@affine-test/kit": "workspace:*",
-    "@playwright/test": "=1.52.0"
+    "@playwright/test": "=1.58.2"
   },
   "version": "0.26.3"
 }

tests/affine-desktop-cloud/package.json

@@ -7,7 +7,7 @@
   },
   "devDependencies": {
     "@affine-test/kit": "workspace:*",
-    "@playwright/test": "=1.52.0"
+    "@playwright/test": "=1.58.2"
   },
   "version": "0.26.3"
 }

tests/affine-desktop/package.json

@@ -8,10 +8,10 @@
   "devDependencies": {
     "@affine-test/kit": "workspace:*",
     "@affine/electron-api": "workspace:*",
-    "@playwright/test": "=1.52.0",
+    "@playwright/test": "=1.58.2",
     "@types/fs-extra": "^11.0.4",
     "fs-extra": "^11.2.0",
-    "playwright": "=1.52.0"
+    "playwright": "=1.58.2"
   },
   "version": "0.26.3"
 }

tests/affine-local/e2e/quick-search.spec.ts

@@ -417,12 +417,19 @@ test('Create a new page with special characters in the title and search for this
   await clickNewPageButton(page);
   await getBlockSuiteEditorTitle(page).click();
   await getBlockSuiteEditorTitle(page).fill(specialTitle);
+  await page.keyboard.press('Enter');
+  await expect(getBlockSuiteEditorTitle(page)).toContainText(specialTitle);
   await openQuickSearchByShortcut(page);
 
   await insertInputText(page, specialTitle);
-  await page.waitForTimeout(1000);
-
-  await assertResultList(page, [specialTitle, specialTitle]);
+  await expect
+    .poll(async () => {
+      const labels = await page
+        .locator('[cmdk-item] [data-testid=cmdk-label]')
+        .allInnerTexts();
+      return labels.some(label => label.split('\n').includes(specialTitle));
+    })
+    .toBe(true);
   await page.keyboard.press('Enter');
   await page.waitForTimeout(1000);
   await assertTitle(page, specialTitle);

tests/affine-local/package.json

@@ -9,7 +9,7 @@
     "@affine-test/kit": "workspace:*",
     "@affine-tools/cli": "workspace:*",
     "@affine-tools/utils": "workspace:*",
-    "@playwright/test": "=1.52.0",
+    "@playwright/test": "=1.58.2",
     "webpack": "^5.102.1"
   },
   "version": "0.26.3"

tests/affine-mobile/package.json

@@ -7,7 +7,7 @@
   },
   "devDependencies": {
     "@affine-test/kit": "workspace:*",
-    "@playwright/test": "=1.52.0"
+    "@playwright/test": "=1.58.2"
   },
   "version": "0.26.3"
 }

tests/blocksuite/e2e/attachment.spec.ts

@@ -15,7 +15,6 @@ import {
   pressShiftTab,
   pressTab,
   redoByKeyboard,
-  SHORT_KEY,
   type,
   undoByKeyboard,
 } from './utils/actions/keyboard.js';
@@ -113,11 +112,13 @@ function getAttachment(page: Page) {
       await attachment.click();
       await expect(toolbar).toBeVisible();
       await renameBtn.click();
-      await page.keyboard.press(`${SHORT_KEY}+a`, { delay: 50 });
-      await pressBackspace(page);
-      await type(page, newName);
+      await expect(renameInput).toBeVisible();
+      await renameInput.fill(newName);
       await pressEnter(page);
-      expect(await getName()).toContain(newName);
+      await expect(renameInput).not.toBeVisible();
+      if (newName.length > 0) {
+        await expect.poll(getName).toContain(newName);
+      }
     },
 
     // external
@@ -215,11 +216,11 @@ test('should rename attachment works', async ({ page }) => {
   await expect(renameInput).not.toBeVisible();
 
   await rename('new-name');
-  expect(await getName()).toBe('new-name.png');
+  await expect.poll(getName).toBe('new-name.png');
   await rename('');
-  expect(await getName()).toBe('.png');
+  await expect.poll(getName).toBe('.png');
   await rename('abc');
-  expect(await getName()).toBe('abc');
+  await expect.poll(getName).toBe('abc');
 });
 
 test('should turn attachment to image works', async ({ page }, testInfo) => {

tests/blocksuite/e2e/cross-platform/inline/inline-editor.spec.ts

@@ -143,17 +143,20 @@ async function assertSelection(
   rangeIndex: number,
   rangeLength = 0
 ) {
-  const actual = await page.evaluate(
-    ([richTextIndex]) => {
-      const richText =
-        document?.querySelectorAll('test-rich-text')[richTextIndex];
-      // @ts-expect-error getInlineRange
-      const inlineEditor = richText.inlineEditor;
-      return inlineEditor?.getInlineRange();
-    },
-    [richTextIndex]
-  );
-  expect(actual).toEqual({ index: rangeIndex, length: rangeLength });
+  await expect
+    .poll(async () => {
+      return page.evaluate(
+        ([richTextIndex]) => {
+          const richText =
+            document?.querySelectorAll('test-rich-text')[richTextIndex];
+          // @ts-expect-error getInlineRange
+          const inlineEditor = richText.inlineEditor;
+          return inlineEditor?.getInlineRange();
+        },
+        [richTextIndex]
+      );
+    })
+    .toEqual({ index: rangeIndex, length: rangeLength });
 }
 
 test('basic input', async ({ page, browserName }) => {
@@ -1113,16 +1116,14 @@ test('embed', async ({ page }) => {
   await assertSelection(page, 0, 3, 1);
 
   // try to update cursor position and select embed element by clicking embed element
-  let rect = await getInlineRangeIndexRect(page, [0, 1]);
-  await page.mouse.click(rect.x + 3, rect.y);
+  const embeds = page.locator('[data-v-embed="true"]');
+  await embeds.nth(0).click();
   await assertSelection(page, 0, 1, 1);
 
-  rect = await getInlineRangeIndexRect(page, [0, 2]);
-  await page.mouse.click(rect.x + 3, rect.y);
+  await embeds.nth(1).click();
   await assertSelection(page, 0, 2, 1);
 
-  rect = await getInlineRangeIndexRect(page, [0, 3]);
-  await page.mouse.click(rect.x + 3, rect.y);
+  await embeds.nth(2).click();
   await assertSelection(page, 0, 3, 1);
 });
 

tests/blocksuite/e2e/utils/actions/edgeless.ts

@@ -820,10 +820,10 @@ export async function updateExistedBrushElementSize(
   page: Page,
   nthSizeButton: 1 | 2 | 3 | 4 | 5 | 6
 ) {
-  // get the nth brush size button
-  const btn = page.locator(
-    `edgeless-line-width-panel .point-button:nth-child(${nthSizeButton})`
-  );
+  // pick from the visible panel to avoid strict-mode collisions from hidden/duplicate toolbars
+  const btn = page
+    .locator('edgeless-line-width-panel:visible .point-button')
+    .nth(nthSizeButton - 1);
 
   await btn.click();
 }

tests/blocksuite/e2e/utils/actions/misc.ts

@@ -1015,31 +1015,63 @@ export async function getIndexCoordinate(
   [richTextIndex, vIndex]: [number, number],
   coordOffSet: { x: number; y: number } = { x: 0, y: 0 }
 ) {
-  const coord = await page.evaluate(
-    ({ richTextIndex, vIndex, coordOffSet, currentEditorIndex }) => {
-      const editorHost =
-        document.querySelectorAll('editor-host')[currentEditorIndex];
-      const richText = editorHost.querySelectorAll('rich-text')[
-        richTextIndex
-      ] as any;
-      const domRange = richText.inlineEditor.toDomRange({
-        index: vIndex,
-        length: 0,
-      });
-      const pointBound = domRange.getBoundingClientRect();
-      return {
-        x: pointBound.left + coordOffSet.x,
-        y: pointBound.top + pointBound.height / 2 + coordOffSet.y,
-      };
-    },
-    {
-      richTextIndex,
-      vIndex,
-      coordOffSet,
-      currentEditorIndex,
+  for (let attempt = 0; attempt < 20; attempt++) {
+    const coord = await page.evaluate(
+      ({ richTextIndex, vIndex, coordOffSet, currentEditorIndex }) => {
+        const editorHost =
+          document.querySelectorAll('editor-host')[currentEditorIndex];
+        const richTexts = Array.from(
+          editorHost?.querySelectorAll('rich-text') ?? []
+        );
+        if (!richTexts.length) {
+          return null;
+        }
+        const richText = richTexts[
+          Math.min(richTextIndex, richTexts.length - 1)
+        ] as any;
+        const inlineEditor = richText?.inlineEditor;
+        if (!inlineEditor) {
+          return null;
+        }
+        const clampedIndex = Math.max(
+          0,
+          Math.min(vIndex, inlineEditor.yTextLength ?? vIndex)
+        );
+        const domRange = inlineEditor.toDomRange({
+          index: clampedIndex,
+          length: 0,
+        });
+        if (!domRange) {
+          return null;
+        }
+        const pointBound = domRange.getBoundingClientRect();
+        if (
+          !Number.isFinite(pointBound.left) ||
+          !Number.isFinite(pointBound.top)
+        ) {
+          return null;
+        }
+        return {
+          x: pointBound.left + coordOffSet.x,
+          y: pointBound.top + pointBound.height / 2 + coordOffSet.y,
+        };
+      },
+      {
+        richTextIndex,
+        vIndex,
+        coordOffSet,
+        currentEditorIndex,
+      }
+    );
+    if (coord) {
+      return coord;
     }
+    await page.waitForTimeout(50);
+  }
+
+  throw new Error(
+    `Failed to get index coordinate: richTextIndex=${richTextIndex}, vIndex=${vIndex}`
   );
-  return coord;
 }
 
 export function inlineEditorInnerTextToString(innerText: string): string {

tests/blocksuite/e2e/utils/asserts.ts

@@ -159,17 +159,20 @@ export async function assertTextContain(page: Page, text: string, i = 0) {
 }
 
 export async function assertRichTexts(page: Page, texts: string[]) {
-  const actualTexts = await page.evaluate(() => {
-    const editorHost = document.querySelector('editor-host');
-    const richTexts = Array.from(
-      editorHost?.querySelectorAll<RichText>('rich-text') ?? []
-    );
-    return richTexts.map(richText => {
-      const editor = richText.inlineEditor as AffineInlineEditor;
-      return editor.yText.toString();
-    });
-  });
-  expect(actualTexts).toEqual(texts);
+  await expect
+    .poll(async () => {
+      return page.evaluate(() => {
+        const editorHost = document.querySelector('editor-host');
+        const richTexts = Array.from(
+          editorHost?.querySelectorAll<RichText>('rich-text') ?? []
+        );
+        return richTexts.map(richText => {
+          const editor = richText.inlineEditor as AffineInlineEditor;
+          return editor.yText.toString();
+        });
+      });
+    })
+    .toEqual(texts);
 }
 
 export async function assertEdgelessCanvasText(page: Page, text: string) {
@@ -274,16 +277,20 @@ export async function assertRichTextInlineRange(
   rangeIndex: number,
   rangeLength = 0
 ) {
-  const actual = await page.evaluate(
-    ([richTextIndex]) => {
-      const editorHost = document.querySelector('editor-host');
-      const richText = editorHost?.querySelectorAll('rich-text')[richTextIndex];
-      const inlineEditor = richText?.inlineEditor;
-      return inlineEditor?.getInlineRange();
-    },
-    [richTextIndex]
-  );
-  expect(actual).toEqual({ index: rangeIndex, length: rangeLength });
+  await expect
+    .poll(async () => {
+      return page.evaluate(
+        ([richTextIndex]) => {
+          const editorHost = document.querySelector('editor-host');
+          const richText =
+            editorHost?.querySelectorAll('rich-text')[richTextIndex];
+          const inlineEditor = richText?.inlineEditor;
+          return inlineEditor?.getInlineRange();
+        },
+        [richTextIndex]
+      );
+    })
+    .toEqual({ index: rangeIndex, length: rangeLength });
 }
 
 export async function assertNativeSelectionRangeCount(
@@ -1137,15 +1144,18 @@ export async function assertNoteSequence(page: Page, expected: string) {
 }
 
 export async function assertBlockSelections(page: Page, paths: string[]) {
-  const selections = await page.evaluate(() => {
-    const host = document.querySelector<EditorHost>('editor-host');
-    if (!host) {
-      throw new Error('editor-host host not found');
-    }
-    return host.selection.value.filter(b => b.type === 'block');
-  });
-  const actualPaths = selections.map(selection => selection.blockId);
-  expect(actualPaths).toEqual(paths);
+  await expect
+    .poll(async () => {
+      const selections = await page.evaluate(() => {
+        const host = document.querySelector<EditorHost>('editor-host');
+        if (!host) {
+          throw new Error('editor-host host not found');
+        }
+        return host.selection.value.filter(b => b.type === 'block');
+      });
+      return selections.map(selection => selection.blockId);
+    })
+    .toEqual(paths);
 }
 
 export async function assertTextSelection(

tests/blocksuite/package.json

@@ -9,7 +9,7 @@
     "@affine-test/kit": "workspace:*",
     "@blocksuite/affine": "workspace:*",
     "@blocksuite/integration-test": "workspace:*",
-    "@playwright/test": "=1.52.0",
+    "@playwright/test": "=1.58.2",
     "@toeverything/theme": "^1.1.23",
     "json-stable-stringify": "^1.2.1",
     "rxjs": "^7.8.2"

tests/kit/package.json

@@ -14,7 +14,7 @@
     "@affine-tools/utils": "workspace:*",
     "@blocksuite/affine": "workspace:*",
     "@node-rs/argon2": "^2.0.2",
-    "@playwright/test": "=1.52.0",
+    "@playwright/test": "=1.58.2",
     "@toeverything/infra": "workspace:*",
     "express": "^5.0.0",
     "http-proxy-middleware": "^3.0.3"