Fix flakiness for webkit

- Added code to ensure DOM is ready in webkit

Author: Osong-Michael

tests/e2e/blocks/secondary-navigation.spec.js

@@ -41,11 +41,11 @@ test('Test Secondary Navigation block', async ({page, admin, editor}) => {
   await expect(page.locator('.EmptyMessage')).toBeVisible();
 
   // Add content (headings and paragraphs).
-  for (let index = 0; index < HEADINGS.length; index++) {
-    await addHeadingOrParagraph({page}, 'Heading', 'h2', index, HEADINGS[index]);
-    // For the paragraphs, we need to use index + 1 because there is a paragraph in the Page Header.
-    await addHeadingOrParagraph({page}, 'Paragraph', 'p', index + 1, PARAGRAPH_CONTENT);
-  };
+  for (const heading of HEADINGS) {
+    await addHeadingOrParagraph({page}, 'Heading', 'h2', heading);
+    await page.waitForTimeout(20);
+    await addHeadingOrParagraph({page}, 'Paragraph', 'p', PARAGRAPH_CONTENT);
+  }
 
   // Publish page.
   await publishPostAndVisit({page, editor});

tests/e2e/tools/lib/editor.js

@@ -27,10 +27,19 @@ async function openComponentPanel({page, editor}, panelTitle) {
  * @param {{Page}} page
  */
 const closeBlockInserter = async ({page}) => {
-  const inserter = page.locator('.editor-inserter-sidebar');
+  const getCloseButton = () => page.getByRole('button', {name: 'Close Block Inserter'});
 
-  if (await inserter.isVisible()) {
-    await page.keyboard.press('Escape');
+  try {
+    await expect(getCloseButton()).toBeVisible({timeout: 1000});
+    await getCloseButton().click();
+  } catch (error) {
+    if (process.env.CI) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        '[closeBlockInserter] skipped:',
+        error?.message?.split('\n')[0]
+      );
+    }
   }
 };
 
@@ -86,14 +95,35 @@ const searchAndInsertPattern = async ({page}, id) => {
  * @param {{Page}} page
  * @param {string} blockName
  * @param {string} blockTag
- * @param {number} number
  * @param {string} text
  */
-const addHeadingOrParagraph = async ({page}, blockName, blockTag, number, text) => {
+const addHeadingOrParagraph = async ({page}, blockName, blockTag, text) => {
   await searchAndInsertBlock({page}, blockName, blockName.toLowerCase());
-  const newBlock = page.getByRole('region', {name: 'Editor content'}).locator(blockTag).nth(number);
-  await expect(newBlock).toBeVisible();
+
+  const getNewBlock = () => page.getByRole('region', {name: 'Editor content'}).locator(`${blockTag}[contenteditable="true"]`).last();
+
+  // Wait for Gutenberg to finish inserting and the block to become editable
+  await page.waitForFunction(
+    newBlockTag => {
+      const region = document.querySelector('[role="region"][aria-label="Editor content"]');
+      if (!region) {return false;}
+      const blocks = Array.from(region.querySelectorAll(newBlockTag));
+      return blocks.some(b => b.isContentEditable && b.offsetParent !== null);
+    },
+    blockTag,
+    {timeout: 5000}
+  );
+
   await closeBlockInserter({page});
+
+  // Webkit hack to allow re-render
+  if (page.context().browser()?.browserType().name() === 'webkit') {
+    if (!page.isClosed()) {
+      await page.evaluate(() => new Promise(requestAnimationFrame));
+    }
+  }
+
+  const newBlock = getNewBlock();
   await newBlock.fill(text);
 };