Migrate a11y test to Playwright

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

@@ -6,6 +6,7 @@ import type { Browser, Page, BrowserContext } from '@playwright/test';
 /**
  * Internal dependencies
  */
+import { createNewPost } from './create-new-post';
 import { getPageError } from './get-page-error';
 import { isCurrentURL } from './is-current-url';
 import { visitAdminPage } from './visit-admin-page';
@@ -21,6 +22,7 @@ class PageUtils {
 		this.browser = this.context.browser()!;
 	}
 
+	createNewPost = createNewPost;
 	getPageError = getPageError;
 	isCurrentURL = isCurrentURL;
 	visitAdminPage = visitAdminPage;

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

@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'a11y', () => {
+	test.beforeEach( async ( { pageUtils } ) => {
+		await pageUtils.createNewPost();
+	} );
+
+	test( 'tabs header bar', async ( { page } ) => {
+		await page.keyboard.press( 'Control+`' );
+
+		await page.keyboard.press( 'Tab' );
+
+		const headerInserterToggle = page.locator(
+			'.edit-post-header-toolbar__inserter-toggle'
+		);
+
+		await expect( headerInserterToggle ).toBeFocused();
+	} );
+
+	test( 'constrains focus to a modal when tabbing', async ( { page } ) => {
+		// Open keyboard help modal.
+		await page.keyboard.press( 'Shift+Alt+H' );
+
+		// The close button should not be focused by default; this is a strange UX
+		// experience.
+		// See: https://github.com/WordPress/gutenberg/issues/9410
+		const closeButton = page.locator( '[aria-label="Close dialog"]' );
+
+		await expect( closeButton ).not.toBeFocused();
+
+		await page.keyboard.press( 'Tab' );
+
+		// Ensure the Close button of the modal is focused after tabbing.
+		await expect( closeButton ).toBeFocused();
+	} );
+
+	test( 'returns focus to the first tabbable in a modal after blurring a tabbable', async ( {
+		page,
+	} ) => {
+		await page.keyboard.press( 'Shift+Alt+H' );
+
+		// Click to move focus to an element after the last tabbable within the modal.
+		const lastTabbable = page
+			.locator(
+				'.components-modal__content .edit-post-keyboard-shortcut-help-modal__section'
+			)
+			.last();
+
+		await lastTabbable.click();
+
+		await page.keyboard.press( 'Tab' );
+
+		const closeButton = page.locator( '[aria-label="Close dialog"]' );
+
+		await expect( closeButton ).toBeFocused();
+	} );
+
+	test( 'returns focus to the last tabbable in a modal after blurring a tabbable and tabbing in reverse direction', async ( {
+		page,
+	} ) => {
+		await page.keyboard.press( 'Shift+Alt+H' );
+
+		// Click to move focus to an element before the first tabbable within
+		// the modal.
+		await page.click( '.components-modal__header-heading' );
+
+		await page.keyboard.press( 'Shift+Tab' );
+
+		const closeButton = page.locator( '[aria-label="Close dialog"]' );
+
+		await expect( closeButton ).toBeFocused();
+	} );
+} );

test/e2e/specs/editor/various/new-post.spec.js

@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'new editor state', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-plugin-post-formats-support'
+		);
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-plugin-post-formats-support'
+		);
+	} );
+
+	test( 'should show the New Post page in Gutenberg', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		await pageUtils.createNewPost();
+
+		await expect( page ).toHaveURL( /post-new.php/ );
+
+		// Should display the blank title.
+		const title = page.locator( 'role=textbox[name="Add title"i]' );
+		await expect( title ).toBeEditable();
+		await expect( title ).toHaveText( '' );
+
+		// Should display the Preview button.
+		await expect(
+			page.locator( 'role=button[name="Preview"i]' )
+		).toBeVisible();
+
+		// Should display the Post Formats UI.
+		await expect(
+			page.locator( 'role=combobox[name="Post Format"i]' )
+		).toBeVisible();
+	} );
+
+	test( 'should have no history', async ( { page, pageUtils } ) => {
+		await pageUtils.createNewPost();
+
+		await expect(
+			page.locator( 'role=button[name="Undo"i]' )
+		).toBeDisabled();
+		await expect(
+			page.locator( 'role=button[name="Redo"i]' )
+		).toBeDisabled();
+	} );
+
+	test( 'should focus the title if the title is empty', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		await pageUtils.createNewPost();
+
+		await expect(
+			page.locator( 'role=textbox[name="Add title"i]' )
+		).toBeFocused();
+	} );
+
+	test( 'should not focus the title if the title exists', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		await pageUtils.createNewPost();
+
+		// Enter a title for this post.
+		await page.type(
+			'role=textbox[name="Add title"i]',
+			'Here is the title'
+		);
+		// Save the post as a draft.
+		await page.click( 'role=button[name="Save draft"i]' );
+		await page.waitForSelector(
+			'role=button[name="Dismiss this notice"] >> text=Draft saved'
+		);
+
+		// Reload the browser so a post is loaded with a title.
+		await page.reload();
+		await page.waitForSelector( '.edit-post-layout' );
+
+		// The document `body` should be the `activeElement`, because nothing is
+		// focused by default when a post already has a title.
+		await expect( page.locator( 'body' ) ).toBeFocused();
+	} );
+
+	test( 'should be saveable with sufficient initial edits', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		await pageUtils.createNewPost( { title: 'Here is the title' } );
+
+		// Verify saveable by presence of the Save Draft button.
+		const saveDraftButton = page.locator(
+			'role=button[name="Save draft"i]'
+		);
+		await expect( saveDraftButton ).toBeVisible();
+		await expect( saveDraftButton ).toBeEnabled();
+	} );
+} );