Migrated nux.test.js to Playwright

packages/e2e-test-utils-playwright/src/page/click-on-more-menu-item.js

@@ -0,0 +1,22 @@
+/**
+ * Clicks on More Menu item, searches for the button with the text provided and clicks it.
+ *
+ * @param {string} buttonLabel The label to search the button for.
+ */
+export async function clickOnMoreMenuItem( buttonLabel ) {
+	const menuSelector = await this.page.locator(
+		'.interface-more-menu-dropdown [aria-label="Options"]'
+	);
+
+	await menuSelector.click();
+
+	const moreMenuContainerSelector =
+		'//*[contains(concat(" ", @class, " "), " interface-more-menu-dropdown__content ")]';
+
+	const elementToClick = await this.page
+		.locator(
+			`${ moreMenuContainerSelector }//span[contains(concat(" ", @class, " "), " components-menu-item__item ")][contains(text(), "${ buttonLabel }")]`
+		)
+		.first();
+	await elementToClick.click();
+}

packages/e2e-test-utils-playwright/src/page/create-new-post.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Creates new post.
+ *
+ * @this {import('./').PageUtils}
+ * @param {Object}  object                    Object to create new post, along with tips enabling option.
+ * @param {string}  [object.postType]         Post type of the new post.
+ * @param {string}  [object.title]            Title of the new post.
+ * @param {string}  [object.content]          Content of the new post.
+ * @param {string}  [object.excerpt]          Excerpt of the new post.
+ * @param {boolean} [object.showWelcomeGuide] Whether to show the welcome guide.
+ */
+export async function createNewPost( {
+	postType,
+	title,
+	content,
+	excerpt,
+	showWelcomeGuide = false,
+} = {} ) {
+	const query = addQueryArgs( '', {
+		post_type: postType,
+		post_title: title,
+		content,
+		excerpt,
+	} ).slice( 1 );
+
+	await this.visitAdminPage( 'post-new.php', query );
+
+	await this.page.waitForSelector( '.edit-post-layout' );
+
+	const isWelcomeGuideActive = await this.page.evaluate( () =>
+		window.wp.data
+			.select( 'core/edit-post' )
+			.isFeatureActive( 'welcomeGuide' )
+	);
+	const isFullscreenMode = await this.page.evaluate( () =>
+		window.wp.data
+			.select( 'core/edit-post' )
+			.isFeatureActive( 'fullscreenMode' )
+	);
+
+	if ( showWelcomeGuide !== isWelcomeGuideActive ) {
+		await this.page.evaluate( () =>
+			window.wp.data
+				.dispatch( 'core/edit-post' )
+				.toggleFeature( 'welcomeGuide' )
+		);
+
+		await this.page.reload();
+		await this.page.waitForSelector( '.edit-post-layout' );
+	}
+
+	if ( isFullscreenMode ) {
+		await this.page.evaluate( () =>
+			window.wp.data
+				.dispatch( 'core/edit-post' )
+				.toggleFeature( 'fullscreenMode' )
+		);
+
+		await this.page.waitForSelector( 'body:not(.is-fullscreen-mode)' );
+	}
+}

packages/e2e-test-utils-playwright/src/page/index.ts

@@ -9,6 +9,8 @@ import type { Browser, Page, BrowserContext } from '@playwright/test';
 import { getPageError } from './get-page-error';
 import { isCurrentURL } from './is-current-url';
 import { visitAdminPage } from './visit-admin-page';
