Skip to content
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

Jump to bottom

Fix flaky tests in navigation.spec.js and other tests related to the Post Editor Template mode #51790

Merged
merged 2 commits into from
Jun 23, 2023
Merged

Fix flaky tests in navigation.spec.js and other tests related to the Post Editor Template mode #51790

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
3028364
Add delay between consecutive keystrokes
DAreRodz Jun 22, 2023
c0139fe
Fix post editor template mode tests
DAreRodz Jun 22, 2023
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
50 changes: 23 additions & 27 deletions test/e2e/specs/editor/blocks/navigation.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -971,7 +971,7 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
await editor.saveSiteEditorEntities();
} );

test( 'Overlay menu interactions', async ( { page } ) => {
test( 'Overlay menu interactions', async ( { page, pageUtils } ) => {
await page.goto( '/' );
const overlayMenuFirstElement = page.getByRole( 'link', {
name: 'Item 1',
Expand All @@ -993,11 +993,9 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
await expect( overlayMenuFirstElement ).toBeFocused();

// Test: overlay menu traps focus
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );
await pageUtils.pressKeys( 'Tab', { times: 2, delay: 50 } );
Copy link
Member

Choose a reason for hiding this comment

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

I love that it solves the issue and I have no problem merging this. I'm just wondering if there's an actual bug that makes us use delay, which is a last resort? It feels weird to me that Playwright has no problem tabbing through elements in the editor but is "too fast" in the frontend 🤔 . Maybe there's something obvious I'm missing though!

await expect( closeMenuButton ).toBeFocused();
await page.keyboard.press( 'Shift+Tab' );
await page.keyboard.press( 'Shift+Tab' );
await pageUtils.pressKeys( 'Shift+Tab', { times: 2, delay: 50 } );
await expect( overlayMenuFirstElement ).toBeFocused();

// Test: overlay menu closes on click on close menu button
Expand All @@ -1007,7 +1005,7 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
// Test: overlay menu closes on ESC key
await openMenuButton.click();
await expect( overlayMenuFirstElement ).toBeVisible();
await page.keyboard.press( 'Escape' );
await pageUtils.pressKeys( 'Escape' );
await expect( overlayMenuFirstElement ).toBeHidden();
await expect( openMenuButton ).toBeFocused();
} );
Expand Down Expand Up @@ -1044,7 +1042,7 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
await editor.saveSiteEditorEntities();
} );

test( 'Submenu interactions', async ( { page } ) => {
test( 'Submenu interactions', async ( { page, pageUtils } ) => {
await page.goto( '/' );
const simpleSubmenuButton = page.getByRole( 'button', {
name: 'Simple Submenu',
Expand Down Expand Up @@ -1090,39 +1088,36 @@ test.describe( 'Navigation block - Frontend interactivity', () => {

// Test: submenu opens on Enter keypress
await simpleSubmenuButton.focus();
await page.keyboard.press( 'Enter' );
await pageUtils.pressKeys( 'Enter' );
await expect( innerElement ).toBeVisible();

// Test: submenu closes on ESC key and focuses parent link
await page.keyboard.press( 'Escape' );
await pageUtils.pressKeys( 'Escape' );
await expect( innerElement ).toBeHidden();
await expect( simpleSubmenuButton ).toBeFocused();

// Test: submenu closes on tab outside submenu
await simpleSubmenuButton.focus();
await page.keyboard.press( 'Enter' );
await pageUtils.pressKeys( 'Enter' );
await expect( innerElement ).toBeVisible();
// Tab to first element.
await page.keyboard.press( 'Tab' );
// Tab outside the submenu.
await page.keyboard.press( 'Tab' );
// Tab to first element, then tab outside the submenu.
await pageUtils.pressKeys( 'Tab', { times: 2, delay: 50 } );
await expect( innerElement ).toBeHidden();
await expect( complexSubmenuButton ).toBeFocused();

// Test: only nested submenu closes on tab outside
await complexSubmenuButton.focus();
await page.keyboard.press( 'Enter' );
await pageUtils.pressKeys( 'Enter' );
await expect( firstLevelElement ).toBeVisible();
await expect( secondLevelElement ).toBeHidden();

await nestedSubmenuButton.click();
await expect( firstLevelElement ).toBeVisible();
await expect( secondLevelElement ).toBeVisible();

// Tab to nested submenu first element.
await page.keyboard.press( 'Tab' );
// Tab outside the nested submenu.
await page.keyboard.press( 'Tab' );
// Tab to nested submenu first element, then tab outside the nested
// submenu.
await pageUtils.pressKeys( 'Tab', { times: 2, delay: 50 } );
await expect( firstLevelElement ).toBeVisible();
await expect( secondLevelElement ).toBeHidden();
// Tab outside the complex submenu.
Expand Down Expand Up @@ -1217,7 +1212,10 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
await editor.saveSiteEditorEntities();
} );

test( 'page-list submenu user interactions', async ( { page } ) => {
test( 'page-list submenu user interactions', async ( {
page,
pageUtils,
} ) => {
await page.goto( '/' );
const submenuButton = page.getByRole( 'button', {
name: 'Parent Page',
Expand All @@ -1237,20 +1235,18 @@ test.describe( 'Navigation block - Frontend interactivity', () => {

// page-list submenu opens on enter keypress
await submenuButton.focus();
await page.keyboard.press( 'Enter' );
await pageUtils.pressKeys( 'Enter' );
await expect( innerElement ).toBeVisible();

// page-list submenu closes on ESC key and focuses submenu button
await page.keyboard.press( 'Escape' );
await pageUtils.pressKeys( 'Escape' );
await expect( innerElement ).toBeHidden();
await expect( submenuButton ).toBeFocused();

// page-list submenu closes on tab outside submenu
await page.keyboard.press( 'Enter' );
// Tab to first element.
await page.keyboard.press( 'Tab' );
// Tab outside the submenu.
await page.keyboard.press( 'Tab' );
await pageUtils.pressKeys( 'Enter', { delay: 50 } );
// Tab to first element, then tab outside the submenu.
await pageUtils.pressKeys( 'Tab', { times: 2, delay: 50 } );
await expect( innerElement ).toBeHidden();
} );
} );
Expand Down
1 change: 1 addition & 0 deletions test/e2e/specs/editor/various/post-editor-template-mode.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,7 @@ class PostEditorTemplateMode {

async createPostAndSaveDraft() {
await this.admin.createNewPost();
await this.editor.canvas.waitForLoadState();
// Create a random post.
await this.page.keyboard.type( 'Just an FSE Post' );
await this.page.keyboard.press( 'Enter' );
Expand Down
Loading