Create example visreg test using Playground

package.json

@@ -327,6 +327,7 @@
 		"test:e2e:playwright:debug": "npm run test:e2e:debug",
 		"test:e2e:storybook": "playwright test --config test/storybook-playwright/playwright.config.ts",
 		"test:e2e:watch": "npm run test:e2e -- --watch",
+		"test:visreg": "npx playwright test test/visreg/example.spec.js",
 		"test:native": "cross-env NODE_ENV=test jest --config test/native/jest.config.js",
 		"test:native:watch": "npm run test:native -- --watch",
 		"test:native:clean": "jest --clearCache --config test/native/jest.config.js; rm -rf $TMPDIR/jest_*",

test/visreg/example.spec.js

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { test, expect } from '@playwright/test';
+
+test( 'WP Editor default view', async ( { context, page } ) => {
+	// 1. Go to the Gutenberg PR Preview page and submit the PR number.
+	await page.goto( 'https://playground.wordpress.net/gutenberg.html' );
+
+	const prInput = page.getByLabel( 'Pull request number or URL:' );
+
+	await prInput.fill( process.env.PR_NUMBER );
+	await prInput.press( 'Enter' );
+
+	// 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
+	);
+
+	// 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();
+
+	await wpPage.goto( wpIframeURL + '/wp-admin/post-new.php' );
+	await wpPage.getByLabel( 'Close', { exact: true } ).click();
+
+	// 4. Add an extra wait for the UI to stabilize.
+	await wpPage.waitForTimeout( 5_000 );
+
+	// 5. Here, some UI manipulation can be done. For example:
+	await wpPage.keyboard.type( 'Hello, World!' );
+
+	// 6. Compare the screenshot of the full page.
+	await expect( wpPage ).toHaveScreenshot( { fullPage: true } );
+} );