Aligning a bit the pre-existing e2e tests with the e2e structure

Author: latin-panda

packages/web-forms/e2e/page-objects/pages/PreviewPage.ts

@@ -40,7 +40,7 @@ export class PreviewPage {
 		await expect(link).toBeVisible();
 		await link.click();
 
-		// Wait for form to load and verify the form title
+		// Wait for form to load and verify the form title ensuring the form is ready.
 		const title = this.page.locator('.form-title').getByRole('heading', { name: formTitle });
 		await expect(title).toBeVisible();
 	}

packages/web-forms/e2e/specs/build/preview-form-render.test.ts

@@ -0,0 +1,130 @@
+import { faker } from '@faker-js/faker';
+import { expect, Page, test } from '@playwright/test';
+import { PreviewPage } from '../../page-objects/pages/PreviewPage.js';
+
+const expandAllCategories = async (page: Page) => {
+	await page.evaluate(() => {
+		const collapsedDetails = document.querySelectorAll<HTMLDetailsElement>('details:not([open])');
+
+		collapsedDetails.forEach((details) => {
+			details.open = true;
+		});
+	});
+};
+
+test.describe('Preview Form Render', () => {
+	test('demo forms load', async ({ context, page }) => {
+		const previewPage = new PreviewPage(page);
+		await previewPage.goToPage();
+
+		const formPreviewLinks = await page.locator('.form-preview-link').all();
+
+		expect(formPreviewLinks.length).toBeGreaterThan(0);
+
+		for (const link of formPreviewLinks) {
+			const [formPreviewPage] = await Promise.all([context.waitForEvent('page'), link.click()]);
+
+			await formPreviewPage.waitForSelector(
+				'.form-initialization-status.error, .form-initialization-status.ready',
+				{
+					state: 'attached',
+				}
+			);
+
+			const [failureDialog] = await formPreviewPage.locator('.form-load-failure-dialog').all();
+
+			expect(failureDialog).toBeUndefined();
+
+			await formPreviewPage.close();
+		}
+	});
+
+	test('all forms are rendered and there is no console error', async ({ page, browserName }) => {
+		let consoleErrors = 0;
+		page.on('console', (msg) => {
+			if (msg.type() === 'error' || msg.type() === 'warning') {
+				consoleErrors++;
+			}
+		});
+
+		const previewPage = new PreviewPage(page);
+		await previewPage.goToPage();
+
+		// this ensures that Vue application is loaded before proceeding forward.
+		await expect(page.getByText('Demo Forms')).toBeVisible();
+
+		// Let's expand all categories, so that Form list is visible
+		await expandAllCategories(page);
+
+		const forms = await page.locator('ul.form-list li a').all();
+
+		expect(forms.length).toBeGreaterThan(0);
+
+		for (const form of forms) {
+			await form.click();
+
+			// Traverse the form element by element
+			// if focused element is an editable textbox then fill it
+			// Exit the loop when focus is on the Send button
+			while (true) {
+				const onSendButton = await page.evaluate(() => {
+					const activeElement = document.activeElement;
+					return activeElement?.tagName === 'BUTTON' && activeElement.textContent === 'Send';
+				});
+
+				if (onSendButton) {
+					break;
+				}
+
+				await page.keyboard.press(browserName == 'webkit' ? 'Alt+Tab' : 'Tab');
+
+				const inputType = await page.evaluate(() => {
+					const isInputElement = (
+						activeElement: Element | null
+					): activeElement is HTMLInputElement => {
+						return activeElement?.tagName === 'INPUT';
+					};
+
+					const activeElement = document.activeElement;
+
+					if (
+						!isInputElement(activeElement) ||
+						activeElement.hasAttribute('readonly') ||
+						activeElement.hasAttribute('disabled')
+					) {
+						return null;
+					}
+
+					return activeElement.type;
+				});
+
+				if (inputType === 'text') {
+					await page.keyboard.type(faker.internet.displayName());
+				}
+				// Select the next option, if the last option is selected by default
+				// then browser selects the first one.
+				else if (inputType === 'radio') {
+					await page.keyboard.press('ArrowDown');
+				}
+				// Tab behaviour for checkboxes is different, each Tab press moves the focus
+				// to the next option. Here we are toggling every checkbox option.
+				else if (inputType === 'checkbox') {
+					// Toggle the option
+					await page.keyboard.press('Space');
+				}
+			}
+
+			const langChanger = page.locator('.larger-screens .language-changer');
+
+			if ((await langChanger.count()) > 0) {
+				await langChanger.click();
+				await page.locator('.language-dd-label').last().click();
+			}
+
+			await page.goBack();
+			await expandAllCategories(page);
+		}
+
+		expect(consoleErrors).toBe(0);
+	});
+});

packages/web-forms/e2e/specs/build/style.test.ts

@@ -1,7 +1,9 @@
 import { expect, test } from '@playwright/test';
+import { PreviewPage } from '../../page-objects/pages/PreviewPage.js';
 
 test('Build includes component-defined styles', async ({ page }) => {
-	await page.goto('http://localhost:5174/');
+	const previewPage = new PreviewPage(page);
+	await previewPage.goToPage();
 
 	// This ensures that the application is loaded before proceeding forward.
 	await expect(page.getByText('Demo Forms').first()).toBeVisible();

packages/web-forms/e2e/specs/build/vue.test.ts

@@ -34,19 +34,19 @@ test.describe('Note Question Type', () => {
 		await formPage.expectLabelAtIndex('', 2, false);
 		await formPage.expectHintAtIndex('Hint-only note', 1);
 
-		await formPage.expectLabelAtIndex('A note with a default value', 3);
+		await formPage.expectLabel('A note with a default value');
 		await formPage.expectNoteAtIndex('A value', 0);
 
-		await formPage.expectLabelAtIndex('A note with a calculation', 4);
+		await formPage.expectLabel('A note with a calculation');
 		await formPage.expectNoteAtIndex('A value', 1);
 
-		await formPage.expectLabelAtIndex('A readonly integer with value', 8);
+		await formPage.expectLabel('A readonly integer with value');
 		await formPage.expectNoteAtIndex('3', 2);
 
-		await formPage.expectLabelAtIndex('A note with decimal type calculated from int', 9);
+		await formPage.expectLabel('A note with decimal type calculated from int');
 		await formPage.expectNoteAtIndex('4.5', 3);
 
-		await formPage.expectLabelAtIndex('A note with geopoint type', 10);
+		await formPage.expectLabel('A note with geopoint type');
 		await formPage.geopoint.expectGeopointFormattedValue([
 			'Accuracy: 150m',
 			'Latitude: 38.253094215699576',