test(pte): properly wait for PTE to be editable (#8068)

sanity-io · Dec 16, 2024 · 1dfcff8 · 1dfcff8
1 parent ea8bf4a
commit 1dfcff8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/RangeDecoration.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/RangeDecoration.spec.tsx
@@ -45,7 +45,12 @@ test.describe('Portable Text Input', () => {
     //   await page.waitForTimeout(360000)
     // })
     test(`Draws range decoration around our selection`, async ({mount, page}) => {
+      const {getFocusedPortableTextEditor} = testHelpers({page})
+
       await mount(<RangeDecorationStory document={document} decorationData={decorationData} />)
+
+      await getFocusedPortableTextEditor('field-body')
+
       await expect(page.getByTestId('range-decoration')).toHaveText('there')
     })
 

diff --git a/packages/sanity/playwright-ct/tests/utils/testHelpers.tsx b/packages/sanity/playwright-ct/tests/utils/testHelpers.tsx
@@ -73,11 +73,11 @@ export function testHelpers({page}: {page: PlaywrightTestArgs['page']}) {
       // Wait for field to get ready (without this tests fails randomly on Webkit)
       await page.locator(`[data-testid='${testId}']`).waitFor()
       const $pteField: Locator = page.getByTestId(testId)
+      await $pteField.locator('[contenteditable="true"]').waitFor()
+      const $pteTextbox = $pteField.locator('[contenteditable="true"]')
       // Activate the input if needed
       await activatePTInputOverlay($pteField)
       // Ensure focus on the contentEditable element of the Portable Text Editor
-      const $pteTextbox = $pteField.getByRole('textbox')
-      await $pteTextbox.isEditable()
       await $pteTextbox.focus()
       return $pteField
     },
@@ -93,11 +93,11 @@ export function testHelpers({page}: {page: PlaywrightTestArgs['page']}) {
       // Wait for field to get ready (without this tests fails randomly on Webkit)
       await page.locator(`[data-testid='${testId}']`).waitFor()
       const $pteField: Locator = page.getByTestId(testId)
+      await $pteField.locator('[contenteditable="true"]').waitFor()
+      const $pteTextbox = $pteField.locator('[contenteditable="true"]')
       // Activate the input if needed
       await activatePTInputOverlay($pteField)
       // Ensure focus on the contentEditable element of the Portable Text Editor
-      const $pteTextbox = $pteField.getByRole('textbox')
-      await $pteTextbox.isEditable()
       await $pteTextbox.focus()
       return $pteTextbox
     },