E2E theme switch: match incoming theme slug, then optional folder (Wo…

…rdPress#59851)

* Test for incoming theme slug first.
The `optionalFolder` regex part matches paths with a folder,
so it will return the first match, which might contain a folder.
First try to honor the including theme slug, that is, without a folder, the look for the optional folder path, if any.

Co-authored-by: ramonjd <[email protected]>
Co-authored-by: andrewserong <[email protected]>

packages/e2e-test-utils-playwright/src/request-utils/themes.ts

@@ -13,12 +13,25 @@ async function activateTheme(
 	let response = await this.request.get( THEMES_URL );
 	const html = await response.text();
 	const optionalFolder = '([a-z0-9-]+%2F)?';
-	const matchGroup = html.match(
-		`action=activate&stylesheet=${ optionalFolder }${ encodeURIComponent(
+
+	// The `optionalFolder` regex part matches paths with a folder,
+	// so it will return the first match, which might contain a folder.
+	// First try to honor the included theme slug, that is, without a folder.
+	let matchGroup = html.match(
+		`action=activate&stylesheet=${ encodeURIComponent(
 			themeSlug
 		) }&_wpnonce=[a-z0-9]+`
 	);
 
+	// If the theme is not found, try to match the theme slug with a folder.
+	if ( ! matchGroup ) {
+		matchGroup = html.match(
+			`action=activate&stylesheet=${ optionalFolder }${ encodeURIComponent(
+				themeSlug
+			) }&_wpnonce=[a-z0-9]+`
+		);
+	}
+
 	if ( ! matchGroup ) {
 		if ( html.includes( `data-slug="${ themeSlug }"` ) ) {
 			// The theme is already activated.