Fix various E2E tests for recent Gutenberg changes (#86070)

* 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.

Author: anomiex

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 ) =>

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,