+import { createNewPost } from './create-new-post';
+import { clickOnMoreMenuItem } from './click-on-more-menu-item';
 
 class PageUtils {
 	browser: Browser;
@@ -24,6 +26,8 @@ class PageUtils {
 	getPageError = getPageError;
 	isCurrentURL = isCurrentURL;
 	visitAdminPage = visitAdminPage;
+	createNewPost = createNewPost;
+	clickOnMoreMenuItem = clickOnMoreMenuItem;
 }
 
 export { PageUtils };

test/e2e/playwright.config.ts

@@ -37,7 +37,7 @@ const config: PlaywrightTestConfig = {
 			strictSelectors: true,
 		},
 		storageState: STORAGE_STATE_PATH,
-		actionTimeout: 10_000, // 10 seconds.
+		actionTimeout: 20_000, // 20 seconds.
 		trace: process.env.CI ? 'on-first-retry' : 'retain-on-failure',
 		screenshot: 'only-on-failure',
 		video: 'on-first-retry',

test/e2e/specs/editor/various/nux.spec.js

@@ -0,0 +1,129 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'New User Experience (NUX)', () => {
+	test( 'should show the guide to first-time users', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		let welcomeGuideText, welcomeGuide;
+
+		// Create a new post as a first-time user.
+		await pageUtils.createNewPost( { showWelcomeGuide: true } );
+
+		// Guide should be on page 1 of 4
+		welcomeGuideText = await page.locator( '.edit-post-welcome-guide' );
+		await expect( welcomeGuideText ).toContainText(
+			'Welcome to the block editor'
+		);
+
+		// Click on the 'Next' button.
+		const nextButton = await page.locator(
+			'//button[contains(text(), "Next")]'
+		);
+		await nextButton.click();
+
+		// Guide should be on page 2 of 4
+		welcomeGuideText = await page.locator( '.edit-post-welcome-guide' );
+		await expect( welcomeGuideText ).toContainText(
+			'Make each block your own'
+		);
+
+		// Click on the 'Previous' button.
+		const previousButton = await page.locator(
+			'//button[contains(text(), "Previous")]'
+		);
+		await previousButton.click();
+
+		// Guide should be on page 1 of 4
+		welcomeGuideText = await page.locator( '.edit-post-welcome-guide' );
+		await expect( welcomeGuideText ).toContainText(
+			'Welcome to the block editor'
+		);
+
+		// Press the button for Page 2.
+		await page.click( 'button[aria-label="Page 2 of 4"]' );
+		await page.locator(
+			'//h1[contains(text(), "Make each block your own")]'
+		);
+
+		// Press the right arrow key for Page 3.
+		await page.keyboard.press( 'ArrowRight' );
+		await page.locator(
+			'//h1[contains(text(), "Get to know the block library")]'
+		);
+
+		// Press the right arrow key for Page 4.
+		await page.keyboard.press( 'ArrowRight' );
+		await page.locator(
+			'//h1[contains(text(), "Learn how to use the block editor")]'
+		);
+
+		// Click on the *visible* 'Get started' button. There are two in the DOM
+		// but only one is shown depending on viewport size.
+		const getStartedButton = page.locator(
+			'.components-guide__footer button:text("Get started")'
+		);
+		await getStartedButton.click();
+
+		// Guide should be closed
+		welcomeGuide = await page.locator( '.edit-post-welcome-guide' );
+		await expect( welcomeGuide ).not.toBeVisible();
+
+		// Reload the editor.
+		await page.reload();
+		await page.waitForSelector( '.edit-post-layout' );
+
+		// Guide should be closed
+		welcomeGuide = await page.locator( '.edit-post-welcome-guide' );
+		await expect( welcomeGuide ).not.toBeVisible();
+	} );
+
+	test( 'should not show the welcome guide again if it is dismissed', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		let welcomeGuide;
+
+		// Create a new post as a first-time user.
+		await pageUtils.createNewPost( { showWelcomeGuide: true } );
+
+		// Guide should be open
+		welcomeGuide = await page.locator( '.edit-post-welcome-guide' );
+		await expect( welcomeGuide ).toBeVisible();
+
+		// Close the guide
+		await page.click( 'button[aria-label="Close dialog"]' );
+
+		// Reload the editor.
+		await page.reload();
+		await page.waitForSelector( '.edit-post-layout' );
+
+		// Guide should be closed
+		welcomeGuide = await page.locator( '.edit-post-welcome-guide' );
+		await expect( welcomeGuide ).not.toBeVisible();
+	} );
+
+	test( 'should show the welcome guide if it is manually opened', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		let welcomeGuide;
+
+		// Create a new post as a returning user.
+		await pageUtils.createNewPost();
+
+		// Guide should be closed
+		welcomeGuide = await page.locator( '.edit-post-welcome-guide' );
+		await expect( welcomeGuide ).not.toBeVisible();
+
+		// Manually open the guide
+		await pageUtils.clickOnMoreMenuItem( 'Welcome Guide' );
+
+		// Guide should be open
+		welcomeGuide = await page.locator( '.edit-post-welcome-guide' );
+		await expect( welcomeGuide ).toBeVisible();
+	} );
+} );