Trying to fix the two broken playwright tests (#12255)

* Implementing changes to fix 2 broken Playwright tests

* Fixing the two broken tests in Playwright

* Removing timeout

* fixing delete ttd test

frontend/testing/playwright/helpers/BasePage.ts

@@ -34,4 +34,12 @@ export class BasePage extends RouterRoute {
 
     return text;
   }
+
+  public async waitForXAmountOfMilliseconds(milliseconds: number): Promise<void> {
+    await new Promise((resolve) =>
+      setTimeout(() => {
+        return resolve('');
+      }, milliseconds),
+    );
+  }
 }

frontend/testing/playwright/playwright.config.ts

@@ -14,7 +14,6 @@ export default defineConfig<ExtendedTestOptions>({
     baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL,
   },
   fullyParallel: true,
-  timeout: 3 * 60 * 1000,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: 1, // Github actions always use only 1, so we set to 1 locally as well

frontend/testing/playwright/tests/main-navigation-between-sub-apps/main-navigation-between-sub-apps.spec.ts

@@ -14,6 +14,8 @@ import { DeployPage } from '../../pages/DeployPage';
 import { Header } from '../../components/Header';
 import { Gitea } from '../../helpers/Gitea';
 
+const getTtdApp = (appName: string) => `ttd-app-${appName}`;
+
 // Before the tests starts, we need to create the dashboard app
 test.beforeAll(async ({ testAppName, request, storageState }) => {
   // Create a new app
@@ -28,7 +30,7 @@ test.afterAll(async ({ request, testAppName }) => {
   expect(response.ok()).toBeTruthy();
 
   const responseTTD = await request.delete(
-    gitea.getDeleteAppEndpoint({ org: 'ttd', app: testAppName }),
+    gitea.getDeleteAppEndpoint({ org: 'ttd', app: getTtdApp(testAppName) }),
   );
   expect(responseTTD.ok()).toBeTruthy();
 });
@@ -138,19 +140,20 @@ test('That it is possible to navigate from overview to the deploy page and back
   storageState,
 }) => {
   const testDepartmentOrg: string = 'ttd';
+  const appName: string = getTtdApp(testAppName); // Need a different app name than the one generated by the user in beforeAll()
 
-  const designerApi = new DesignerApi({ app: testAppName });
+  const designerApi = new DesignerApi({ app: appName });
   const response = await designerApi.createApp(
     request,
     storageState as StorageState,
     testDepartmentOrg,
   );
   expect(response.ok()).toBeTruthy();
 
-  const dashboardPage = new DashboardPage(page, { app: testAppName });
-  const overviewPage = new OverviewPage(page, { app: testAppName });
-  const deployPage = new DeployPage(page, { app: testAppName });
-  const header = new Header(page, { app: testAppName });
+  const dashboardPage = new DashboardPage(page, { app: appName });
+  const overviewPage = new OverviewPage(page, { app: appName });
+  const deployPage = new DeployPage(page, { app: appName });
+  const header = new Header(page, { app: appName });
 
   await dashboardPage.loadDashboardPage();
   await dashboardPage.verifyDashboardPage();
@@ -161,13 +164,18 @@ test('That it is possible to navigate from overview to the deploy page and back
   await dashboardPage.checkThatTTDApplicationsHeaderIsVisible();
 
   expect(dashboardPage.org).toEqual('ttd');
-  await dashboardPage.clickOnTestAppEditButton(testAppName);
+
+  await dashboardPage.typeInSearchField(appName);
+  await dashboardPage.checkThatAppIsVisible(appName);
+  await dashboardPage.clickOnTestAppEditButton(appName);
 
   // As we have changed env.org to 'ttd', we need to update the org of the new classes to make sure it works.
   overviewPage.updateOrgNameEnv(testDepartmentOrg);
   deployPage.updateOrgNameEnv(testDepartmentOrg);
   header.updateOrgNameEnv(testDepartmentOrg);
 
+  // overviewPage.waitForXAmountOfMilliseconds(3000);
+
   await overviewPage.verifyOverviewPage();
 
   // Check Navigation

frontend/testing/playwright/tests/settings-modal/settings-modal.spec.ts

@@ -101,6 +101,9 @@ test('That it is possible to edit security level on "Policy editor" tab, and tha
   const securityValueAfterChange = await policyEditor.getSelectedSecurityLevel();
   expect(securityValueAfterChange).toBe(securityLevel3Text);
 
+  // In dev, the API call to save the policy takes some time, and therefore we add functionality to wait for a while to wait for the save to happen
+  await settingsModal.waitForXAmountOfMilliseconds(4000);
+
   await settingsModal.navigateToTab('about');
   await settingsModal.verifyThatTabIsVisible('about');
   await settingsModal.verifyThatTabIsHidden('policy');