Fix Playwright tests

Author: Colin Grant

examples/playwright/src/theia-notification-indicator.ts

@@ -16,31 +16,26 @@
 
 import { TheiaStatusIndicator } from './theia-status-indicator';
 
-const NOTIFICATION_ICON = 'codicon-bell';
 const NOTIFICATION_DOT_ICON = 'codicon-bell-dot';
-const NOTIFICATION_ICONS = [NOTIFICATION_ICON, NOTIFICATION_DOT_ICON];
 
 export class TheiaNotificationIndicator extends TheiaStatusIndicator {
-
-    protected get title(): string {
-        return 'Notification';
-    }
-
-    override async isVisible(): Promise<boolean> {
-        return super.isVisible(NOTIFICATION_ICONS, this.title);
-    }
+    id = 'theia-notification-center';
 
     async hasNotifications(): Promise<boolean> {
-        return super.isVisible(NOTIFICATION_DOT_ICON, this.title);
+        const container = await this.getElementHandle();
+        const bellWithDot = await container.$(`.${NOTIFICATION_DOT_ICON}`);
+        return Boolean(bellWithDot?.isVisible());
     }
 
     override async waitForVisible(expectNotifications = false): Promise<void> {
-        await super.waitForVisibleByIcon(expectNotifications ? NOTIFICATION_DOT_ICON : NOTIFICATION_ICON);
+        await super.waitForVisible();
+        if (expectNotifications && !(await this.hasNotifications())) {
+            throw new Error('No notifications when notifcations expected.');
+        }
     }
 
     async toggleOverlay(): Promise<void> {
-        const hasNotifications = await this.hasNotifications();
-        const element = await this.getElementHandleByIcon(hasNotifications ? NOTIFICATION_DOT_ICON : NOTIFICATION_ICON, this.title);
+        const element = await this.getElementHandle();
         if (element) {
             await element.click();
         }

examples/playwright/src/theia-problem-indicator.ts

@@ -17,14 +17,8 @@
 import { ElementHandle } from '@playwright/test';
 import { TheiaStatusIndicator } from './theia-status-indicator';
 
-const PROBLEM_ICON = 'codicon-error';
-
 export class TheiaProblemIndicator extends TheiaStatusIndicator {
-
-    override async isVisible(): Promise<boolean> {
-        const handle = await super.getElementHandleByIcon(PROBLEM_ICON);
-        return !!handle && handle.isVisible();
-    }
+    id = 'problem-marker-status';
 
     async numberOfProblems(): Promise<number> {
         const spans = await this.getSpans();
@@ -37,8 +31,7 @@ export class TheiaProblemIndicator extends TheiaStatusIndicator {
     }
 
     protected async getSpans(): Promise<ElementHandle[] | undefined> {
-        const handle = await super.getElementHandleByIcon(PROBLEM_ICON);
+        const handle = await this.getElementHandle();
         return handle?.$$('span');
     }
-
 }

examples/playwright/src/theia-status-indicator.ts

@@ -17,60 +17,31 @@
 import { ElementHandle } from '@playwright/test';
 import { TheiaPageObject } from './theia-page-object';
 
-export class TheiaStatusIndicator extends TheiaPageObject {
+export abstract class TheiaStatusIndicator extends TheiaPageObject {
+    protected abstract id: string;
 
-    protected elementSpanSelector = '#theia-statusBar .element span';
+    protected statusBarElementSelector = '#theia-statusBar div.element';
 
-    protected async getElementHandle(): Promise<ElementHandle<SVGElement | HTMLElement> | null> {
-        return this.page.$(this.elementSpanSelector);
+    protected getSelectorForId(id: string): string {
+        return `${this.statusBarElementSelector}#status-bar-${id}`;
     }
 
-    async waitForVisible(): Promise<void> {
-        await this.page.waitForSelector(this.elementSpanSelector);
+    async waitForVisible(waitForDetached = false): Promise<void> {
+        await this.page.waitForSelector(this.getSelectorForId(this.id), waitForDetached ? { state: 'detached' } : {});
     }
 
-    protected getSelectorByTitle(title: string): string {
-        return `.element[title="${title}"]`;
-    }
-
-    async getElementHandleByTitle(title: string): Promise<ElementHandle<SVGElement | HTMLElement> | null> {
-        // Fetch element via title in case status elements exist without a dedicated Codicon icon
-        return this.page.$(this.getSelectorByTitle(title));
-    }
-
-    protected getSelectorByIcon(icon: string): string {
-        return `${this.elementSpanSelector}.codicon.${icon}`;
-    }
-
-    async getElementHandleByIcon(iconClass: string | string[], titleContain = ''): Promise<ElementHandle<SVGElement | HTMLElement> | null> {
-        const icons = Array.isArray(iconClass) ? iconClass : [iconClass];
-        for (const icon of icons) {
-            const span = await this.page.$(this.getSelectorByIcon(icon));
-            if (span) {
-                const parent = await span.$('..');
-                if (titleContain === '') {
-                    return parent;
-                } else {
-                    const parentTitle = await parent?.getAttribute('title');
-                    if (parentTitle?.includes(titleContain)) { return parent; }
-                }
-            }
+    async getElementHandle(): Promise<ElementHandle<SVGElement | HTMLElement>> {
+        const element = await this.page.$(this.getSelectorForId(this.id));
+        if (element) {
+            return element;
         }
-        throw new Error('Cannot find indicator');
-    }
-
-    async waitForVisibleByTitle(title: string, waitForDetached = false): Promise<void> {
-        await this.page.waitForSelector(this.getSelectorByTitle(title), waitForDetached ? { state: 'detached' } : {});
-    }
-
-    async waitForVisibleByIcon(icon: string, waitForDetached = false): Promise<void> {
-        await this.page.waitForSelector(this.getSelectorByIcon(icon), waitForDetached ? { state: 'detached' } : {});
+        throw new Error('Could not find status bar element with ID ' + this.id);
     }
 
-    async isVisible(icon: string | string[], titleContain = ''): Promise<boolean> {
+    async isVisible(): Promise<boolean> {
         try {
-            const element = await this.getElementHandleByIcon(icon, titleContain);
-            return !!element && element.isVisible();
+            const element = await this.getElementHandle();
+            return element.isVisible();
         } catch (err) {
             return false;
         }

examples/playwright/src/theia-toggle-bottom-indicator.ts

@@ -16,10 +16,6 @@
 
 import { TheiaStatusIndicator } from './theia-status-indicator';
 
-const TOGGLE_BOTTOM_ICON = 'codicon-window';
-
 export class TheiaToggleBottomIndicator extends TheiaStatusIndicator {
-    override async isVisible(): Promise<boolean> {
-        return super.isVisible(TOGGLE_BOTTOM_ICON);
-    }
+    id = 'bottom-panel-toggle';
 }

packages/core/src/browser/status-bar/status-bar.tsx

@@ -120,6 +120,7 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
     protected createAttributes(viewEntry: StatusBarViewEntry): React.Attributes & React.HTMLAttributes<HTMLElement> {
         const attrs: React.Attributes & React.HTMLAttributes<HTMLElement> = {};
         const entry = viewEntry.entry;
+        attrs.id = 'status-bar-' + viewEntry.id;
         attrs.className = 'element';
         if (entry.command || entry.onclick || entry.tooltip) {
             attrs.className += ' hasCommand';