diff --git a/test/visreg/example.spec.js b/test/visreg/example.spec.js index 1509a38e18aa3c..350a6a54a6f890 100644 --- a/test/visreg/example.spec.js +++ b/test/visreg/example.spec.js @@ -1,39 +1,85 @@ /** * External dependencies */ -import { test, expect } from '@playwright/test'; +import { test as base, expect } from '@playwright/test'; -test.use( { baseURL: 'https://playground.wordpress.net' } ); +const PLAYGROUND_URL = 'https://playground.wordpress.net'; -test( 'WP Editor default view', async ( { context, page } ) => { - if ( process.env.PR_NUMBER ) { - // 1. Go to the Gutenberg PR Preview page and submit the PR number. - await page.goto( `/gutenberg.html?pr=${ process.env.PR_NUMBER }` ); - } else { - // 1. Go to the WordPress Playground (Gutenberg plugin disabled). - await page.goto( '/' ); - } +const test = base.extend( { + // Set up the baseURL fixture for the test. This will be the URL of the + // WordPress instance in Playground. + baseURL: async ( { context }, use ) => { + const page = await context.newPage(); - // 2. Get the URL of the iframed WordPress instance so we can strip the - // Playground UI off. - await page.waitForFunction( 'window?.playground?.absoluteUrl' ); - const wpIframeURL = await page.evaluate( - async () => await window.playground.absoluteUrl - ); + if ( process.env.PR_NUMBER ) { + // 1. Go to the Gutenberg PR Preview page and submit the PR number. + await page.goto( + `${ PLAYGROUND_URL }/gutenberg.html?pr=${ process.env.PR_NUMBER }` + ); + } else { + // 1. Go to the WordPress Playground (Gutenberg plugin disabled). + await page.goto( PLAYGROUND_URL ); + } - // 3. Open WordPress in a new page in the same context. We need to keep the - // original page open so the Playground instance is not destroyed. - const wpPage = await context.newPage(); + // 2. Wait for WordPress to be fully provisioned. + await expect( + page + .frameLocator( 'iframe#playground-viewport' ) + .frameLocator( 'iframe#wp' ) + .getByRole( 'menuitem', { name: 'My WordPress Website' } ) + ).toBeVisible( { timeout: 30_000 } ); - await wpPage.goto( wpIframeURL + '/wp-admin/post-new.php' ); - await wpPage.getByLabel( 'Close', { exact: true } ).click(); // Close the Welcome Guide. + // 3. Get the URL of the iframed WordPress instance. + const wpURL = await page.evaluate( + async () => await window.playground.absoluteUrl + ); - // 4. Add an extra wait for the UI to stabilize. - await wpPage.waitForTimeout( 5_000 ); + // 4. Set the base URL for the test. + await use( wpURL ); + }, - // 5. Here, some UI manipulation can be done. For example: - await wpPage.keyboard.type( 'Hello, World!' ); + // Set up the page fixture for the test. This will be a new page in the same + // context as the Playground's WordPress instance. + page: async ( { context }, use ) => { + const page = await context.newPage(); - // 6. Compare the screenshot of the full page. - await expect( wpPage ).toHaveScreenshot( { fullPage: true } ); + await use( page ); + + await page.close(); + }, +} ); + +// With Playground, we can spin up a fresh WP for each test (via the baseURL +// fixture above). It means we can run all the tests in the full parallel mode! +test.describe.configure( { mode: 'parallel' } ); + +/* + * The tests below are just examples to show how to use the Playwright API to + * take visual snapshots of the WordPress Editor UI. They are not meant to be a + * comprehensive test suite. + */ + +test( 'WP Editor default view', async ( { page, baseURL } ) => { + await page.goto( baseURL + '/wp-admin/post-new.php' ); + await page.pause(); + await page + .getByLabel( 'Welcome to the block editor' ) + .getByLabel( 'Close' ) + .click(); + + // Wait for the UI to stabilize. Not ideal, but good enough for the PoC. + await page.waitForTimeout( 5_000 ); // eslint-disable-line no-restricted-syntax + + await page.keyboard.type( 'Hello, World!' ); + + await expect( page ).toHaveScreenshot( { fullPage: true } ); +} ); + +test( 'WP Site Editor "Pages" view', async ( { page, baseURL } ) => { + await page.goto( baseURL + '/wp-admin/site-editor.php?path=%2Fpage' ); + + // Wait for the UI to stabilize. Not ideal, but good enough for the PoC. + await page.waitForTimeout( 5_000 ); // eslint-disable-line no-restricted-syntax + + await expect( page ).toHaveScreenshot( { fullPage: true } ); } ); diff --git a/test/visreg/example.spec.js-snapshots/WP-Site-Editor-Pages-view-1-darwin.png b/test/visreg/example.spec.js-snapshots/WP-Site-Editor-Pages-view-1-darwin.png new file mode 100644 index 00000000000000..5c0c568894d549 Binary files /dev/null and b/test/visreg/example.spec.js-snapshots/WP-Site-Editor-Pages-view-1-darwin.png differ