diff --git a/packages/e2e-test-utils/src/find-sidebar-panel-toggle-button-with-title.js b/packages/e2e-test-utils/src/find-sidebar-panel-toggle-button-with-title.js new file mode 100644 index 00000000000000..5dfbdcfd553416 --- /dev/null +++ b/packages/e2e-test-utils/src/find-sidebar-panel-toggle-button-with-title.js @@ -0,0 +1,15 @@ +/** + * External dependencies + */ +import { first } from 'lodash'; + +/** + * Finds a sidebar panel with the provided title. + * + * @param {string} panelTitle The name of sidebar panel. + * + * @return {?ElementHandle} Object that represents an in-page DOM element. + */ +export async function findSidebarPanelToggleButtonWithTitle( panelTitle ) { + return first( await page.$x( `//div[@class="edit-post-sidebar"]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ panelTitle }")]` ) ); +} diff --git a/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js b/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js index fae3f33b53910a..ff60dca5f00782 100644 --- a/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js +++ b/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js @@ -4,12 +4,15 @@ import { first } from 'lodash'; /** - * Finds a sidebar panel with the provided title. + * Finds the button responsible for toggling the sidebar panel with the provided title. * * @param {string} panelTitle The name of sidebar panel. * * @return {?ElementHandle} Object that represents an in-page DOM element. */ export async function findSidebarPanelWithTitle( panelTitle ) { - return first( await page.$x( `//div[@class="edit-post-sidebar"]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ panelTitle }")]` ) ); + const classSelect = ( className ) => `[contains(concat(" ", @class, " "), " ${ className } ")]`; + const buttonSelector = `//div${ classSelect( 'edit-post-sidebar' ) }//button${ classSelect( 'components-button' ) }${ classSelect( 'components-panel__body-toggle' ) }[contains(text(),"${ panelTitle }")]`; + const panelSelector = `${ buttonSelector }/ancestor::*[contains(concat(" ", @class, " "), " components-panel__body ")]`; + return first( await await page.$x( panelSelector ) ); } diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js index 5534c981f46a9e..6f48ab320a206b 100644 --- a/packages/e2e-test-utils/src/index.js +++ b/packages/e2e-test-utils/src/index.js @@ -12,6 +12,7 @@ export { disablePrePublishChecks } from './disable-pre-publish-checks'; export { enablePageDialogAccept } from './enable-page-dialog-accept'; export { enablePrePublishChecks } from './enable-pre-publish-checks'; export { ensureSidebarOpened } from './ensure-sidebar-opened'; +export { findSidebarPanelToggleButtonWithTitle } from './find-sidebar-panel-toggle-button-with-title'; export { findSidebarPanelWithTitle } from './find-sidebar-panel-with-title'; export { getAllBlocks } from './get-all-blocks'; export { getAvailableBlockTransforms } from './get-available-block-transforms'; diff --git a/packages/e2e-tests/specs/new-post-default-content.test.js b/packages/e2e-tests/specs/new-post-default-content.test.js index 7460b2aaeac319..3fdad97d46f64e 100644 --- a/packages/e2e-tests/specs/new-post-default-content.test.js +++ b/packages/e2e-tests/specs/new-post-default-content.test.js @@ -5,7 +5,7 @@ import { activatePlugin, createNewPost, deactivatePlugin, - findSidebarPanelWithTitle, + findSidebarPanelToggleButtonWithTitle, getEditedPostContent, openDocumentSettingsSidebar, } from '@wordpress/e2e-test-utils'; @@ -33,7 +33,7 @@ describe( 'new editor filtered state', () => { // open the sidebar, we want to see the excerpt. await openDocumentSettingsSidebar(); - const excerptButton = await findSidebarPanelWithTitle( 'Excerpt' ); + const excerptButton = await findSidebarPanelToggleButtonWithTitle( 'Excerpt' ); if ( excerptButton ) { await excerptButton.click( 'button' ); } diff --git a/packages/e2e-tests/specs/plugins/meta-boxes.test.js b/packages/e2e-tests/specs/plugins/meta-boxes.test.js index 94a0c04c81bcb7..b2e7649f53b57b 100644 --- a/packages/e2e-tests/specs/plugins/meta-boxes.test.js +++ b/packages/e2e-tests/specs/plugins/meta-boxes.test.js @@ -5,7 +5,7 @@ import { activatePlugin, createNewPost, deactivatePlugin, - findSidebarPanelWithTitle, + findSidebarPanelToggleButtonWithTitle, insertBlock, openDocumentSettingsSidebar, publishPost, @@ -98,7 +98,7 @@ describe( 'Meta boxes', () => { // Open the excerpt panel await openDocumentSettingsSidebar(); - const excerptButton = await findSidebarPanelWithTitle( 'Excerpt' ); + const excerptButton = await findSidebarPanelToggleButtonWithTitle( 'Excerpt' ); if ( excerptButton ) { await excerptButton.click( 'button' ); } diff --git a/packages/e2e-tests/specs/taxonomies.test.js b/packages/e2e-tests/specs/taxonomies.test.js index 1470266cde7eef..087da816f4d6a2 100644 --- a/packages/e2e-tests/specs/taxonomies.test.js +++ b/packages/e2e-tests/specs/taxonomies.test.js @@ -38,15 +38,13 @@ describe( 'Taxonomies', () => { const getCurrentTags = async () => { const tagsPanel = await findSidebarPanelWithTitle( 'Tags' ); - return tagsPanel.$eval( '*', ( node ) => { - return Array.from( - node.parentElement.parentElement.parentElement.querySelectorAll( - '.components-form-token-field__token-text span:not(.screen-reader-text)' - ) - ).map( ( spanNode ) => { - return spanNode.innerText; + return page.evaluate( ( node ) => { + return Array.from( node.querySelectorAll( + '.components-form-token-field__token-text span:not(.screen-reader-text)' + ) ).map( ( field ) => { + return field.innerText; } ); - } ); + }, tagsPanel ); }; it( 'should be able to open the categories panel and create a new main category if the user has the right capabilities', async () => { @@ -113,9 +111,11 @@ describe( 'Taxonomies', () => { await openDocumentSettingsSidebar(); const tagsPanel = await findSidebarPanelWithTitle( 'Tags' ); + + //expect( await page.evaluate( ( el ) => el.outerHTML, tagsPanel ) ).toEqual( 'tag1 ok' ); expect( tagsPanel ).toBeDefined(); - // If the user has no permission to add a new category finish the test. + // If the user has no permission to add a new tag finish the test. if ( ! ( await canCreatTermInTaxonomy( 'tags' ) ) ) { return; } @@ -123,25 +123,25 @@ describe( 'Taxonomies', () => { // Open the tags panel. await tagsPanel.click( 'button' ); - const tagInput = await page.$( '.components-form-token-field__input' ); + const tagInput = await tagsPanel.$( '.components-form-token-field__input' ); // Click the tag input field. await tagInput.click(); // Type the category name in the field. - await tagInput.type( 'tag1 ok' ); + await tagInput.type( 'tag1' ); // Press enter to create a new tag. await tagInput.press( 'Enter' ); - page.waitForSelector( '.components-form-token-field__token' ); + await page.waitForSelector( '.components-form-token-field__token' ); // Get an array with the tags of the post. let tags = await getCurrentTags(); // The post should only contain the tag we added. expect( tags ).toHaveLength( 1 ); - expect( tags[ 0 ] ).toEqual( 'tag1 ok' ); + expect( tags[ 0 ] ).toEqual( 'tag1' ); // Type something in the title so we can publish the post. await page.type( '.editor-post-title__input', 'Hello World' ); @@ -159,6 +159,6 @@ describe( 'Taxonomies', () => { // The tag selection was persisted after the publish process. expect( tags ).toHaveLength( 1 ); - expect( tags[ 0 ] ).toEqual( 'tag1 ok' ); + expect( tags[ 0 ] ).toEqual( 'tag1' ); } ); } );