Migrate 'core settings' e2e tests to Playwright (#57581)

* Migrate 'core-settings' e2e tests to Playwright * renamed test file * Added role based selectors
WordPress · Jan 10, 2024 · 7c21100 · 7c21100
1 parent d3f2c77
commit 7c21100
Showing 1 changed file with 23 additions and 13 deletions.
diff --git a/...pecs/editor/various/core-settings.test.js → ...pecs/editor/various/core-settings.spec.js b/...pecs/editor/various/core-settings.test.js → ...pecs/editor/various/core-settings.spec.js
@@ -1,10 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { visitAdminPage } from '@wordpress/e2e-test-utils';
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
-async function getOptionsValues( selector ) {
-	await visitAdminPage( 'options.php' );
+async function getOptionsValues( selector, admin, page ) {
+	await admin.visitAdminPage( 'options.php' );
 	return page.evaluate( ( theSelector ) => {
 		const inputs = Array.from( document.querySelectorAll( theSelector ) );
 		return inputs.reduce( ( memo, input ) => {
@@ -16,22 +16,32 @@ async function getOptionsValues( selector ) {
 
 // It might make sense to include a similar test in WP core (or move this one over).
 // See discussion here: https://github.com/WordPress/gutenberg/pull/32797#issuecomment-864192088.
-describe( 'Settings', () => {
-	test( 'Regression: updating a specific option will only change its value and will not corrupt others', async () => {
+test.describe( 'Settings', () => {
+	test( 'Regression: updating a specific option will only change its value and will not corrupt others', async ( {
+		page,
+		admin,
+	} ) => {
 		// We won't select the option that we updated and will also remove some
 		// _transient options that seem to change at every update.
 		const optionsInputsSelector =
 			'form#all-options table.form-table input:not([id*="_transient"]):not([id="blogdescription"])';
-		const optionsBefore = await getOptionsValues( optionsInputsSelector );
-
-		await visitAdminPage( 'options-general.php' );
-		await page.type(
-			'input#blogdescription',
-			'Just another Gutenberg site'
+		const optionsBefore = await getOptionsValues(
+			optionsInputsSelector,
+			admin,
+			page
 		);
-		await page.click( 'input#submit' );
 
-		const optionsAfter = await getOptionsValues( optionsInputsSelector );
+		await admin.visitAdminPage( 'options-general.php' );
+		await page
+			.getByRole( 'textbox', { name: 'Tagline' } )
+			.fill( 'Just another Gutenberg site' );
+		await page.getByRole( 'button', { name: 'Save Changes' } ).click();
+
+		const optionsAfter = await getOptionsValues(
+			optionsInputsSelector,
+			admin,
+			page
+		);
 
 		Object.entries( optionsBefore ).forEach( ( optionBefore ) => {
 			const [ id ] = optionBefore;