[tests] Stabilizing Public UI Tests

- Updated Kind:
  - kind v0.31.0 go1.25.5 linux/amd64
  - Client Version: v1.35.0

- Tune up for Code Coverage v6.0.0

- Public UI Tests targeted:
  - Project test
  - Create Component test
  - Component Context Menu test
  - Operator Backed Service test

- Log files included into the artifacts to be uploaded

Signed-off-by: Victor Rubezhny <vrubezhny@redhat.com>

Author: vrubezhny

.github/workflows/continuous-integration-workflow.yml

@@ -30,6 +30,8 @@ jobs:
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - uses: actions/checkout@v6
+        with:
+          fetch-depth: 1
 
       # Set up Node
       - name: Use Node.js ${{ matrix.node }}
@@ -59,7 +61,8 @@ jobs:
         if: (success() || failure()) && runner.os == 'Linux'
         uses: helm/kind-action@v1.14.0
         with:
-          version: v0.24.0
+          version: v0.31.0
+          node_image: kindest/node:v1.34.0
 
       - name: Configure cluster
         if: (success() || failure()) && runner.os == 'Linux'
@@ -105,6 +108,7 @@ jobs:
         with:
           name: artifacts-${{ matrix.os }}
           path: |
+            /tmp/test-resources/settings/logs/**/*.log
             /tmp/test-resources/screenshots/**/*.png
           retention-days: 2
 

package-lock.json

@@ -183,8 +183,26 @@ export class OpenShiftExplorer implements TreeDataProvider<ExplorerItem>, Dispos
             .then(result => (allTrue(result) ? `${contextValue}.can-delete` : contextValue));
     }
 
