Skip to content

Fix flaky e2e tests, focus on Webkit and making sure the DOM is ready so events fire properly #2841

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mleray wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix flaky e2e tests, focus on Webkit and making sure the DOM is ready so events fire properly #2841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d70f87
Fix flaky e2e tests
mleray Dec 19, 2025
fb72b3f
Fix flakiness for webkit
Osong-Michael Dec 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 24 additions & 6 deletions tests/e2e/blocks/secondary-navigation.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}) => {
Expand All @@ -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});
Expand Down
61 changes: 44 additions & 17 deletions tests/e2e/tools/lib/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Copy link
Contributor

@mardelnet mardelnet Dec 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need the catch block?

Copy link
Contributor

@Osong-Michael Osong-Michael Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be nice to have some kind of way to see why the try block didn't run

if (process.env.CI) {
// eslint-disable-next-line no-console
console.warn(
'[closeBlockInserter] skipped:',
error?.message?.split('\n')[0]
);
}
}
};

Expand All @@ -46,29 +55,26 @@ const closeBlockInserter = async ({page}) => {
const searchAndInsertBlock = async ({page}, blockName, namespace = '') => {
const openSidebar = await page.getByRole('button', {name: 'Block Inserter', exact: true});
const searchInput = page.getByPlaceholder('Search');

if (await openSidebar.getAttribute('aria-expanded') === 'false') {
await openSidebar.dispatchEvent('click');
await openSidebar.click();
await expect(searchInput).toBeVisible();
}

await searchInput.fill('');
await searchInput.fill(blockName);

const blocksList = page.getByRole('listbox', {name: 'Blocks'});
await expect(blocksList).toBeVisible();

let blockOption;
let blockOption = page.getByRole('option', {name: blockName});

if (namespace) {
blockOption = blocksList.locator(
blockOption = page.locator(
`button.editor-block-list-item-${namespace.toLowerCase()}[role="option"]`
);
} else {
blockOption = blocksList.getByRole('option', {name: blockName});
}

await expect(blockOption).toBeVisible();
await blockOption.click();
if (!page.isClosed()) {
await page.evaluate(el => el.click(), await blockOption.elementHandle());
}
};

/**
Expand All @@ -87,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) => {
Copy link
Contributor

@mardelnet mardelnet Dec 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With the new changes, this function looks pretty generic to me, and it could be used for other blocks, not only headings or paragraphs.
Maybe it could be renamed, or at least, the new code you inserted could be extracted into another function to make it reusable.

Copy link
Contributor

@Osong-Michael Osong-Michael Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have a generic function to add blocks to pages, I am not sure but this is also pretty reusable if there is a use case, as for the changes, those are just hacks to ensure there is enough time to allow DOM update and stability before certain actions take place, different browsers render differently hence the reason for flakiness in some of our tests

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);
};

Expand Down
6 changes: 5 additions & 1 deletion tests/e2e/tools/lib/post.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'});
}

/**
Expand Down