diff --git a/tests/e2e/specs/content-helper/top-bar-icon.spec.ts b/tests/e2e/specs/content-helper/top-bar-icon.spec.ts index e952234edf..7785232833 100644 --- a/tests/e2e/specs/content-helper/top-bar-icon.spec.ts +++ b/tests/e2e/specs/content-helper/top-bar-icon.spec.ts @@ -13,7 +13,7 @@ import { import { VALID_API_SECRET, VALID_SITE_ID, - setSidebarPanelExpanded, + getSidebarPanelOrTabMessage, setSiteKeys, } from '../../utils'; @@ -152,13 +152,10 @@ class Utils { await setSiteKeys( page, siteId, apiSecret ); await this.admin.createNewPost(); - // Click the top bar icon and // Expand the Related Posts panel. + // Click the top bar icon. await page.getByRole( 'button', { name: 'Parse.ly' } ).click(); - setSidebarPanelExpanded( page, 'Related Posts', true ); - return await page.locator( - '.wp-parsely-content-helper div.components-panel__body.is-opened ' + selector - ).textContent() ?? ''; + return getSidebarPanelOrTabMessage( page, selector ); } /** diff --git a/tests/e2e/utils.ts b/tests/e2e/utils.ts index 0e030729b8..1b0ea548f1 100644 --- a/tests/e2e/utils.ts +++ b/tests/e2e/utils.ts @@ -50,15 +50,52 @@ export const getRelatedPostsMessage = async ( admin: Admin, selector: string = '.content-helper-error-message' ): Promise => { const page = admin.page; - const contentHelperMessageSelector = '.wp-parsely-content-helper div.components-panel__body.is-opened ' + selector; await admin.createNewPost(); - // Show the Content Intelligence Sidebar and expand the Related Posts panel. + // Show the Content Intelligence Sidebar. await page.getByRole( 'button', { name: 'Parse.ly' } ).click(); - await setSidebarPanelExpanded( page, 'Related Posts', true ); - return await page.locator( contentHelperMessageSelector ).textContent() ?? ''; + return getSidebarPanelOrTabMessage( page, selector ); +}; + +/** + * Gets a message from the PCI Editor Sidebar, expanding the Related Posts + * panel when available, or reading the message from the tab level otherwise. + * + * When credentials are present, the Related Posts panel is visible and the + * message is found inside the opened panel body. When credentials are absent, + * the Related Posts panel is not rendered and the message appears at the tab + * level instead. + * + * @since 3.22.1 + * + * @param {Page} page The Page object of the calling function. + * @param {string} selector The selector from which to extract the message. + * + * @return {Promise} The message returned. + */ +export const getSidebarPanelOrTabMessage = async ( + page: Page, selector: string = '.content-helper-error-message' +): Promise => { + // Wait for the sidebar content to render. + await page.locator( '.wp-parsely-content-helper' ).waitFor( { state: 'visible' } ); + + const relatedPostsButton = page.getByRole( 'button', { name: 'Related Posts' } ); + const isRelatedPostsVisible = await relatedPostsButton.waitFor( { state: 'visible', timeout: 3000 } ) + .then( () => true ) + .catch( () => false ); + + // When credentials are absent, the Related Posts panel is not shown and + // the message appears at the tab level. + if ( isRelatedPostsVisible ) { + await setSidebarPanelExpanded( page, 'Related Posts', true ); + return await page.locator( + '.wp-parsely-content-helper div.components-panel__body.is-opened ' + selector + ).textContent() ?? ''; + } + + return await page.locator( '.wp-parsely-content-helper ' + selector ).textContent() ?? ''; }; /**