[@wordpress/e2e-test-utils-playwright] Add switchBlockInspectorTab utility

[ralucaStan]

What?

This PR is migrating the Puppeteer utility switchBlockInspectorTab to the new @wordpress/e2e-test-utils-playwright package

Why?

This utility is needed by people migrating E2E tests to Playwright who use this utility from @wordpress/e2e-test-utils

How?

The utility keeps the old logic of getting the button by label, clicking it and confirming the appropriate inspector tab is visible.

Testing Instructions

Set up wp-env.

Add a new test file, test/e2e/specs/editor/various/switch-block-inspector-tab.test.js and add the following code:

/**
 * WordPress dependencies
 */
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

test.describe( 'switchBlockInspectorTab', () => {
	test( 'should open the page', async ( { admin, editor } ) => {
		await admin.createNewPost( {
			postType: 'post',
			title: 'My test post',
			content: '',
			excerpt: '',
		} );
		await editor.publishPost();

		await editor.insertBlock( { name: 'core/buttons' } );
		await editor.openDocumentSettingsSidebar();
		await editor.switchBlockInspectorTab( 'Styles' );
		// select Outline style for the Buttons block
		await admin.page.getByText( 'Outline' ).press( 'Enter' );
	} );
} );

Run npm run test:e2e:playwright -- test/e2e/specs/editor/various/switch-block-inspector-tab.test.js and ensure the test passes.

Testing Instructions for Keyboard

N/A

Screenshots or screencast

[ralucaStan]

@opr I'd appreciate a 👀 from you on this small PR, as it's inspired by #51333

[opr]

Hi Raluca, congrats on the PR!

I took a look and it's working as described, however, what do you think about using the locator helper functions, instead of using CSS selectors to get the page elements?

Something like this:

export async function switchBlockInspectorTab(
	this: Editor,
	ariaLabel: string
) {
	const tabButton = this.page.getByRole( 'tab', { name: ariaLabel } );
	await tabButton.click();
	this.page.getByRole( 'tabpanel', { name: ariaLabel } );
}

by the way, I'm not sure if this is necessary, but you could be extra specific and add .getByLabel( 'Editor settings' ) to the locator, to isolate it to the sidebar.

export async function switchBlockInspectorTab(
	this: Editor,
	ariaLabel: string
) {
	const sidebar = this.page.getByLabel( 'Editor settings' );
	const tabButton = sidebar.getByRole( 'tab', { name: ariaLabel } );
	await tabButton.click();
	sidebar.getByRole( 'tabpanel', { name: ariaLabel } );
}

[ralucaStan]

@opr thank you for the improvements. I went ahead and used your suggestion to search just in the sidebar. I noticed that other tests did the same.

	const sidebar = this.page.getByRole( 'region', {
		name: 'Editor settings',
	} );

Ideally, this element should be saved in a reusable constant to make sure people select it the same.

Happy to do this myself if @kevin940726 can recommend the best way to do this

[opr]

Ideally, this element should be saved in a reusable constant to make sure people select it the same.

Nice idea.

Maybe there can be a new function added on Editor called getEditorSidebar or similar this would return the locator. Not sure if this is the best approach, but it's a suggestion.

[kevin940726]

Thanks for the PR! From this section of the best practice guide, I'm more leaning towards inlining these simple utils, especially when they are short and readable.

This util can be inlined like:

await page.getByRole( 'region', { name: 'Editor settings' } )
  .getByRole( 'tab', { name: 'Styles' } )
  .click();

The last waitFor isn't normally needed since Playwright will auto-wait for anything afterwards anyway.

I'm also not opposed to the idea of creating this util if people find it useful though! @Mamaduka WDYT?

[Mamaduka]

I think actions that we've to repeat often make sense to be extracted as utils, just like openDocumentSettingsSidebar 👍

[ralucaStan]

Closing, I don't think this change is needed after all