E2E: Fix tracking specs against GB v14.8.x (#71572)

* Fix tracking specs against GB v14.8.x

* Fix editor-tracking__other-block-events.ts

* Fix specs/editor-tracking/editor-tracking__global-styles-events.ts

* Remove accidental skip

* More global styles tracking fixes

* Remove "Details" popover test & related actions
The "Details" popover doesn't exist since v14.5. See WordPress/gutenberg#44788

* Fix editor-tracking__toolbar-events.ts

* Fix editor-tracking__document-actions-events.ts

* Fix editor-tracking__fse-template-events.ts

* Fix editor-tracking__pattern-events.ts

* Fix padding setting in editor-tracking__global-styles-events.ts

* Remove accidental page.close

* Update block names for template conversion

* Update template part deletion for new site editor

* Move page closing to a dedicated step
As per #71572 (comment)

* Update test to match current theme (twenty-twenty-two)

* Skip the whole block since currently tracking is not tested there

* Redesign spec around 2022 theme

Co-authored-by: dpasque <dan.speckhard.pasque@automattic.com>

packages/calypso-e2e/src/lib/components/editor-dimensions-component.ts

@@ -63,8 +63,6 @@ export class EditorDimensionsComponent {
 	 * @param {number} padding Padding dimension to select.
 	 */
 	private async setPadding( padding: number ): Promise< void > {
-		const locator = this.editor.locator( selectors.paddingInput );
-		await locator.fill( padding.toString() );
-		await locator.press( 'Enter' ); // Confirm rounding.
+		await this.editor.getByLabel( 'All sides padding' ).fill( padding.toString() );
 	}
 }

packages/calypso-e2e/src/lib/components/editor-inline-block-inserter-component.ts

@@ -3,10 +3,6 @@ import { Page, Locator } from 'playwright';
 const popoverParentSelector = '.block-editor-inserter__quick-inserter';
 const selectors = {
 	searchInput: `${ popoverParentSelector } input[type=search]`,
-	blockResultItem: ( blockName: string ) =>
-		`${ popoverParentSelector } [aria-label=Blocks] button:has-text("${ blockName }")`,
-	patternResultItem: ( patternName: string ) =>
-		`${ popoverParentSelector } [aria-label="Block Patterns"] [aria-label="${ patternName }"]`,
 };
 
 /**
@@ -40,24 +36,10 @@ export class EditorInlineBlockInserterComponent {
 	/**
 	 * Selects the maching result from the block inserter.
 	 *
-	 * By default, this method considers only the Block-type results
-	 * (including Resuable blocks).
-	 * In order to select from Pattern-type results, set the `type`
-	 * optional flag in the parameter to `'pattern'`.
-	 *
-	 * Where mulltiple matches exist (eg. due to partial matching), the first result will be chosen.
+	 * Where mulltiple matches exist (eg. due to partial matching), the first
+	 * result will be chosen.
 	 */
-	async selectBlockInserterResult(
-		name: string,
-		{ type = 'block' }: { type?: 'block' | 'pattern' } = {}
-	): Promise< void > {
-		let locator;
-
-		if ( type === 'pattern' ) {
-			locator = this.editor.locator( selectors.patternResultItem( name ) );
-		} else {
-			locator = this.editor.locator( selectors.blockResultItem( name ) );
-		}
-		await locator.first().click();
+	async selectBlockInserterResult( name: string ): Promise< void > {
+		await this.editor.getByRole( 'option', { name, exact: true } ).first().click();
 	}
 }

packages/calypso-e2e/src/lib/components/editor-site-styles-component.ts

@@ -12,9 +12,9 @@ const parentSelector = '.edit-site-global-styles-sidebar';
 const selectors = {
 	menuButton: ( buttonName: string ) =>
 		`${ parentSelector } button.components-navigator-button:has-text("${ buttonName }")`,
-	closeSidebarButton: 'button[aria-label="Close global styles sidebar"]:visible',
+	closeSidebarButton: 'button[aria-expanded="true"][aria-label="Styles"]',
 	backButton: `${ parentSelector } button[aria-label="Navigate to the previous view"]`,
-	moreActionsMenuButton: `${ parentSelector } button[aria-label="More Global Styles Actions"]`,
+	moreActionsMenuButton: `${ parentSelector } button[aria-label="More Styles actions"]`,
 };
 
 export type ColorLocation = 'Background' | 'Text' | 'Links';

packages/calypso-e2e/src/lib/components/editor-toolbar-component.ts

@@ -3,7 +3,7 @@ import envVariables from '../../env-variables';
 import { translateFromPage } from '../utils';
 import type { EditorPreviewOptions } from './types';
 
-const panel = 'div.interface-interface-skeleton__header';
+const panel = '.interface-navigable-region[class*="header"]';
 const settingsButtonLabel = 'Settings';
 const moreOptionsLabel = 'Options';
 const selectors = {
@@ -27,8 +27,8 @@ const selectors = {
 		return `${ panel } button.editor-post-publish-button__button[aria-disabled="${ buttonState }"]`;
 	},
 
-	// List view
-	listViewButton: `${ panel } button[aria-label="List View"]`,
+	// Document overview
+	documentOverviewButton: `${ panel } button[aria-label="Document Overview"]`,
 
 	// Details popover
 	detailsButton: `${ panel } button[aria-label="Details"]`,
@@ -312,11 +312,11 @@ export class EditorToolbarComponent {
 			return;
 		}
 
-		if ( await this.targetIsOpen( selectors.listViewButton ) ) {
+		if ( await this.targetIsOpen( selectors.documentOverviewButton ) ) {
 			return;
 		}
 
-		const locator = this.editor.locator( selectors.listViewButton );
+		const locator = this.editor.locator( selectors.documentOverviewButton );
 		await locator.click();
 	}
 
@@ -329,30 +329,11 @@ export class EditorToolbarComponent {
 			return;
 		}
 
-		if ( ! ( await this.targetIsOpen( selectors.listViewButton ) ) ) {
+		if ( ! ( await this.targetIsOpen( selectors.documentOverviewButton ) ) ) {
 			return;
 		}
 
-		const locator = this.editor.locator( selectors.listViewButton );
-		await locator.click();
-	}
-
-	/* Details popover */
-
-	/**
-	 * Opens the post details popover (i.e. number of character, words, etc.).
-	 */
-	async openDetailsPopover(): Promise< void > {
-		if ( envVariables.VIEWPORT_NAME === 'mobile' ) {
-			// Details are not available on mobile!
-			return;
-		}
-
-		if ( await this.targetIsOpen( selectors.detailsButton ) ) {
-			return;
-		}
-
-		const locator = this.editor.locator( selectors.detailsButton );
+		const locator = this.editor.locator( selectors.documentOverviewButton );
 		await locator.click();
 	}
 

packages/calypso-e2e/src/lib/components/editor-typography-component.ts

@@ -1,12 +1,5 @@
 import { Locator, Page } from 'playwright';
 
-const parentSelector = '[class*="typography"]'; // Support block and site.
-const selectors = {
-	appearanceDropdownButton: `${ parentSelector } button[aria-label="Appearance"]`,
-	appearanceSelection: ( appearance: FontAppearance ) =>
-		`${ parentSelector } .components-font-appearance-control [role=option]:text-is("${ appearance }")`,
-};
-
 type FontSize = 'Small' | 'Medium' | 'Large' | 'Extra Large'; // expand as needed.
 type FontAppearance = 'Default' | 'Thin' | 'Regular' | 'Medium'; // expand as needed.
 
@@ -72,11 +65,16 @@ export class EditorTypographyComponent {
 	private async setAppearance( fontAppearance: FontAppearance ): Promise< void > {
 		// In the future, if we're in the block context, we'll have to add this field first.
 
-		// It's not a real select input. It's a button and a custom control.
-		const dropdownButtonLocator = this.editor.locator( selectors.appearanceDropdownButton );
+		const dropdownButtonLocator = this.editor.getByRole( 'button', {
+			name: 'Appearance',
+			exact: true,
+		} );
 		await dropdownButtonLocator.click();
 
-		const selectionLocator = this.editor.locator( selectors.appearanceSelection( fontAppearance ) );
+		const selectionLocator = this.editor.getByRole( 'option', {
+			name: fontAppearance,
+			exact: true,
+		} );
 		await selectionLocator.click();
 	}
 }

packages/calypso-e2e/src/lib/components/full-side-editor-nav-sidebar-component.ts

@@ -1,9 +1,9 @@
 import { Page, Locator } from 'playwright';
 
-const panel = '.edit-site-navigation-panel';
 const selectors = {
-	exitLink: `${ panel } a.edit-site-navigation-panel__back-to-dashboard`,
-	templatePartsLink: `${ panel } a:has-text("Template Parts")`,
+	exitButton: `a[aria-label="Go back to the dashboard"]`,
+	templatePartsItem: 'button[id="/template-parts"]',
+	manageAllTemplatePartsItem: 'button:text("Manage all template parts")',
 };
 
 /**
@@ -26,15 +26,15 @@ export class FullSiteEditorNavSidebarComponent {
 	 * Clicks the Dashboard menu link to exit the editor.
 	 */
 	async exit(): Promise< void > {
-		const exitLinkLocator = this.editor.locator( selectors.exitLink );
-		await exitLinkLocator.click();
+		const exitButtonLocator = this.editor.locator( selectors.exitButton );
+		await exitButtonLocator.click();
 	}
 
 	/**
 	 * Clicks sidebar link to open the template parts list.
 	 */
-	async navigateToTemplateParts(): Promise< void > {
-		const locator = this.editor.locator( selectors.templatePartsLink );
-		await locator.click();
+	async navigateToTemplatePartsManager(): Promise< void > {
+		await this.editor.locator( selectors.templatePartsItem ).click();
+		await this.editor.locator( selectors.manageAllTemplatePartsItem ).click();
 	}
 }

packages/calypso-e2e/src/lib/components/template-part-list-component.ts

@@ -3,9 +3,9 @@ import { Locator, Page } from 'playwright';
 const parentSelector = '[aria-label="Template parts list - Content"]';
 
 const selectors = {
-	deleteButton: `${ parentSelector } button:has-text("Delete")`,
+	deleteButton: '[aria-label="Actions"] button :text("Delete")',
 	actionsButtonForPart: ( partName: string ) =>
-		`${ parentSelector } .edit-site-list-table-row:has-text("${ partName }") button[aria-label="Actions"]`,
+		`.edit-site-list-table-row:has-text("${ partName }") button[aria-label="Actions"]`,
 };
 
 /**

packages/calypso-e2e/src/lib/pages/editor-page.ts

@@ -366,11 +366,6 @@ export class EditorPage {
 	): Promise< void > {
 		await inserter.searchBlockInserter( patternName );
 		await inserter.selectBlockInserterResult( patternName, { type: 'pattern' } );
-
-		const insertConfirmationToastLocator = this.editor.locator(
-			`.components-snackbar__content:text('Block pattern "${ patternName }" inserted.')`
-		);
-		await insertConfirmationToastLocator.waitFor();
 	}
 
 	/**
@@ -797,13 +792,6 @@ export class EditorPage {
 		} );
 	}
 
-	/**
-	 * Opens the post details popover (i.e. number of character, words, etc.).
-	 */
-	async openDetailsPopover(): Promise< void > {
-		await this.editorToolbarComponent.openDetailsPopover();
-	}
-
 	/**
 	 * Checks whether the editor has any block warnings/errors displaying.
 	 *

packages/calypso-e2e/src/lib/pages/full-site-editor-page.ts

@@ -118,7 +118,9 @@ export class FullSiteEditorPage {
 	 * @param {string} siteHostName Host name of the site, without scheme. (e.g. testsite.wordpress.com)
 	 */
 	async visit( siteHostName: string ): Promise< void > {
-		await this.page.goto( getCalypsoURL( `site-editor/${ siteHostName }` ) );
+		await this.page.goto( getCalypsoURL( `site-editor/${ siteHostName }` ), {
+			timeout: 60 * 1000,
+		} );
 	}
 
 	/**
@@ -361,6 +363,26 @@ export class FullSiteEditorPage {
 		await this.waitForConfirmationToast( 'Site updated.' );
 	}
 
+	/**
+	 * Open the navigation sidebar.
+	 */
+	async openNavSidebar(): Promise< void > {
+		const openButton = this.editor.locator( 'button[aria-label="Open Navigation Sidebar"]' );
+		const closeButton = this.editor.locator( 'button[aria-label="Open the editor"]' );
+
+		await Promise.race( [ closeButton.waitFor(), openButton.click() ] );
+	}
+
+	/**
+	 * Close the navigation sidebar.
+	 */
+	async closeNavSidebar(): Promise< void > {
+		const openButton = this.editor.locator( 'button[aria-label="Open Navigation Sidebar"]' );
+		const closeButton = this.editor.locator( 'button[aria-label="Open the editor"]' );
+
+		await Promise.race( [ openButton.waitFor(), closeButton.click() ] );
+	}
+
 	/**
 	 * Click the editor document actions icon.
 	 */
@@ -527,15 +549,15 @@ export class FullSiteEditorPage {
 	/**
 	 * Delete a template part in the site editor.
 	 *
-	 * @param {string} name Name of the template part.
-	 */
-	async deleteTemplatePart( name: string ): Promise< void > {
-		if ( ! ( await this.templatePartListComponent.isOpen() ) ) {
-			await this.editorToolbarComponent.openNavSidebar();
-			await this.fullSiteEditorNavSidebarComponent.navigateToTemplateParts();
+	 * @param {string[]} names Name of the template part.
+	 */
+	async deleteTemplateParts( names: string[] ): Promise< void > {
+		await this.openNavSidebar();
+		await this.fullSiteEditorNavSidebarComponent.navigateToTemplatePartsManager();
+		for ( const name of names ) {
+			await this.templatePartListComponent.deleteTemplatePart( name );
+			await this.waitForConfirmationToast( `"${ name }" deleted.` );
 		}
-		await this.templatePartListComponent.deleteTemplatePart( name );
-		await this.waitForConfirmationToast( `"${ name }" deleted.` );
 	}
 
 	//#endregion

test/e2e/specs/editor-tracking/editor-tracking__block-inserted-event.ts

@@ -128,6 +128,10 @@ describe(
 					} );
 				} );
 			} );
