define baseURL and page via fixtures + add new test

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 } );
 } );