fix(e2e): improve stability of createWorkspace tests

blink-so[bot] · blink-so[bot] · commit 5e95f310cd9d · 2025-07-29T11:33:02.000Z
This commit addresses several potential sources of flakiness in the
createWorkspace e2e tests:

1. Enhanced disableDynamicParameters function:
   - Use networkidle instead of domcontentloaded for better page loading
   - Add explicit waits for form and checkbox visibility
   - Use more robust selectors for success messages
   - Add timeout buffers for UI state changes

2. Improved createWorkspace function:
   - Use networkidle for more reliable page loading
   - Add form readiness check before filling parameters
   - Add timeout buffer for form element rendering

3. Enhanced fillParameters function:
   - Add explicit timeout to parameter field selectors

These changes should significantly reduce test flakiness by ensuring
all UI elements are fully loaded and stable before interaction.
diff --git a/site/e2e/helpers.ts b/site/e2e/helpers.ts
@@ -120,13 +120,20 @@ export const createWorkspace = async (
 			: `${template.organization}/${template.name}`;
 
 	await page.goto(`/templates/${templatePath}/workspace`, {
-		waitUntil: "domcontentloaded",
+		waitUntil: "networkidle",
 	});
 	await expectUrl(page).toHavePathName(`/templates/${templatePath}/workspace`);
 
 	const name = randomName();
 	await page.getByLabel("name").fill(name);
 
+	// Wait for the form to be fully loaded before filling parameters
+	if (buildParameters.length > 0) {
+		await page.waitForSelector("form", { state: "visible" });
+		// Additional wait to ensure all form elements are rendered
+		await page.waitForTimeout(500);
+	}
+
 	await fillParameters(page, richParameters, buildParameters);
 
 	if (useExternalAuth) {
@@ -900,7 +907,7 @@ const fillParameters = async (
 
 		const parameterLabel = await page.waitForSelector(
 			`[data-testid='parameter-field-${richParameter.name}']`,
-			{ state: "visible" },
+			{ state: "visible", timeout: 10000 },
 		);
 
 		if (richParameter.type === "bool") {
@@ -1209,30 +1216,44 @@ export async function addUserToOrganization(
  * dynamic parameters by unchecking the "Enable dynamic parameters" checkbox.
  */
 export const disableDynamicParameters = async (
-	page: Page,
-	templateName: string,
-	orgName = defaultOrganizationName,
+        page: Page,
+        templateName: string,
+        orgName = defaultOrganizationName,
 ) => {
-	await page.goto(`/templates/${orgName}/${templateName}/settings`, {
-		waitUntil: "domcontentloaded",
-	});
-
-	// Find and uncheck the "Enable dynamic parameters" checkbox
-	const dynamicParamsCheckbox = page.getByRole("checkbox", {
-		name: /Enable dynamic parameters for workspace creation/,
-	});
-
-	// If the checkbox is checked, uncheck it
-	if (await dynamicParamsCheckbox.isChecked()) {
-		await dynamicParamsCheckbox.click();
-	}
-
-	// Save the changes
-	await page.getByRole("button", { name: /save/i }).click();
-
-	// Wait for the success message or page to update
-	await page.waitForSelector("text=Template updated successfully", {
-		state: "visible",
-		timeout: 10000,
-	});
-};
+        await page.goto(`/templates/${orgName}/${templateName}/settings`, {
+                waitUntil: "networkidle",
+        });
+
+        // Wait for the page to be fully loaded and the form to be visible
+        await page.waitForSelector("form", { state: "visible" });
+
+        // Find the "Enable dynamic parameters" checkbox and wait for it to be visible
+        const dynamicParamsCheckbox = page.getByRole("checkbox", {
+                name: /Enable dynamic parameters for workspace creation/,
+        });
+        
+        // Wait for the checkbox to be visible and stable
+        await dynamicParamsCheckbox.waitFor({ state: "visible" });
+        
+        // If the checkbox is checked, uncheck it
+        if (await dynamicParamsCheckbox.isChecked()) {
+                await dynamicParamsCheckbox.click();
+                
+                // Wait a bit for the UI to update after the click
+                await page.waitForTimeout(100);
+        }
+
+        // Find and click the save button
+        const saveButton = page.getByRole("button", { name: /save/i });
+        await saveButton.waitFor({ state: "visible" });
+        await saveButton.click();
+
+        // Wait for the success message with a more robust selector
+        await page.waitForSelector("[role='alert'], .MuiAlert-root, text=Template updated successfully", {
+                state: "visible",
+                timeout: 15000,
+        });
+        
+        // Additional wait to ensure the changes are persisted
+        await page.waitForTimeout(500);
+};