+
+			it( 'Close the page', async function () {
+				await page.close();
+			} );
 		} );
 
 		describe( 'In the page editor', function () {
@@ -179,6 +183,10 @@ describe(
 					expect( eventDidFire ).toBe( true );
 				} );
 			} );
+
+			it( 'Close the page', async function () {
+				await page.close();
+			} );
 		} );
 
 		describe( 'In the site editor', function () {
@@ -202,11 +210,22 @@ describe(
 				fullSiteEditorPage = new FullSiteEditorPage( page, { target: features.siteType } );
 			} );
 
+			afterAll( async () => {
+				// Always try to delete the created template part.
+				if ( templatePartName ) {
+					await fullSiteEditorPage.deleteTemplateParts( [ templatePartName ] );
+				}
+			} );
+
 			it( 'Visit the site editor', async function () {
 				await fullSiteEditorPage.visit( testAccount.getSiteURL( { protocol: false } ) );
 				await fullSiteEditorPage.prepareForInteraction( { leaveWithoutSaving: true } );
 			} );
 
+			it( 'Close the navigation sidebar', async function () {
+				await fullSiteEditorPage.closeNavSidebar();
+			} );
+
 			// A lot of block insertions sometimes happen on load
 			it( 'Clear the event stack for a starting clean slate', async function () {
 				await editorTracksEventManager.clearEvents();
@@ -261,15 +280,15 @@ describe(
 							matchingProperties: {
 								block_name: 'core/page-list',
 								entity_context: 'core/template-part',
-								template_part_id: `pub/blockbase//${ templatePartName.toLowerCase() }`,
+								template_part_id: `pub/twentytwentytwo//${ templatePartName.toLowerCase() }`,
 							},
 						}
 					);
 					expect( eventDidFire ).toBe( true );
 				} );
 			} );
 
-			describe( 'Adding blocks from existing template parts', function () {
+			describe.skip( 'Adding blocks from existing template parts', function () {
 				it( 'Add a Header block', async function () {
 					const block = await fullSiteEditorPage.addBlockFromSidebar(
 						HeaderBlock.blockName,
@@ -293,20 +312,13 @@ describe(
 				// arguably a reasonable outcome. We need to decide whether
 				// to adjust the test to match the tracking behavior or adjust
 				// the underlyting tracking behavior.
-				it.skip( '"wpcom_block_instered" event does NOT fire', async function () {
+				it( '"wpcom_block_instered" event does NOT fire', async function () {
 					const eventDidFire = await editorTracksEventManager.didEventFire(
 						'wpcom_block_inserted'
 					);
 					expect( eventDidFire ).toBe( false );
 				} );
 			} );
-
-			// Always try to delete the created template part.
-			afterAll( async function () {
-				if ( templatePartName ) {
-					await fullSiteEditorPage.deleteTemplatePart( templatePartName );
-				}
-			} );
 		} );
 	}
 );