Skip to content

Commit c133c6c

Browse files
brandonpaytonbrandonpayton
authored
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
1 parent eaab4a1 commit c133c6c

File tree

8 files changed

+40
-37
lines changed

8 files changed

+40
-37
lines changed

‎packages/playground/website/cypress/e2e/query-api.cy.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -191,10 +191,10 @@ describe('Query API', () => {
191191
it('should defer loading the Playground assets until someone clicks on the "Run" button', () => {
192192
cy.visit('/?lazy');
193193
cy.get('#lazy-load-initiator').should('exist');
194-
cy.get('#playground-viewport').should('not.exist');
194+
cy.get('.playground-viewport').should('not.exist');
195195

196196
cy.get('#lazy-load-initiator').click();
197-
cy.get('#playground-viewport').should('exist');
197+
cy.get('.playground-viewport').should('exist');
198198
cy.wordPressDocument().its('body').should('have.class', 'home');
199199
});
200200
});

‎packages/playground/website/cypress/support/commands.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,21 +27,21 @@ Cypress.Commands.add('setWordPressUrl', (url: string) => {
2727
});
2828

2929
Cypress.Commands.add('wordPressDocument', () => {
30-
cy.get('#playground-viewport').should('exist');
31-
cy.get('#playground-viewport')
30+
cy.get('.playground-viewport').should('exist');
31+
cy.get('.playground-viewport')
3232
.its('0.contentDocument')
3333
.find('#wp')
3434
.should('exist');
3535
return cy
36-
.get('#playground-viewport')
36+
.get('.playground-viewport')
3737
.its('0.contentDocument')
3838
.find('#wp')
3939
.its('0.contentDocument');
4040
});
4141

