update e2e tests with screenshots

Author: mohanrajpac

package.json

@@ -13,6 +13,7 @@
 	"prepare": "husky",
 	"start": "wp-scripts start",
 	"test:e2e": "wp-scripts test-playwright",
+	"test:e2e:debug": "wp-scripts test-playwright --ui",
 	"test:js": "wp-scripts test-unit-js",
 	"test:js:update": "wp-scripts test-unit-js --updateSnapshot",
 	"test:performance": "wp-scripts test-playwright --config tests/performance/playwright.config.ts",

playwright.config.ts

@@ -17,7 +17,7 @@ export default defineConfig({
 	use: {
 		baseURL: process.env.WP_BASE_URL,
 		trace: 'on-first-retry',
-		permissions: ['clipboard-read'],
+		permissions: ['clipboard-write', 'clipboard-read'],
 	},
 
 	projects: [

tests/e2e/feature-flags.spec.ts

@@ -97,14 +97,16 @@ test.describe('Feature flags', () => {
 		).toBeVisible();
 
 		// Check PHP Snippet clipboard details
-		await page.getByLabel('Copy to clipboard').first().click();
+		await page.getByRole('button').nth(1).click();
+
+		// await page.getByLabel('Copy to clipboard').first().click();
 		const phpClipboardText = await page.evaluate(
 			'navigator.clipboard.readText()'
 		);
 		expect(phpClipboardText).toContain(`Flag::is_enabled( '${flagName}' )`);
 
 		// Check JS Snippet clipboard details
-		await page.getByLabel('Copy to clipboard').nth(1).click();
+		await page.getByRole('button').nth(2).click();
 		const jsClipboardText: string = await page.evaluate(
 			'navigator.clipboard.readText()'
 		);

tests/e2e/screenshots/delete-flag-modal.png

@@ -1,4 +1,4 @@
-import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+import { test } from '@wordpress/e2e-test-utils-playwright';
 import {
 	AddNewFlagAndFill,
 	CloseSdkModal,
@@ -23,7 +23,9 @@ test.describe('Visual tests', () => {
 	});
 
 	test('Feature flags screen without flags', async ({ page }) => {
-		await expect(page).toHaveScreenshot('no-flags.png');
+		await page
+			.locator('#codeb_feature_flags_settings_screen')
+			.screenshot({ path: 'tests/e2e/screenshots/no-flags.png' });
 	});
 
 	test('Feature flags screen with some flags', async ({ page }) => {
@@ -33,13 +35,18 @@ test.describe('Visual tests', () => {
 		await AddNewFlagAndFill(page, 'healthCheck');
 
 		await SaveFlags(page);
-		await expect(page).toHaveScreenshot('some-flags.png');
+
+		await page
+			.locator('#codeb_feature_flags_settings_screen')
+			.screenshot({ path: 'tests/e2e/screenshots/some-flags.png' });
 	});
 
 	test('Toggle feature flag', async ({ page }) => {
 		await AddNewFlagAndFill(page, 'auth0');
 		await DisableFlag(page, true);
-		await expect(page).toHaveScreenshot('flag-disabled.png');
+		await page
+			.locator('#codeb_feature_flags_settings_screen')
+			.screenshot({ path: 'tests/e2e/screenshots/flag-disabled.png' });
 	});
 
 	test('Delete flag modal', async ({ page }) => {
@@ -51,7 +58,11 @@ test.describe('Visual tests', () => {
 			.getByLabel('Delete Flag')
 			.click();
 
-		await expect(page).toHaveScreenshot('delete-flag-modal.png');
+		await page
+			.locator('#codeb_feature_flags_settings_screen')
+			.screenshot({
+				path: 'tests/e2e/screenshots/delete-flag-modal.png',
+			});
 
 		await page.getByRole('button', { name: 'Yes' }).click();
 	});
@@ -60,7 +71,9 @@ test.describe('Visual tests', () => {
 		await AddNewFlagAndFill(page, 'drag-drop');
 		await OpenSdkModal(page);
 
-		await expect(page).toHaveScreenshot('sdk-modal.png');
+		await page
+			.locator('#codeb_feature_flags_settings_screen')
+			.screenshot({ path: 'tests/e2e/screenshots/sdk-modal.png' });
 
 		await CloseSdkModal(page);
 	});