Fix broken Playwright tests (#1819)

## Motivation for the change, related issues Some Playwright tests were broken by last-minute changes to #1731. Fixes #1818 ## Implementation details - Fix selection of "edit settings" and "save settings" buttons to select "Create a similar Playground" and "Create" buttons instead. - Change playground viewport selection to account for there being multiple possible viewports now. We were using an ID, but now we're using a CSS class. - Some expect() calls were failing, at least locally, and that was fixed by awaiting them. They need to be async. ## Testing Instructions (or ideally a Blueprint) - CI
WordPress · Sep 28, 2024 · c133c6c · c133c6c
1 parent eaab4a1
commit c133c6c
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 37 deletions.
diff --git a/packages/playground/website/cypress/e2e/query-api.cy.ts b/packages/playground/website/cypress/e2e/query-api.cy.ts
@@ -191,10 +191,10 @@ describe('Query API', () => {
 		it('should defer loading the Playground assets until someone clicks on the "Run" button', () => {
 			cy.visit('/?lazy');
 			cy.get('#lazy-load-initiator').should('exist');
-			cy.get('#playground-viewport').should('not.exist');
+			cy.get('.playground-viewport').should('not.exist');
 
 			cy.get('#lazy-load-initiator').click();
-			cy.get('#playground-viewport').should('exist');
+			cy.get('.playground-viewport').should('exist');
 			cy.wordPressDocument().its('body').should('have.class', 'home');
 		});
 	});

diff --git a/packages/playground/website/cypress/support/commands.ts b/packages/playground/website/cypress/support/commands.ts
@@ -27,21 +27,21 @@ Cypress.Commands.add('setWordPressUrl', (url: string) => {
 });
 
 Cypress.Commands.add('wordPressDocument', () => {
-	cy.get('#playground-viewport').should('exist');
-	cy.get('#playground-viewport')
+	cy.get('.playground-viewport').should('exist');
+	cy.get('.playground-viewport')
 		.its('0.contentDocument')
 		.find('#wp')
 		.should('exist');
 	return cy
-		.get('#playground-viewport')
+		.get('.playground-viewport')
 		.its('0.contentDocument')
 		.find('#wp')
 		.its('0.contentDocument');
 });
 
 Cypress.Commands.add('wordpressPath', () => {
 	return cy
-		.get('#playground-viewport')
+		.get('.playground-viewport')
 		.its('0.contentDocument')
 		.find('#wp')
 		.its('0.contentWindow.location.pathname');

diff --git a/packages/playground/website/playwright/e2e/blueprints.spec.ts b/packages/playground/website/playwright/e2e/blueprints.spec.ts
@@ -7,13 +7,13 @@ test('Base64-encoded Blueprints should work', async ({
 	wordpress,
 }) => {
 	const blueprint: Blueprint = {
-		landingPage: '/',
-		steps: [{ step: 'enableMultisite' }],
+		landingPage: '/wp-admin/',
+		steps: [{ step: 'login' }],
 	};
 
 	const encodedBlueprint = encodeStringAsBase64(JSON.stringify(blueprint));
 	await website.goto(`/#${encodedBlueprint}`);
-	await expect(wordpress.locator('body')).toContainText('My Sites');
+	await expect(wordpress.locator('body')).toContainText('Dashboard');
 });
 
 test('enableMultisite step should re-activate the plugins', async ({
@@ -38,7 +38,7 @@ test('enableMultisite step should re-activate the plugins', async ({
 
 	const encodedBlueprint = JSON.stringify(blueprint);
 	await website.goto(`./#${encodedBlueprint}`);
-	expect(wordpress.getByLabel('Deactivate Hello Dolly')).toHaveText(
+	await expect(wordpress.getByLabel('Deactivate Hello Dolly')).toHaveText(
 		'Deactivate'
 	);
 });
diff --git a/packages/playground/website/playwright/e2e/website-ui.spec.ts b/packages/playground/website/playwright/e2e/website-ui.spec.ts
@@ -56,22 +56,22 @@ SupportedPHPVersions.forEach(async (version) => {
 		}
 		await website.goto(`./`);
 
-		await website.openEditSettings();
+		await website.openForkPlaygroundSettings();
 
 		await website.selectPHPVersion(version);
 
-		await website.clickSaveInEditSettings();
+		await website.clickSaveInForkPlaygroundSettings();
 
-		expect(await website.getSiteInfoRowLocator('PHP version')).toHaveText(
-			`${version} (with extensions)`
-		);
+		await expect(
+			await website.getSiteInfoRowLocator('PHP version')
+		).toHaveText(`${version} (with extensions)`);
 	});
 
 	test(`should not load additional PHP ${version} extensions when not requested`, async ({
 		website,
 	}) => {
 		await website.goto('./');
-		await website.openEditSettings();
+		await website.openForkPlaygroundSettings();
 		await website.selectPHPVersion(version);
 
 		// Uncheck the "with extensions" checkbox
@@ -80,11 +80,11 @@ SupportedPHPVersions.forEach(async (version) => {
 		);
 		await phpExtensionCheckbox.uncheck();
 
-		await website.clickSaveInEditSettings();
+		await website.clickSaveInForkPlaygroundSettings();
 
-		expect(await website.getSiteInfoRowLocator('PHP version')).toHaveText(
-			version
-		);
+		await expect(
+			await website.getSiteInfoRowLocator('PHP version')
+		).toHaveText(version);
 	});
 });
 
@@ -96,11 +96,11 @@ Object.keys(MinifiedWordPressVersions)
 			website,
 		}) => {
 			await website.goto('./');
-			await website.openEditSettings();
+			await website.openForkPlaygroundSettings();
 			await website.selectWordPressVersion(version);
-			await website.clickSaveInEditSettings();
+			await website.clickSaveInForkPlaygroundSettings();
 
-			expect(
+			await expect(
 				await website.getSiteInfoRowLocator('WordPress version')
 			).toHaveText(version);
 		});
@@ -124,19 +124,19 @@ test('should display networking as active when networking is enabled', async ({
 test('should enable networking when requested', async ({ website }) => {
 	await website.goto('./');
 
-	await website.openEditSettings();
+	await website.openForkPlaygroundSettings();
 	await website.setNetworkingEnabled(true);
-	await website.clickSaveInEditSettings();
+	await website.clickSaveInForkPlaygroundSettings();
 
 	await expect(await website.hasNetworkingEnabled()).toBeTruthy();
 });
 
 test('should disable networking when requested', async ({ website }) => {
 	await website.goto('./?networking=yes');
 
-	await website.openEditSettings();
+	await website.openForkPlaygroundSettings();
 	await website.setNetworkingEnabled(false);
-	await website.clickSaveInEditSettings();
+	await website.clickSaveInForkPlaygroundSettings();
 
 	await expect(await website.hasNetworkingEnabled()).toBeFalsy();
 });

diff --git a/packages/playground/website/playwright/playground-fixtures.ts b/packages/playground/website/playwright/playground-fixtures.ts
@@ -9,7 +9,9 @@ type WordPressFixtures = {
 export const test = base.extend<WordPressFixtures>({
 	wordpress: async ({ page }, use) => {
 		const wpPage = page
-			.frameLocator('#playground-viewport')
+			/* There are multiple viewports possible, so we need to select
+			   the one that is visible. */
+			.frameLocator('.playground-viewport:visible')
 			.frameLocator('#wp');
 		await use(wpPage);
 	},

diff --git a/packages/playground/website/playwright/playwright.config.ts b/packages/playground/website/playwright/playwright.config.ts
@@ -13,7 +13,7 @@ export const playwrightConfig: PlaywrightTestConfig = {
 	/* Retry on CI only */
 	retries: process.env.CI ? 2 : 0,
 	/* Opt out of parallel tests on CI. */
-	workers: 1,
+	workers: process.env.CI ? 1 : 3,
 	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
 	reporter: 'html',
 	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */

diff --git a/packages/playground/website/playwright/website-page.ts b/packages/playground/website/playwright/website-page.ts
@@ -7,7 +7,9 @@ export class WebsitePage {
 	async waitForNestedIframes() {
 		await expect(
 			await this.page
-				.frameLocator('#playground-viewport')
+				/* There are multiple viewports possible, so we need to select
+				   the one that is visible. */
+				.frameLocator('.playground-viewport:visible')
 				.frameLocator('#wp')
 				.locator('body')
 		).not.toBeEmpty();
@@ -50,26 +52,26 @@ export class WebsitePage {
 			.innerText();
 	}
 
-	async openEditSettings() {
+	async openForkPlaygroundSettings() {
 		const editSettingsButton = this.page.locator(
 			'button.components-button',
 			{
-				hasText: 'Edit Playground settings',
+				hasText: 'Create a similar Playground',
 			}
 		);
-		await editSettingsButton.click();
+		await editSettingsButton.click({ timeout: 5000 });
 	}
 
 	async selectPHPVersion(version: string) {
 		const phpVersionSelect = this.page.locator('select[name=phpVersion]');
 		await phpVersionSelect.selectOption(version);
 	}
 
-	async clickSaveInEditSettings() {
+	async clickSaveInForkPlaygroundSettings() {
 		const saveSettingsButton = this.page.locator(
 			'button.components-button.is-primary',
 			{
-				hasText: 'Update',
+				hasText: 'Create',
 			}
 		);
 		await saveSettingsButton.click();

diff --git a/packages/playground/website/src/components/playground-viewport/index.tsx b/packages/playground/website/src/components/playground-viewport/index.tsx
@@ -226,10 +226,9 @@ export const JustViewport = function JustViewport({
 
 	return (
 		<iframe
-			id="playground-viewport"
 			key={siteSlug}
 			title="WordPress Playground wrapper (the actual WordPress site is in another, nested iframe)"
-			className={css.fullSize}
+			className={classNames('playground-viewport', css.fullSize)}
 			ref={iframeRef}
 		/>
 	);