Fix flakiness for webkit

- Added code to ensure DOM is ready in webkit
- Ensure page is not closed before interacting with elements

Author: Osong-Michael

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

@@ -24,6 +24,16 @@ const HEADINGS = [
   'Donec tristique',
 ];
 
+async function waitForBlock({page, blockType}) {
+  await page.waitForFunction(
+    type => {
+      return !!document.querySelector(`[data-type="${type}"]`);
+    },
+    blockType,
+    {timeout: 40000}
+  );
+}
+
 test.useAdminLoggedIn();
 
 test('Test Secondary Navigation block', async ({page, admin, editor}) => {
@@ -37,15 +47,23 @@ test('Test Secondary Navigation block', async ({page, admin, editor}) => {
   await searchAndInsertBlock({page}, 'Secondary Navigation Menu');
   await closeBlockInserter({page});
 
+  await waitForBlock({
+    page,
+    blockType: 'planet4-blocks/secondary-navigation',
+  });
+
+  const blockRoot = page.locator('[data-type="planet4-blocks/secondary-navigation"]');
+
   // Make sure it displays the empty message at first.
-  await expect(page.locator('.EmptyMessage')).toBeVisible();
+  const emptyMessage = blockRoot.locator('.EmptyMessage');
+  await expect(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]
+      );
+    }
   }
 };
 
@@ -55,19 +64,17 @@ const searchAndInsertBlock = async ({page}, blockName, namespace = '') => {
   await searchInput.fill('');
   await searchInput.fill(blockName);
 
-  const blocksList = page.getByRole('listbox', {name: 'Blocks'});
-  await expect(blocksList).toBeVisible();
-
-  let blockOption = blocksList.getByRole('option', {name: blockName});
+  let blockOption = page.getByRole('option', {name: blockName});
 
   if (namespace) {
-    blockOption = blocksList.locator(
+    blockOption = page.locator(
       `button.editor-block-list-item-${namespace.toLowerCase()}[role="option"]`
     );
   }
 
-  await expect(blockOption).toBeVisible();
-  await blockOption.click();
+  if (!page.isClosed()) {
+    await page.evaluate(el => el.click(), await blockOption.elementHandle());
+  }
 };
 
 /**
@@ -86,14 +93,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);
 };
 

tests/e2e/tools/lib/post.js

@@ -51,7 +51,11 @@ async function updatePost({page}) {
 async function publishPostAndVisit({page, editor}) {
   const urlString = await publishPost({page, editor});
 
-  await page.goto(urlString);
+  if (page.isClosed()) {
+    page = await page.context().newPage();
+  }
+
+  await page.goto(urlString, {waitUntil: 'load'});
 }
 
 /**