Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix broken Playwright tests #1819

Merged
merged 6 commits into from
Sep 28, 2024
Merged

Fix broken Playwright tests #1819

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
714cc7b
Playwright test: Select active viewport only
brandonpayton Sep 28, 2024
7bd7ffd
Playwright tests: Fix settings open and save button selection
brandonpayton Sep 28, 2024
abf7020
Cypress tests: Select active viewport only
brandonpayton Sep 28, 2024
7a51aa6
Playwright tests: await expect() calls
brandonpayton Sep 28, 2024
a41b8b0
Make base64 Blueprint test simpler to avoid unrelated problems
brandonpayton Sep 28, 2024
5f76f6f
Attempt to fix Cypress tests
brandonpayton Sep 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/playground/website/cypress/e2e/query-api.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
Expand Down
8 changes: 4 additions & 4 deletions packages/playground/website/cypress/support/commands.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
8 changes: 4 additions & 4 deletions packages/playground/website/playwright/e2e/blueprints.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ({
Expand All @@ -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'
);
});
34 changes: 17 additions & 17 deletions packages/playground/website/playwright/e2e/website-ui.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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);
});
});

Expand All @@ -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);
});
Expand All @@ -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();
});
Expand Down
4 changes: 3 additions & 1 deletion packages/playground/website/playwright/playground-fixtures.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
},
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/website/playwright/playwright.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bgrgicak, why do we opt out of parallel tests on CI, and should we continue opting out of parallel tests when running locally?

I enabled more workers to speed local testing, but we can change it back if needed.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They were occasionally failing locally and this made them more robust.
I just went with disabling parallel tests to get it out quicker. We can test it now with multiple workers and see how well it works.

/* 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. */
Expand Down
14 changes: 8 additions & 6 deletions packages/playground/website/playwright/website-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down
3 changes: 1 addition & 2 deletions packages/playground/website/src/components/playground-viewport/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
);
Expand Down
Loading