Migrate format API test for playwright

[pavanpatil1]

What?

Part of #38851.
Migrate format-api.test.js to its Playwright version.

Why?

Part of #38851.

How?

See MIGRATION.md for migration steps.

Testing Instructions

Run npm run test-e2e:playwright test/e2e/specs/editor/plugins/format-api.spec.js

[pavanpatil1]

Hello @kevin940726, Could you review this PR. ?.

[pavanpatil1]

Hi @kevin940726, Hope you are doing well.
Could you please help me in reviewing this PR ?.

[kevin940726]

Hi! Sorry I missed the pings! Thank you as always 💯

[kevin940726]

Have you read the best practice guide? I think we can refactor this into role selector instead:

Suggested change

	const button = await page.locator(
	`//button[contains(text(), '${ 'Custom Link' }')]`
	);
	await button.click();
	await page.click( 'role=button[name="Custom Link"i]' );

[pavanpatil1]

Hi @kevin940726, Yes, I tried that, but because the button doesn't have the name attribute available, it is failing.

[kevin940726]

@pavanpatil1 It's not a DOM attribute but a computed accessible attribute interpreted by the browsers and screen readers. You can view what accessible attributes browsers see via devtools, take Chrome as an example:

You can see that the element has a role of menuitem and a name of  Custom Link. The  part is likely caused by a bug and should probably be fixed by a different PR. For now, I think we can just use the selector role=menuitem[name=/Custom Link/i] to target the element (and add a comment above explaining why we want to use regex here).

[pavanpatil1]

Hi @kevin940726, Thank you so much 💯

I addressed the above feedback. Could you check again ?.

[kevin940726]

Looks good! Remember to also delete the snapshot of the original test though (format-api.test.js.snap).

[kevin940726]

LGTM 👍 Thanks! 💯