From 4aa91738c7f89d3e47bba09a2ee6b8461655eac6 Mon Sep 17 00:00:00 2001 From: Brad Jorsch Date: Fri, 5 Jan 2024 14:28:16 -0500 Subject: [PATCH] Fix various E2E tests for recent Gutenberg changes * wordpress/gutenberg#56921 changed the label of the preview button from "Preview" to "View". * wordpress/gutenberg#56904 removed the setting of an `is-xxx-preview` class when using the in-page preview. Targeting the parent element (that has a static class) instead. * #86033 attempted to fix a test for another Gutenberg change, but the selector used there matches multiple elements in one of our tests and so causes it to fail. Adding `[role="tab"]` into the selector fixes that. --- .../components/editor-settings-sidebar-component.ts | 5 +++-- .../src/lib/components/editor-toolbar-component.ts | 10 +++++----- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/calypso-e2e/src/lib/components/editor-settings-sidebar-component.ts b/packages/calypso-e2e/src/lib/components/editor-settings-sidebar-component.ts index 1db03f830befb..cc94871044f1b 100644 --- a/packages/calypso-e2e/src/lib/components/editor-settings-sidebar-component.ts +++ b/packages/calypso-e2e/src/lib/components/editor-settings-sidebar-component.ts @@ -7,9 +7,10 @@ const panel = '[aria-label="Editor settings"]'; const selectors = { // Tab - tabButton: ( tabName: EditorSidebarTab ) => `${ panel } button:has-text("${ tabName }")`, + tabButton: ( tabName: EditorSidebarTab ) => + `${ panel } button[role="tab"]:has-text("${ tabName }")`, activeTabButton: ( tabName: EditorSidebarTab ) => - `${ panel } button[aria-selected="true"]:has-text("${ tabName }")`, + `${ panel } button[aria-selected="true"][role="tab"]:has-text("${ tabName }")`, // General section-related section: ( name: string ) => diff --git a/packages/calypso-e2e/src/lib/components/editor-toolbar-component.ts b/packages/calypso-e2e/src/lib/components/editor-toolbar-component.ts index 891572638dc76..716a750f171ff 100644 --- a/packages/calypso-e2e/src/lib/components/editor-toolbar-component.ts +++ b/packages/calypso-e2e/src/lib/components/editor-toolbar-component.ts @@ -15,10 +15,10 @@ const selectors = { switchToDraftButton: `${ panel } button.editor-post-switch-to-draft`, // Preview - previewButton: `${ panel } :text("Preview"):visible, [aria-label="Preview"]:visible`, + previewButton: `${ panel } :text("Preview"):visible, [aria-label="View"]:visible`, desktopPreviewMenuItem: ( target: EditorPreviewOptions ) => `button[role="menuitem"] span:text("${ target }")`, - previewPane: ( target: EditorPreviewOptions ) => `.is-${ target.toLowerCase() }-preview`, + previewPane: `.edit-post-visual-editor`, // Publish publishButton: ( state: 'disabled' | 'enabled' ) => { @@ -199,7 +199,7 @@ export class EditorToolbarComponent { await desktopPreviewMenuItemLocator.click(); // Verify the editor panel is resized and stable. - const desktopPreviewPaneLocator = editorParent.locator( selectors.previewPane( target ) ); + const desktopPreviewPaneLocator = editorParent.locator( selectors.previewPane ); await desktopPreviewPaneLocator.waitFor(); const elementHandle = await desktopPreviewPaneLocator.elementHandle(); await elementHandle?.waitForElementState( 'stable' ); @@ -214,7 +214,7 @@ export class EditorToolbarComponent { async openDesktopPreviewMenu(): Promise< void > { const editorParent = await this.editor.parent(); - const translatedButtonName = await this.translateFromPage( 'Preview' ); + const translatedButtonName = await this.translateFromPage( 'View' ); const previewButton = editorParent.getByRole( 'button', { name: translatedButtonName, exact: true, @@ -233,7 +233,7 @@ export class EditorToolbarComponent { async closeDesktopPreviewMenu(): Promise< void > { const editorParent = await this.editor.parent(); - const translatedButtonName = await this.translateFromPage( 'Preview' ); + const translatedButtonName = await this.translateFromPage( 'View' ); const previewButton = editorParent.getByRole( 'button', { name: translatedButtonName, exact: true,