+
     // eslint-disable-next-line class-methods-use-this
     async getTreeItem(element: ExplorerItem): Promise<TreeItem> {
+        try {
+            return await this._getTreeItem(element);
+        } catch (err) {
+            // eslint-disable-next-line no-console
+            console.error('getTreeItem failed:', err, element);
+
+            return {
+                label: '⚠️ Broken item',
+                tooltip: `${err}`,
+                iconPath: new ThemeIcon('error'),
+                collapsibleState: TreeItemCollapsibleState.None
+            };
+        }
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    async _getTreeItem(element: ExplorerItem): Promise<TreeItem> {
         if ('command' in element || ('label' in element && 'iconPath' in element)) {
             return element;
         }
@@ -474,7 +492,23 @@ export class OpenShiftExplorer implements TreeDataProvider<ExplorerItem>, Dispos
     }
 
     // eslint-disable-next-line class-methods-use-this
+
     async getChildren(element?: ExplorerItem): Promise<ExplorerItem[]> {
+        try {
+            return await this._getChildren(element);
+        } catch (err) {
+            // eslint-disable-next-line no-console
+            console.error('getChildren failed:', err);
+
+            return [{
+                label: '⚠️ Error loading tree',
+                tooltip: String(err),
+                iconPath: new ThemeIcon('error')
+            }];
+        }
+    }
+
+    async _getChildren(element?: ExplorerItem): Promise<ExplorerItem[]> {
         let result: ExplorerItem[] = [];
         // don't show Open In Developer Dashboard if not openshift cluster
         const isOpenshiftCluster = await isOpenShiftCluster(this.executionContext);

src/explorer.ts

@@ -11,9 +11,10 @@ import {
     NotificationType,
     ViewItem,
     ViewSection,
+    VSBrowser,
     WebDriver,
     WelcomeContentSection,
-    Workbench,
+    Workbench
 } from 'vscode-extension-tester';
 
 export async function waitForInputUpdate(
@@ -97,6 +98,110 @@ export async function itemExists(
     );
 }
 
+export async function stabilizeComponentsView(getSection: () => Promise<ViewSection>, timeout = 20000): Promise<ViewSection> {
+    const result = await VSBrowser.instance.driver.wait(async () => {
+        try {
+            let section = await getSection();
+
+            await section.expand();
+            await new Promise(res => setTimeout(res, 300));
+
+            section = await getSection();
+
+            // ---- try tree mode ----
+            try {
+                const items = await section.getVisibleItems();
+                await Promise.all(items.map(i => i.getText()));
+                return section;
+            } catch {
+                // ---- fallback: welcome content mode ----
+                try {
+                    const welcome = await section.findWelcomeContent();
+                    const buttons = await welcome.getButtons();
+                    if (buttons) {
+                        return section;
+                    }
+                } catch {
+                    return false;
+                }
+            }
+
+            return false;
+
+        } catch {
+            return false;
+        }
+    }, timeout, 'Components view did not stabilize');
+
+    return result as ViewSection;
+}
+
+export async function findItemFuzzy(section: ViewSection, label: string): Promise<ViewItem | undefined> {
+    const items = await section.getVisibleItems();
+    for (const item of items) {
+        try {
+            const text = await item.getText();
+            if (text.includes(label)) {
+                return item;
+            }
+        } catch {
+            // ignore
+        }
+    }
+
+    return undefined;
+}
+
+export async function waitForItem(getSection: () => Promise<ViewSection>, label: string, strict: boolean = true, timeout = 15000) {
+    return VSBrowser.instance.driver.wait(async () => {
+        try {
+            const section = await getSection();
+            const item = strict ? await section.findItem(label) : await findItemFuzzy(section, label);
+            return item ?? false;
+        } catch {
+            return false;
+        }
+    }, timeout, `Item "${label}" not found within ${timeout}ms`) as Promise<ViewItem>;
+}
+
+export async function waitForItemStable(getSection: () => Promise<ViewSection>, label: string, strict: boolean = true, timeout = 15000) {
+    await stabilizeComponentsView(getSection);
+    return waitForItem(getSection, label, strict, timeout);
+}
+
+
+export async function waitForItemToDisappear(getSection: () => Promise<ViewSection>, label: string, timeout = 15000): Promise<boolean> {
+    return VSBrowser.instance.driver.wait(async () => {
+        try {
+            const section = await getSection();
+            const item = await section.findItem(label);
+            return !item;
+        } catch {
+            return true;
+        }
+    }, timeout, `Item "${label}" still exists after ${timeout}ms`);
+}
+
+export async function waitForItemToDisappearStable(getSection: () => Promise<ViewSection>, label: string, timeout = 15000): Promise<boolean> {
+    await stabilizeComponentsView(getSection);
+    return waitForItemToDisappear(getSection, label, timeout);
+}
+
+export async function withStableItem(getSection: () => Promise<ViewSection>, label: string, action: (item: ViewItem) => Promise<void>, timeout = 10_000) {
+    await stabilizeComponentsView(getSection);
+    return VSBrowser.instance.driver.wait(async () => {
+        try {
+            const section = await getSection();
+            const item = await section.findItem(label);
+            if (!item) return false;
+            await action(item);
+            return true;
+        } catch {
+            return false;
+        }
+    }, timeout, `Action on "${label}" could not be performed`);
+}
+
 export async function itemDoesNotExist(
     title: string,
     view: ViewSection,
@@ -191,3 +296,30 @@ export async function webViewIsOpened(name: string, driver: WebDriver, timeout =
         }
     }, timeout);
 }
+
+export async function step<T>(name: string, fn: () => Promise<T>): Promise<T> {
+    const callSiteStack = new Error(`Step: ${name}`).stack;
+    try {
+        return await fn();
+    } catch (err) {
+        const error = err as Error;
+        error.message = `Step failed: ${name}\n${error.message}`;
+        if (error.stack && callSiteStack) {
+            error.stack =
+                `${error.stack}\n\n--- Step call site ---\n${callSiteStack}`;
+        }
+        throw error;
+    }
+}
+
+export async function debugClick(element, name: string) {
+    try {
+        await element.click();
+    } catch (e) {
+        /* eslint-disable no-console */
+        console.error(`Failed to click: ${name}`);
+        console.error(await element.getAttribute('outerHTML'));
+        /* eslint-enable no-console */
+        throw e;
+    }
+}

test/ui/common/conditions.ts

@@ -2,7 +2,8 @@
  *  Copyright (c) Red Hat, Inc. All rights reserved.
  *  Licensed under the MIT License. See LICENSE file in the project root for license information.
  *-----------------------------------------------------------------------------------------------*/
