adds visual comparison test

Author: mohanrajpac

tests/e2e/feature-flags.spec.ts

@@ -7,7 +7,7 @@ import {
 	DisableFlag,
 	OpenSdkModal,
 	SaveFlags,
-	deleteLastFlag,
+	deleteAllFlags,
 } from './helper';
 
 // eslint-disable-next-line
@@ -16,18 +16,14 @@ test.use({ storageState: process.env.WP_AUTH_STORAGE });
 test.describe('Feature flags', () => {
 	test.beforeEach(async ({ page, admin }) => {
 		await admin.visitAdminPage('/');
-
-		//Find the feature flags in side menu
 		await page.getByRole('link', { name: 'Feature Flags' }).click();
-
-		//Confirm the setting page header
 		await expect(
 			page.getByRole('heading', { name: 'Feature Flags' })
 		).toBeVisible();
 	});
 
 	test.afterEach(async ({ page }) => {
-		await deleteLastFlag(page);
+		await deleteAllFlags(page);
 	});
 
 	test('Create and save new flag successfully', async ({ page }) => {
@@ -61,11 +57,9 @@ test.describe('Feature flags', () => {
 	});
 
 	test('Check duplicate and invalid flag', async ({ page }) => {
-		//Create new flag
 		await AddNewFlagAndFill(page, 'testDuplicate');
 		await SaveFlags(page);
 
-		//Confirm save success
 		expect(
 			await page.getByLabel('Dismiss this notice').innerText()
 		).toMatch(/Saved successfully!/);
@@ -80,9 +74,6 @@ test.describe('Feature flags', () => {
 		expect(page.getByText(ERROR_FLAG_INVALID)).toBeVisible();
 		expect(page.getByRole('button', { name: 'Save' })).toBeDisabled();
 
-		//Delete the flag
-		await deleteLastFlag(page);
-
 		expect(
 			await page.getByLabel('Dismiss this notice').innerText()
 		).toMatch(/Saved successfully!/);
@@ -121,7 +112,6 @@ test.describe('Feature flags', () => {
 			`window.codebFeatureFlags.isEnabled('${flagName}')`
 		);
 
-		//Close SDK modal
 		await CloseSdkModal(page);
 	});
 });

tests/e2e/helper/index.ts

@@ -10,12 +10,30 @@ export async function deleteLastFlag(page: Page) {
 				.last()
 				.getByLabel('Delete Flag')
 				.click();
+
 			await page.getByRole('button', { name: 'Yes' }).click();
 		},
 		{ box: true }
 	);
 }
 
+export async function deleteAllFlags(page: Page) {
+	await test.step(
+		'Delete all flag',
+		async () => {
+			const count = await page
+				.locator('id=mr-feature-flag-item')
+				.getByLabel('Delete Flag')
+				.count();
+
+			if (count > 0) {
+				for (let i = 0; i < count; ++i) await deleteLastFlag(page);
+			}
+		},
+		{ box: true }
+	);
+}
+
 export async function AddNewFlag(page: Page, text: string) {
 	await test.step(
 		'Add new flag',

tests/e2e/visual-comparison.spec.ts

@@ -0,0 +1,65 @@
+import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+import {
+	AddNewFlagAndFill,
+	CloseSdkModal,
+	DisableFlag,
+	OpenSdkModal,
+	SaveFlags,
+	deleteAllFlags,
+} from './helper';
+
+test.describe('Visual tests', () => {
+	test.use({ storageState: process.env.WP_AUTH_STORAGE });
+
+	test.beforeEach(async ({ page, admin }) => {
+		await admin.visitAdminPage('/');
+		await page.getByRole('link', { name: 'Feature Flags' }).click();
+	});
+
+	test.afterEach(async ({ page }) => {
+		await deleteAllFlags(page);
+	});
+
+	test('Feature flags screen without flags', async ({ page }) => {
+		await expect(page).toHaveScreenshot('no-flags.png');
+	});
+
+	test('Feature flags screen with some flags', async ({ page }) => {
+		await AddNewFlagAndFill(page, 'hello_test');
+		await AddNewFlagAndFill(page, '123');
+		await DisableFlag(page, true);
+		await AddNewFlagAndFill(page, 'healthCheck');
+
+		await SaveFlags(page);
+		await expect(page).toHaveScreenshot('some-flags.png');
+	});
+
+	test('Toggle feature flag', async ({ page }) => {
+		await AddNewFlagAndFill(page, 'auth0');
+		await DisableFlag(page, true);
+		await expect(page).toHaveScreenshot('flag-disabled.png');
+	});
+
+	test('Delete flag modal', async ({ page }) => {
+		await AddNewFlagAndFill(page, 'helloWorld');
+
+		await page
+			.locator('id=mr-feature-flag-item')
+			.last()
+			.getByLabel('Delete Flag')
+			.click();
+
+		await expect(page).toHaveScreenshot('delete-flag-modal.png');
+
+		await page.getByRole('button', { name: 'Yes' }).click();
+	});
+
+	test('SDK modal', async ({ page }) => {
+		await AddNewFlagAndFill(page, 'drag-drop');
+		await OpenSdkModal(page);
+
+		await expect(page).toHaveScreenshot('sdk-modal.png');
+
+		await CloseSdkModal(page);
+	});
+});