4242
Cypress.Commands.add('wordpressPath', () => {
4343
return cy
44-
.get('#playground-viewport')
44+
.get('.playground-viewport')
4545
.its('0.contentDocument')
4646
.find('#wp')
4747
.its('0.contentWindow.location.pathname');

‎packages/playground/website/playwright/e2e/blueprints.spec.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ test('Base64-encoded Blueprints should work', async ({
77
wordpress,
88
}) => {
99
const blueprint: Blueprint = {
10-
landingPage: '/',
11-
steps: [{ step: 'enableMultisite' }],
10+
landingPage: '/wp-admin/',
11+
steps: [{ step: 'login' }],
1212
};
1313

1414
const encodedBlueprint = encodeStringAsBase64(JSON.stringify(blueprint));
1515
await website.goto(`/#${encodedBlueprint}`);
16-
await expect(wordpress.locator('body')).toContainText('My Sites');
16+
await expect(wordpress.locator('body')).toContainText('Dashboard');
1717
});
1818

1919
test('enableMultisite step should re-activate the plugins', async ({
@@ -38,7 +38,7 @@ test('enableMultisite step should re-activate the plugins', async ({
3838

3939
const encodedBlueprint = JSON.stringify(blueprint);
4040
await website.goto(`./#${encodedBlueprint}`);
41-
expect(wordpress.getByLabel('Deactivate Hello Dolly')).toHaveText(
41+
await expect(wordpress.getByLabel('Deactivate Hello Dolly')).toHaveText(
4242
'Deactivate'
4343
);
4444
});

‎packages/playground/website/playwright/e2e/website-ui.spec.ts‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -56,22 +56,22 @@ SupportedPHPVersions.forEach(async (version) => {
5656
}
5757
await website.goto(`./`);
5858

59-
await website.openEditSettings();
59+
await website.openForkPlaygroundSettings();
6060

6161
await website.selectPHPVersion(version);
6262

63-
await website.clickSaveInEditSettings();
63+
await website.clickSaveInForkPlaygroundSettings();
6464

65-
expect(await website.getSiteInfoRowLocator('PHP version')).toHaveText(
66-
`${version} (with extensions)`
67-
);
65+
await expect(
66+
await website.getSiteInfoRowLocator('PHP version')
67+
).toHaveText(`${version} (with extensions)`);
6868
});
6969

7070
test(`should not load additional PHP ${version} extensions when not requested`, async ({
7171
website,
7272
}) => {
7373
await website.goto('./');
74-
await website.openEditSettings();
74+
await website.openForkPlaygroundSettings();
7575
await website.selectPHPVersion(version);
7676

7777
// Uncheck the "with extensions" checkbox
@@ -80,11 +80,11 @@ SupportedPHPVersions.forEach(async (version) => {
8080
);
8181
await phpExtensionCheckbox.uncheck();
8282

83-
await website.clickSaveInEditSettings();
83+
await website.clickSaveInForkPlaygroundSettings();
8484

85-
expect(await website.getSiteInfoRowLocator('PHP version')).toHaveText(
86-
version
87-
);
85+
await expect(
86+
await website.getSiteInfoRowLocator('PHP version')
87+
).toHaveText(version);
8888
});
8989
});
9090

@@ -96,11 +96,11 @@ Object.keys(MinifiedWordPressVersions)
9696
website,
9797
}) => {
9898
await website.goto('./');
99-
await website.openEditSettings();
99+
await website.openForkPlaygroundSettings();
100100
await website.selectWordPressVersion(version);
101-
await website.clickSaveInEditSettings();
101+
await website.clickSaveInForkPlaygroundSettings();
102102

103-
expect(
103+
await expect(
104104
await website.getSiteInfoRowLocator('WordPress version')
105105
).toHaveText(version);
106106
});
@@ -124,19 +124,19 @@ test('should display networking as active when networking is enabled', async ({
124124
test('should enable networking when requested', async ({ website }) => {
125125
await website.goto('./');
126126

127-
await website.openEditSettings();
127+
await website.openForkPlaygroundSettings();
128128
await website.setNetworkingEnabled(true);
129-
await website.clickSaveInEditSettings();
129+
await website.clickSaveInForkPlaygroundSettings();
130130

131131
await expect(await website.hasNetworkingEnabled()).toBeTruthy();
132132
});
133133

134134
test('should disable networking when requested', async ({ website }) => {
135135
await website.goto('./?networking=yes');
136136

137-
await website.openEditSettings();
137+
await website.openForkPlaygroundSettings();
138138
await website.setNetworkingEnabled(false);
139-
await website.clickSaveInEditSettings();
139+
await website.clickSaveInForkPlaygroundSettings();
140140

141141
await expect(await website.hasNetworkingEnabled()).toBeFalsy();
142142
});

‎packages/playground/website/playwright/playground-fixtures.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ type WordPressFixtures = {
99
export const test = base.extend<WordPressFixtures>({
1010
wordpress: async ({ page }, use) => {
1111
const wpPage = page
12-
.frameLocator('#playground-viewport')
12+
/* There are multiple viewports possible, so we need to select
13+
the one that is visible. */
14+
.frameLocator('.playground-viewport:visible')
1315
.frameLocator('#wp');
1416
await use(wpPage);
1517
},

‎packages/playground/website/playwright/playwright.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const playwrightConfig: PlaywrightTestConfig = {
1313
/* Retry on CI only */
1414
retries: process.env.CI ? 2 : 0,
1515
/* Opt out of parallel tests on CI. */
16-
workers: 1,
16+
workers: process.env.CI ? 1 : 3,
1717
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
1818
reporter: 'html',
1919
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */

‎packages/playground/website/playwright/website-page.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ export class WebsitePage {
77
async waitForNestedIframes() {
88
await expect(
99
await this.page
10-
.frameLocator('#playground-viewport')
10+
/* There are multiple viewports possible, so we need to select
11+
the one that is visible. */
12+
.frameLocator('.playground-viewport:visible')
1113
.frameLocator('#wp')
1214
.locator('body')
1315
).not.toBeEmpty();
@@ -50,26 +52,26 @@ export class WebsitePage {
5052
.innerText();
5153
}
5254

53-
async openEditSettings() {
55+
async openForkPlaygroundSettings() {
5456
const editSettingsButton = this.page.locator(
5557
'button.components-button',
5658
{
57-
hasText: 'Edit Playground settings',
59+
hasText: 'Create a similar Playground',
5860
}
5961
);
60-
await editSettingsButton.click();
62+
await editSettingsButton.click({ timeout: 5000 });
6163
}
6264

6365
async selectPHPVersion(version: string) {
6466
const phpVersionSelect = this.page.locator('select[name=phpVersion]');
6567
await phpVersionSelect.selectOption(version);
6668
}
6769

68-
async clickSaveInEditSettings() {
70+
async clickSaveInForkPlaygroundSettings() {
6971
const saveSettingsButton = this.page.locator(
7072
'button.components-button.is-primary',
7173
{
72-
hasText: 'Update',
74+
hasText: 'Create',
7375
}
7476
);
7577
await saveSettingsButton.click();

‎packages/playground/website/src/components/playground-viewport/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -226,10 +226,9 @@ export const JustViewport = function JustViewport({
226226

227227
return (
228228
<iframe
229-
id="playground-viewport"
230229
key={siteSlug}
231230
title="WordPress Playground wrapper (the actual WordPress site is in another, nested iframe)"
232-
className={css.fullSize}
231+
className={classNames('playground-viewport', css.fullSize)}
233232
ref={iframeRef}
234233
/>
235234
);

0 commit comments

Comments
 (0)