refactor, address reviews, fix bugs

Author: Katka92

playwright.config.ts

@@ -72,9 +72,7 @@ try {
             )
           : []
         )
-      ],
-      screenshot: 'only-on-failure',
-      video: 'retain-on-failure',
+      ]
     }));
   }
 

src/ui/common.ts

@@ -16,12 +16,21 @@ export async function checkWebsiteStatus(
 }
 
 export async function waitForPageLoad(page: Page, name: string) {
-    await page.getByRole('progressbar').waitFor({ state: 'hidden', timeout: 20000 });
+    const progressBars = page.getByRole('progressbar');
+    // Get all progressbar elements and wait until all are hidden
+    const bars = await progressBars.all();
+    if (bars.length > 0) {
+        await Promise.all(
+            bars.map(bar => expect(bar).toBeHidden({ timeout: 10000 }))
+        );
+    }
 
-    await expect(page.getByTestId('sidebar-root')).toBeAttached();
-
-    await page.getByRole('heading', { name: name }).waitFor({ state: 'visible', timeout: 20000 });
+    await expect(page.getByTestId('sidebar-root')).toBeAttached({ timeout: 5000 });
+    await expect(page.getByRole('heading', { name: name })).toBeVisible({ timeout: 20000 });
     await page.waitForLoadState();
-    await page.waitForTimeout(500);
+}
 
+export async function openTab(page: Page, tabName: string) {
+    const tab = page.getByRole('tablist').getByText(tabName);
+    await tab.click();
 }

src/ui/page-objects/dependencies_po.ts

@@ -1,9 +1,9 @@
 /**
- * Git-related Page Objects
+ * Dependencies Page Objects
  *
- * Contains locators for Git provider UI elements (GitHub, GitLab)
+ * Contains locators for Dependencies tab UI elements
  */
 export const DependenciesPO = {
-    titelsArray: ['Depends on components', 'Depends on resources', 'Has subcomponents', 'Provided APIs', 'Consumed APIs'],
+    titles: ['Depends on components', 'Depends on resources', 'Has subcomponents', 'Provided APIs', 'Consumed APIs'],
     relationsTitle: 'Relations',
 }

src/ui/plugins/dependencies/dependenciesUiPlugin.ts

@@ -1,23 +1,18 @@
 import { expect, Page } from '@playwright/test';
 import { DependenciesPO } from '../../page-objects/dependencies_po';
+import { waitForPageLoad } from '../../common';
 
 export class DependenciesUiPlugin {
     private readonly componentName: string;
-    private readonly sourceRepoUrl: string;
-    private readonly gitOpsRepoUrl: string;
 
     constructor(
         componentName: string,
-        sourceRepoUrl: string,
-        gitOpsRepoUrl: string
     ) {
         this.componentName = componentName;
-        this.sourceRepoUrl = sourceRepoUrl;
-        this.gitOpsRepoUrl = gitOpsRepoUrl;
     }
 
     async checkAllBoxesPresent(page: Page) {
-        for (const title of DependenciesPO.titelsArray) {
+        for (const title of DependenciesPO.titles) {
             await expect(page.getByRole('heading', { name: title })).toBeVisible();
         }
     }
@@ -36,6 +31,6 @@ export class DependenciesUiPlugin {
         const nodeLocator = page.getByTestId("node").filter({ hasText: `${this.componentName}-gitops` });
         await expect(nodeLocator).toBeVisible();
         await nodeLocator.click();
-        await expect(page.getByRole('heading', { name: this.componentName })).toBeVisible();
+        await waitForPageLoad(page, `${this.componentName}-gitops`);
     }
 }

src/ui/uiComponent.ts

@@ -69,11 +69,7 @@ export class UiComponent {
       testItem.getRegistryType(),
       component.getRegistry()
     );
-    const dependencies = new DependenciesUiPlugin(
-      name,
-      component.getGit().getSourceRepoUrl(),
-      component.getGit().getGitOpsRepoUrl()
-    );
+    const dependencies = new DependenciesUiPlugin(name);
     return new UiComponent(component, git, docs, registry, dependencies);
   }
 
@@ -134,7 +130,7 @@ export class UiComponent {
    *
    * @returns The DependenciesUiPlugin instance for UI automation
    */
-  getDependencies(): DependenciesUiPlugin {
+  public getDependencies(): DependenciesUiPlugin {
     return this.dependencies
   }
 }

tests/ui/ui.test.ts

@@ -1,7 +1,7 @@
 import { createBasicFixture } from '../../src/utils/test/fixtures';
 import { UiComponent } from '../../src/ui/uiComponent';
 import { CommonPO } from '../../src/ui/page-objects/common_po';
-import { waitForPageLoad } from '../../src/ui/common';
+import { openTab, waitForPageLoad } from '../../src/ui/common';
 import { DependenciesUiPlugin } from '../../src/ui/plugins/dependencies/dependenciesUiPlugin';
 
 /**
@@ -36,7 +36,7 @@ test.describe('RHTAP UI Test Suite', () => {
   });
 
   test.describe('Go to home page', () => {
-    test('open developer hub and log in', async ({ page }) => {
+    test('open developer hub', async ({ page }) => {
       await page.goto(component.getCoreComponent().getDeveloperHub().getUrl(), {
         timeout: 20000,
       });
@@ -56,8 +56,6 @@ test.describe('RHTAP UI Test Suite', () => {
       }
 
       await page.goto(component.getComponentUrl(), { timeout: 20000 });
-
-      await page.waitForLoadState('domcontentloaded');
       await waitForPageLoad(page, component.getCoreComponent().getName());
 
       await component.getGit()!.checkViewSourceLink(page);
@@ -165,16 +163,23 @@ test.describe('RHTAP UI Test Suite', () => {
       }, {timeout: 30000});
 
       await test.step('Check gitops git link', async () => {
-        await component.getGit()?.checkViewSourceLink(page);
+        // Skip test for not yet supported git providers
+        if (component.getGit() === undefined) {
+          console.warn(`Skipping Git test as testing ${component.getCoreComponent().getGit().getGitType()} is not supported`);
+          test.skip();
+          return;
+        }
+        await component.getGit()!.checkViewSourceLink(page);
       });
 
-      await test.step('Check CI tab', async () => {
+      await test.step('Check Gitops CI tab', async () => {
         // TBD
       });
 
-      await test.step('Test Docs', async () => {
+      await test.step('Test Gitops Docs', async () => {
         const docsPlugin = component.getDocs();
-        await page.goto(`${component.getComponentUrl()}/docs`, { timeout: 20000 });
+        await openTab(page, 'Docs');
+        await waitForPageLoad(page, `${component.getCoreComponent().getName()}-gitops`);
         await docsPlugin.checkArticle(page);
       });
     });