separate single e2e tests to cover various scenarios

Adds helper methods to condense spec file and increase reusabilty. Introduces beforeEach and afterEach steps

Author: mohanrajpac

playwright.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
 	fullyParallel: true,
 	forbidOnly: !!process.env.CI,
 	retries: process.env.CI ? 2 : 0,
-	workers: process.env.CI ? 1 : undefined,
+	workers: 4,
 	reporter: 'html',
 	use: {
 		baseURL: process.env.WP_BASE_URL,

tests/e2e/feature-flags.spec.ts

@@ -3,7 +3,9 @@ import { ERROR_FLAG_EXISTS, ERROR_FLAG_INVALID } from '../../src/constants';
 import {
 	AddNewFlag,
 	AddNewFlagAndFill,
+	CloseSdkModal,
 	DisableFlag,
+	OpenSdkModal,
 	SaveFlags,
 	deleteLastFlag,
 } from './helper';
@@ -24,12 +26,23 @@ test.describe('Feature flags', () => {
 		).toBeVisible();
 	});
 
-	test('Create and delete flags e2e scenarios', async ({ page }) => {
-		//Create new flag
-		await AddNewFlagAndFill(page, 'test');
+	test.afterEach(async ({ page }) => {
+		await deleteLastFlag(page);
+	});
+
+	test('Create and save new flag successfully', async ({ page }) => {
+		await AddNewFlagAndFill(page, 'hello_test');
+		await SaveFlags(page);
+
+		expect(
+			await page.getByLabel('Dismiss this notice').innerText()
+		).toMatch(/Saved successfully!/);
+	});
+
+	test('Create new flag and disable it successfully', async ({ page }) => {
+		await AddNewFlagAndFill(page, 'test123');
 		await SaveFlags(page);
 
-		//Confirm save success
 		expect(
 			await page.getByLabel('Dismiss this notice').innerText()
 		).toMatch(/Saved successfully!/);
@@ -45,55 +58,70 @@ test.describe('Feature flags', () => {
 				.last()
 				.getByLabel('Flag disabled')
 		).toBeVisible();
+	});
+
+	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!/);
 
-		//Create another flag with same name
-		await AddNewFlagAndFill(page, 'test');
+		//Create another flag with same name should show error
+		await AddNewFlagAndFill(page, 'testDuplicate');
 		expect(page.getByText(ERROR_FLAG_EXISTS)).toBeVisible();
 		expect(page.getByRole('button', { name: 'Save' })).toBeDisabled();
 
-		//update flag name to be unique and check text validation.
-		await AddNewFlag(page, 'test 2');
+		//update flag name to be unique but still invalid
+		await AddNewFlag(page, 'test duplicate');
 		expect(page.getByText(ERROR_FLAG_INVALID)).toBeVisible();
 		expect(page.getByRole('button', { name: 'Save' })).toBeDisabled();
 
 		//Delete the flag
-		await page
-			.locator('id=mr-feature-flag-item')
-			.last()
-			.getByLabel('Delete Flag')
-			.click();
-		// await deleteLastFlag(page);
-		await page.getByRole('button', { name: 'Yes' }).click();
-		//Confirm delete success
+		await deleteLastFlag(page);
+
 		expect(
 			await page.getByLabel('Dismiss this notice').innerText()
 		).toMatch(/Saved successfully!/);
+	});
+
+	test('Open SDK modal and test the clipboard', async ({ page }) => {
+		const flagName = 'testWidget';
+		await AddNewFlagAndFill(page, flagName);
+		await SaveFlags(page);
 
-		//Check SDK modal details.
-		await page.getByLabel('Click to see SDK setting').last().click();
 		expect(
-			page.getByRole('heading', { name: 'SDK for feature flag: test' })
+			await page.getByLabel('Dismiss this notice').innerText()
+		).toMatch(/Saved successfully!/);
+
+		await OpenSdkModal(page);
+
+		expect(
+			page.getByRole('heading', {
+				name: `SDK for feature flag: ${flagName}`,
+			})
 		).toBeVisible();
 
 		// Check PHP Snippet clipboard details
 		await page.getByLabel('Copy to clipboard').first().click();
 		const phpClipboardText = await page.evaluate(
 			'navigator.clipboard.readText()'
 		);
-		expect(phpClipboardText).toContain("Flag::is_enabled( 'test' )");
+		expect(phpClipboardText).toContain(`Flag::is_enabled( '${flagName}' )`);
 
 		// Check JS Snippet clipboard details
 		await page.getByLabel('Copy to clipboard').nth(1).click();
 		const jsClipboardText: string = await page.evaluate(
 			'navigator.clipboard.readText()'
 		);
 		expect(jsClipboardText).toContain(
-			"window.mrFeatureFlags.isEnabled('test')"
+			`window.mrFeatureFlags.isEnabled('${flagName}')`
 		);
-		//Close SDK modal
-		await page.locator('button[aria-label="Close"]').click();
 
-		//Delete the created flag
-		await deleteLastFlag(page);
+		//Close SDK modal
+		await CloseSdkModal(page);
 	});
 });

tests/e2e/helper/index.ts

@@ -61,3 +61,23 @@ export async function DisableFlag(page: Page, isEnabled: boolean) {
 		{ box: true }
 	);
 }
+
+export async function OpenSdkModal(page: Page) {
+	await test.step(
+		'Open sdk modal',
+		async () => {
+			await page.getByLabel('Click to see SDK setting').last().click();
+		},
+		{ box: true }
+	);
+}
+
+export async function CloseSdkModal(page: Page) {
+	await test.step(
+		'Close sdk modal',
+		async () => {
+			await page.locator('button[aria-label="Close"]').click();
+		},
+		{ box: true }
+	);
+}