playwright: add page object for terminal

xterm uses a canvas to show the terminal contents.
Thus, we use a workaround of selecting all contents and
copying into the clipboard to read the output of the terminal.

Contributed on behalf of STMicroelectronics

Change-Id: I2840425ced9dfebf24f97b4302b44d73a6c9741c

examples/playwright/playwright.config.ts

@@ -1,5 +1,5 @@
 // *****************************************************************************
-// Copyright (C) 2021 logi.cals GmbH, EclipseSource and others.
+// Copyright (C) 2021-2023 logi.cals GmbH, EclipseSource and others.
 //
 // This program and the accompanying materials are made available under the
 // terms of the Eclipse Public License v. 2.0 which is available at
@@ -31,7 +31,8 @@ export default defineConfig({
         baseURL: 'http://localhost:3000',
         browserName: 'chromium',
         screenshot: 'only-on-failure',
-        viewport: { width: 1920, height: 1080 }
+        permissions: ['clipboard-read'],
+        viewport: { width: 1920, height: 1080 },
     },
     snapshotDir: './src/tests/snapshots',
     expect: {

examples/playwright/src/tests/theia-terminal-view.test.ts

@@ -0,0 +1,85 @@
+// *****************************************************************************
+// Copyright (C) 2023 EclipseSource and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { expect } from '@playwright/test';
+import { TheiaApp } from '../theia-app';
+import { TheiaWorkspace } from '../theia-workspace';
+import test, { page } from './fixtures/theia-fixture';
+import { TheiaTerminal } from '../theia-terminal';
+
+let app: TheiaApp;
+
+test.describe('Theia Terminal View', () => {
+
+    test.beforeAll(async () => {
+        const ws = new TheiaWorkspace(['src/tests/resources/sample-files1']);
+        app = await TheiaApp.load(page, ws);
+    });
+
+    test('should be possible to open a new terminal', async () => {
+        const terminal = await app.openTerminal(TheiaTerminal);
+        expect(await terminal.isTabVisible()).toBe(true);
+        expect(await terminal.isDisplayed()).toBe(true);
+        expect(await terminal.isActive()).toBe(true);
+    });
+
+    test('should be possible to open two terminals, switch among them, and close them', async () => {
+        const terminal1 = await app.openTerminal(TheiaTerminal);
+        const terminal2 = await app.openTerminal(TheiaTerminal);
+        const allTerminals = [terminal1, terminal2];
+
+        // all terminal tabs should be visible
+        for (const terminal of allTerminals) {
+            expect(await terminal.isTabVisible()).toBe(true);
+        }
+
+        // activate one terminal after the other and check that only this terminal is active
+        for (const terminal of allTerminals) {
+            await terminal.activate();
+            expect(await terminal1.isActive()).toBe(terminal1 === terminal);
+            expect(await terminal2.isActive()).toBe(terminal2 === terminal);
+        }
+
+        // close all terminals
+        for (const terminal of allTerminals) {
+            await terminal.close();
+        }
+
+        // check that all terminals are closed
+        for (const terminal of allTerminals) {
+            expect(await terminal.isTabVisible()).toBe(false);
+        }
+    });
+
+    test('should allow to write and read terminal contents', async () => {
+        const terminal = await app.openTerminal(TheiaTerminal);
+        await terminal.write('hello');
+        const contents = await terminal.contents();
+        expect(contents).toContain('hello');
+    });
+
+    test('should allow to submit a command and read output', async () => {
+        const terminal = await app.openTerminal(TheiaTerminal);
+        if (process.platform === 'win32') {
+            await terminal.submit('dir');
+        } else {
+            await terminal.submit('ls');
+        }
+        const contents = await terminal.contents();
+        expect(contents).toContain('sample.txt');
+    });
+
+});

examples/playwright/src/theia-app.ts

@@ -1,5 +1,5 @@
 // *****************************************************************************
-// Copyright (C) 2021 logi.cals GmbH, EclipseSource and others.
+// Copyright (C) 2021-2023 logi.cals GmbH, EclipseSource and others.
 //
 // This program and the accompanying materials are made available under the
 // terms of the Eclipse Public License v. 2.0 which is available at
@@ -21,6 +21,7 @@ import { TheiaMenuBar } from './theia-main-menu';
 import { TheiaPreferenceScope, TheiaPreferenceView } from './theia-preference-view';
 import { TheiaQuickCommandPalette } from './theia-quick-command-palette';
 import { TheiaStatusBar } from './theia-status-bar';
+import { TheiaTerminal } from './theia-terminal';
 import { TheiaView } from './theia-view';
 import { TheiaWorkspace } from './theia-workspace';
 
@@ -147,6 +148,41 @@ export class TheiaApp {
         return editor;
     }
 
+    async openTerminal<T extends TheiaTerminal>(terminalFactory: { new(id: string, app: TheiaApp): T }): Promise<T> {
+        const mainMenu = await this.menuBar.openMenu('Terminal');
+        const menuItem = await mainMenu.menuItemByName('New Terminal');
+        if (!menuItem) {
+            throw Error('Menu item \'New Terminal\' could not be found.');
+        }
+
+        const newTabIds = await this.runAndWaitForNewTabs(() => menuItem.click());
+        if (newTabIds.length > 1) {
+            console.warn('More than one new tab detected after opening the terminal');
+        }
+
+        return new terminalFactory(newTabIds[0], this);
+    }
+
+    protected async runAndWaitForNewTabs(command: () => Promise<void>): Promise<string[]> {
+        const tabIdsBefore = await this.visibleTabIds();
+        await command();
+        return (await this.waitForNewTabs(tabIdsBefore)).filter(item => !tabIdsBefore.includes(item));
+    }
+
+    protected async waitForNewTabs(tabIds: string[]): Promise<string[]> {
+        let tabIdsCurrent: string[];
+        while ((tabIdsCurrent = (await this.visibleTabIds())).length <= tabIds.length) {
+            console.debug('Awaiting a new tab to appear');
+        }
+        return tabIdsCurrent;
+    }
+
+    protected async visibleTabIds(): Promise<string[]> {
+        const tabs = await this.page.$$('.p-TabBar-tab');
+        const tabIds = (await Promise.all(tabs.map(tab => tab.getAttribute('id')))).filter(id => !!id);
+        return tabIds as string[];
+    }
+
     /** Specific Theia apps may add additional conditions to wait for. */
     async waitForInitialized(): Promise<void> {
         // empty by default

examples/playwright/src/theia-terminal.ts

@@ -0,0 +1,69 @@
+// *****************************************************************************
+// Copyright (C) 2023 EclipseSource and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { ElementHandle } from '@playwright/test';
+import { TheiaApp } from './theia-app';
+import { TheiaContextMenu } from './theia-context-menu';
+import { TheiaMenu } from './theia-menu';
+import { TheiaView } from './theia-view';
+
+export class TheiaTerminal extends TheiaView {
+
+    constructor(tabId: string, app: TheiaApp) {
+        super({
+            tabSelector: `#shell-tab-terminal-${getTerminalId(tabId)}`,
+            viewSelector: `#terminal-${getTerminalId(tabId)}`
+        }, app);
+    }
+
+    async submit(text: string): Promise<void> {
+        await this.write(text);
+        const input = await this.waitForInputArea();
+        await input.press('Enter');
+    }
+
+    async write(text: string): Promise<void> {
+        await this.activate();
+        const input = await this.waitForInputArea();
+        await input.type(text);
+    }
+
+    async contents(): Promise<string> {
+        await this.activate();
+        await (await this.openContextMenu()).clickMenuItem('Select All');
+        await (await this.openContextMenu()).clickMenuItem('Copy');
+        return this.page.evaluate('navigator.clipboard.readText()');
+    }
+
+    protected async openContextMenu(): Promise<TheiaMenu> {
+        await this.activate();
+        return TheiaContextMenu.open(this.app, () => this.waitForVisibleView());
+    }
+
+    protected async waitForInputArea(): Promise<ElementHandle<SVGElement | HTMLElement>> {
+        const view = await this.waitForVisibleView();
+        return view.waitForSelector('.xterm-helper-textarea');
+    }
+
+    protected async waitForVisibleView(): Promise<ElementHandle<SVGElement | HTMLElement>> {
+        return this.page.waitForSelector(this.viewSelector, { state: 'visible' });
+    }
+
+}
+
+function getTerminalId(tabId: string): string {
+    return tabId.substring(tabId.lastIndexOf('-') + 1);
+}