Fix E2E test that opens page template (#89057)

packages/calypso-e2e/src/lib/components/full-side-editor-data-views-component.ts

@@ -0,0 +1,35 @@
+import { Page } from 'playwright';
+import { EditorComponent } from './editor-component';
+
+const selectors = {
+	primaryFieldByText: ( primaryFieldText: string ) =>
+		`.dataviews-view-table__primary-field:has-text("${ primaryFieldText }")`,
+};
+
+/**
+ * Represents an instance of the WordPress.com FSE Editor's DataViews.
+ * This is used for data layouts (e.g. tables, grids, and lists).
+ */
+export class FullSiteEditorDataViewsComponent {
+	private page: Page;
+	private editor: EditorComponent;
+
+	/**
+	 * Constructs an instance of the component.
+	 *
+	 * @param {Page} page The underlying page.
+	 * @param {EditorComponent} editor The EditorComponent instance.
+	 */
+	constructor( page: Page, editor: EditorComponent ) {
+		this.page = page;
+		this.editor = editor;
+	}
+
+	/**
+	 * Clicks on a button with the exact name.
+	 */
+	async clickPrimaryFieldByExactText( primaryFieldText: string ): Promise< void > {
+		const editorParent = await this.editor.parent();
+		await editorParent.locator( selectors.primaryFieldByText( primaryFieldText ) ).click();
+	}
+}

packages/calypso-e2e/src/lib/components/index.ts

@@ -34,6 +34,7 @@ export * from './editor-block-toolbar-component';
 export * from './template-part-list-component';
 export * from './template-part-modal-component';
 export * from './full-side-editor-nav-sidebar-component';
+export * from './full-side-editor-data-views-component';
 export * from './editor-dimensions-component';
 export * from './jetpack-instant-search-modal-component';
 

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

@@ -15,6 +15,7 @@ import {
 	BlockToolbarButtonIdentifier,
 	TemplatePartListComponent,
 	FullSiteEditorNavSidebarComponent,
+	FullSiteEditorDataViewsComponent,
 	TemplatePartModalComponent,
 	OpenInlineInserter,
 	EditorInlineBlockInserterComponent,
@@ -56,6 +57,7 @@ export class FullSiteEditorPage {
 	private editorBlockToolbarComponent: EditorBlockToolbarComponent;
 	private fullSiteEditorSavePanelComponent: FullSiteEditorSavePanelComponent;
 	private fullSiteEditorNavSidebarComponent: FullSiteEditorNavSidebarComponent;
+	private fullSiteEditorDataViewsComponent: FullSiteEditorDataViewsComponent;
 	private templatePartModalComponent: TemplatePartModalComponent;
 	private templatePartListComponent: TemplatePartListComponent;
 	private cookieBannerComponent: CookieBannerComponent;
@@ -79,6 +81,10 @@ export class FullSiteEditorPage {
 			page,
 			this.editor
 		);
+		this.fullSiteEditorDataViewsComponent = new FullSiteEditorDataViewsComponent(
+			page,
+			this.editor
+		);
 		this.editorSidebarBlockInserterComponent = new EditorSidebarBlockInserterComponent(
 			page,
 			this.editor
@@ -167,6 +173,13 @@ export class FullSiteEditorPage {
 		await this.fullSiteEditorNavSidebarComponent.clickNavButtonByExactText( text );
 	}
 
+	/**
+	 * Clicks DataViews primary field to open editor.
+	 */
+	async openTemplateEditor( text: string ): Promise< void > {
+		await this.fullSiteEditorDataViewsComponent.clickPrimaryFieldByExactText( text );
+	}
+
 	/**
 	 * Ensures the nav sidebar is at the top level ("Design")
 	 */

test/e2e/specs/fse/fse__temp-smoke-test.ts

@@ -103,8 +103,7 @@ describe( DataHelper.createSuiteTitle( 'Site Editor Smoke Test' ), function () {
 
 		await fullSiteEditorPage.ensureNavigationTopLevel();
 		await fullSiteEditorPage.clickFullSiteNavigatorButton( 'Templates' );
-		await fullSiteEditorPage.clickFullSiteNavigatorButton( 'Index' );
-		await fullSiteEditorPage.clickFullSiteNavigatorButton( 'Edit' );
+		await fullSiteEditorPage.openTemplateEditor( 'Index' );
 	} );
 
 	it( 'Editor canvas loads', async function () {