-import { By, Key, WebElement, WebView } from 'vscode-extension-tester';
+import { By, EditorView, Key, VSBrowser, WebElement, WebView } from 'vscode-extension-tester';
+import { debugClick } from '../../conditions';
 import { WebViewForm } from './WebViewForm';
 
 //TODO: Add support for create from git page and from local codebase page
@@ -31,24 +32,83 @@ export class CreateComponentWebView extends WebViewForm {
     }
 
     public async createComponentFromTemplate(): Promise<void> {
-        await this.enterWebView(async (webView) => {
-            const button = await this.getCreateFromTemplateButton(webView);
-            await button.click();
-        });
+        await VSBrowser.instance.driver.wait(async () => {
+            try {
+                return await this.enterWebView(async (webView) => {
+                    const button = await this.getCreateFromTemplateButton(webView);
+                    if (!button) return false;
+
+                    const visible = await button.isDisplayed();
+                    const enabled = await button.isEnabled();
+
+                    if (!visible || !enabled) return false;
+
+                    await button.click();
+                    return true;
+                });
+            } catch {
+                return false;
+            }
+        }, 10000, 'Create Component from Template button not clickable');
+
+        await VSBrowser.instance.driver.wait(async () => {
+            const editors = await new EditorView().getOpenEditorTitles();
+            return editors.some(title =>
+                title.includes('Devfile Registry') || title.includes('Create Component')
+            );
+        }, 10000, 'Create Component from Template editor did not open');
     }
 
     public async createComponentFromGit(): Promise<void> {
-        await this.enterWebView(async (webView) => {
-            const button = await this.getCreateFromGitButton(webView);
-            await button.click();
-        });
+        await VSBrowser.instance.driver.wait(async () => {
+            try {
+                return await this.enterWebView(async (webView) => {
+                    const button = await this.getCreateFromGitButton(webView);
+                    if (!button) return false;
+
+                    const visible = await button.isDisplayed();
+                    const enabled = await button.isEnabled();
+
+                    if (!visible || !enabled) return false;
+
+                    await button.click();
+                    return true;
+                });
+            } catch {
+                return false;
+            }
+        }, 10000, 'Create Component from Git button not clickable');
+
+        await VSBrowser.instance.driver.wait(async () => {
+            const editors = await new EditorView().getOpenEditorTitles();
+            return editors.some(title => title.includes('Create Component'));
+        }, 10000, 'Create Component from Git editor did not open');
     }
 
     public async createComponentFromLocalCodebase(): Promise<void> {
-        await this.enterWebView(async (webView) => {
-            const button = await this.getCreateFromLocalButton(webView);
-            await button.click();
-        });
+        await VSBrowser.instance.driver.wait(async () => {
+            try {
+                return await this.enterWebView(async (webView) => {
+                    const button = await this.getCreateFromLocalButton(webView);
+                    if (!button) return false;
+
+                    const visible = await button.isDisplayed();
+                    const enabled = await button.isEnabled();
+
+                    if (!visible || !enabled) return false;
+
+                    await button.click();
+                    return true;
+                });
+            } catch {
+                return false;
+            }
+        }, 10000, 'Create Component from Local Folder button not clickable');
+
+        await VSBrowser.instance.driver.wait(async () => {
+            const editors = await new EditorView().getOpenEditorTitles();
+            return editors.some(title => title.includes('Create Component'));
+        }, 10000, 'Create Component from Local Folder editor did not open');
     }
 }
 
@@ -160,7 +220,8 @@ export class GitProjectPage extends Page {
     public async clickContinueButton(): Promise<void> {
         await this.enterWebView(async (webView) => {
             const button = await this.continueButtonExists(webView);
-            await button.click();
+            // await button.click();
+            await debugClick(button, 'Continue');
         });
     }
 
@@ -202,14 +263,16 @@ export class LocalCodeBasePage extends Page {
     public async clickSelectFolderButton(): Promise<void> {
         await this.enterWebView(async (webView) => {
             const button = await this.getSelectFolderButton(webView);
-            await button.click();
+            // await button.click();
+            await debugClick(button, 'Select Folder');
         });
     }
 
     public async clickCreateComponent(): Promise<void> {
         await this.enterWebView(async (webView) => {
             const button = await this.createButtonExists(webView);
-            await button.click();
+            // await button.click();
+            await debugClick(button, 'Create Component');
         });
     }