@theia/playwright 1.23.0-next.26

package/README.md

@@ -0,0 +1,53 @@
+<div align='center'>
+
+<br />
+
+<img src='https://raw.githubusercontent.com/eclipse-theia/theia/master/logo/theia.svg?sanitize=true' alt='theia-ext-logo' width='100px' />
+
+<h2>ECLIPSE THEIA - PLAYWRIGHT</h2>
+
+<hr />
+
+</div>
+
+## Description
+
+Theia 🎭 Playwright is a [page object](https://martinfowler.com/bliki/PageObject.html) framework based on [Playwright](https://github.com/microsoft/playwright) for developing system tests of [Theia](https://github.com/eclipse-theia/theia)-based applications. See it in action below.
+
+<div style='margin:0 auto;width:70%;'>
+
+![Theia System Testing in Action](./docs/images/teaser.gif)
+
+</div>
+
+The Theia 🎭 Playwright page objects introduce abstraction over Theia's user interfaces, encapsulating the details of the user interface interactions, wait conditions, etc., to help keeping your tests more concise, maintainable, and stable.
+Ready for an [example](./docs/GETTING_STARTED.md)?
+
+The actual interaction with the Theia application is implemented with 🎭 Playwright in Typescript. Thus, we can take advantage of [Playwright's benefits](https://playwright.dev/docs/why-playwright/) and run or debug tests headless or headful across all modern browsers.
+Check out [Playwright's documentation](https://playwright.dev/docs/intro) for more information.
+
+This page object framework not only covers Theia's generic capabilities, such as handling views, the quick command palette, file explorer etc.
+It is [extensible](./docs/EXTENSIBILITY.md) so you can add dedicated page objects for custom Theia components, such as custom views, editors, menus, etc.
+
+## Documentation
+
+- [Getting Started](./docs/GETTING_STARTED.md)
+- [Extensibility](./docs/EXTENSIBILITY.md)
+- [Building and Developing Theia 🎭 Playwright](./docs/DEVELOPING.md)
+
+## Additional Information
+
+- [Theia - GitHub](https://github.com/eclipse-theia/theia)
+- [Theia - Website](https://theia-ide.org/)
+- [Playwright - GitHub](https://github.com/microsoft/playwright)
+- [Playwright - Website](https://playwright.dev)
+
+## License
+
+- [Eclipse Public License 2.0](http://www.eclipse.org/legal/epl-2.0/)
+- [一 (Secondary) GNU General Public License, version 2 with the GNU Classpath Exception](https://projects.eclipse.org/license/secondary-gpl-2.0-cp)
+
+## Trademark
+
+"Theia" is a trademark of the Eclipse Foundation
+https://www.eclipse.org/theia

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@theia/playwright",
+  "version": "1.23.0-next.26+0aa2621d3fd",
+  "description": "System tests for Theia",
+  "license": "EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eclipse-theia/theia.git"
+  },
+  "bugs": {
+    "url": "https://github.com/eclipse-theia/theia/issues"
+  },
+  "homepage": "https://github.com/eclipse-theia/theia",
+  "scripts": {
+    "prepare": "yarn clean && yarn build",
+    "clean": "rimraf lib",
+    "build": "tsc --incremental && yarn lint && npx playwright install chromium",
+    "theia:start": "yarn --cwd ../browser start",
+    "lint": "eslint -c ./.eslintrc.js --ext .ts ./src ./tests",
+    "lint:fix": "eslint -c ./.eslintrc.js --ext .ts ./src ./tests --fix",
+    "ui-tests": "yarn && playwright test --config=./configs/playwright.config.ts",
+    "ui-tests-ci": "yarn && playwright test --config=./configs/playwright.ci.config.ts",
+    "ui-tests-headful": "yarn && playwright test --config=./configs/playwright.headful.config.ts",
+    "ui-tests-report-generate": "allure generate ./allure-results --clean -o allure-results/allure-report",
+    "ui-tests-report": "yarn ui-tests-report-generate && allure open allure-results/allure-report"
+  },
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@playwright/test": "1.17.1",
+    "fs-extra": "^9.0.8"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^9.0.8",
+    "allure-commandline": "^2.13.8",
+    "allure-playwright": "^2.0.0-beta.14"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "0aa2621d3fd7ce5f1dff771506f5473200104fea"
+}

package/src/theia-about-dialog.ts

@@ -0,0 +1,26 @@
+/********************************************************************************
+ * Copyright (C) 2021 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
+ * 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 { TheiaDialog } from './theia-dialog';
+
+export class TheiaAboutDialog extends TheiaDialog {
+
+    async isVisible(): Promise<boolean> {
+        const dialog = await this.page.$(`${this.blockSelector} .theia-aboutDialog`);
+        return !!dialog && dialog.isVisible();
+    }
+
+}

package/src/theia-app.ts

@@ -0,0 +1,136 @@
+/********************************************************************************
+ * Copyright (C) 2021 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
+ * 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 { Page } from '@playwright/test';
+import { TheiaEditor } from './theia-editor';
+import { DOT_FILES_FILTER, TheiaExplorerView } from './theia-explorer-view';
+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 { TheiaView } from './theia-view';
+import { TheiaWorkspace } from './theia-workspace';
+
+export class TheiaApp {
+
+    readonly statusBar = new TheiaStatusBar(this);
+    readonly quickCommandPalette = new TheiaQuickCommandPalette(this);
+    readonly menuBar = new TheiaMenuBar(this);
+    public workspace: TheiaWorkspace;
+
+    public static async load(page: Page, initialWorkspace?: TheiaWorkspace): Promise<TheiaApp> {
+        const app = new TheiaApp(page, initialWorkspace);
+        await TheiaApp.loadOrReload(page, '/#' + app.workspace.urlEncodedPath);
+        await page.waitForSelector('.theia-preload', { state: 'detached' });
+        await page.waitForSelector('.theia-ApplicationShell');
+        await app.waitForInitialized();
+        return Promise.resolve(app);
+    }
+
+    protected static async loadOrReload(page: Page, url: string): Promise<void> {
+        if (page.url() === url) {
+            await page.reload();
+        } else {
+            const wasLoadedAlready = await page.isVisible('.theia-ApplicationShell');
+            await page.goto(url);
+            if (wasLoadedAlready) {
+                // Theia doesn't refresh on URL change only
+                // So we need to reload if the app was already loaded before
+                await page.reload();
+            }
+        }
+    }
+
+    protected constructor(public page: Page, initialWorkspace?: TheiaWorkspace) {
+        this.workspace = initialWorkspace ? initialWorkspace : new TheiaWorkspace();
+        this.workspace.initialize();
+    }
+
+    async isMainContentPanelVisible(): Promise<boolean> {
+        const contentPanel = await this.page.$('#theia-main-content-panel');
+        return !!contentPanel && contentPanel.isVisible();
+    }
+
+    async openPreferences(viewFactory: { new(app: TheiaApp): TheiaPreferenceView }, preferenceScope = TheiaPreferenceScope.Workspace): Promise<TheiaPreferenceView> {
+        const view = new viewFactory(this);
+        if (await view.isTabVisible()) {
+            await view.activate();
+            return view;
+        }
+        await view.open(preferenceScope);
+        return view;
+    }
+
+    async openView<T extends TheiaView>(viewFactory: { new(app: TheiaApp): T }): Promise<T> {
+        const view = new viewFactory(this);
+        if (await view.isTabVisible()) {
+            await view.activate();
+            return view;
+        }
+        await view.open();
+        return view;
+    }
+
+    async openEditor<T extends TheiaEditor>(filePath: string, editorFactory: { new(filePath: string, app: TheiaApp): T },
+        editorName?: string, expectFileNodes = true): Promise<T> {
+        const explorer = await this.openView(TheiaExplorerView);
+        if (!explorer) {
+            throw Error('TheiaExplorerView could not be opened.');
+        }
+        if (expectFileNodes) {
+            const fileStatElements = await explorer.visibleFileStatNodes(DOT_FILES_FILTER);
+            if (fileStatElements.length < 1) {
+                throw Error('TheiaExplorerView is empty.');
+            }
+        }
+        const fileNode = await explorer.fileStatNode(filePath);
+        if (!fileNode || ! await fileNode?.isFile()) {
+            throw Error(`Specified path '${filePath}' could not be found or isn't a file.`);
+        }
+
+        const editor = new editorFactory(filePath, this);
+        const contextMenu = await fileNode.openContextMenu();
+        const editorToUse = editorName ? editorName : editor.name ? editor.name : undefined;
+        if (editorToUse) {
+            const menuItem = await contextMenu.menuItemByNamePath('Open With', editorToUse);
+            if (!menuItem) {
+                throw Error(`Editor named '${editorName}' could not be found in "Open With" menu.`);
+            }
+            await menuItem.click();
+        } else {
+            await contextMenu.clickMenuItem('Open');
+        }
+
+        await editor.waitForVisible();
+        return editor;
+    }
+
+    async activateExistingEditor<T extends TheiaEditor>(filePath: string, editorFactory: { new(filePath: string, app: TheiaApp): T }): Promise<T> {
+        const editor = new editorFactory(filePath, this);
+        if (!await editor.isTabVisible()) {
+            throw new Error(`Could not find opened editor for file ${filePath}`);
+        }
+        await editor.activate();
+        await editor.waitForVisible();
+        return editor;
+    }
+
+    /** Specific Theia apps may add additional conditions to wait for. */
+    async waitForInitialized(): Promise<void> {
+        // empty by default
+    }
+
+}

package/src/theia-context-menu.ts

@@ -0,0 +1,42 @@
+/********************************************************************************
+ * Copyright (C) 2021 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
+ * 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 { TheiaMenu } from './theia-menu';
+
+export class TheiaContextMenu extends TheiaMenu {
+
+    public static async openAt(app: TheiaApp, x: number, y: number): Promise<TheiaContextMenu> {
+        await app.page.mouse.move(x, y);
+        await app.page.mouse.click(x, y, { button: 'right' });
+        return TheiaContextMenu.returnWhenVisible(app);
+    }
+
+    public static async open(app: TheiaApp, element: () => Promise<ElementHandle<SVGElement | HTMLElement>>): Promise<TheiaContextMenu> {
+        const elementHandle = await element();
+        await elementHandle.click({ button: 'right' });
+        return TheiaContextMenu.returnWhenVisible(app);
+    }
+
+    private static async returnWhenVisible(app: TheiaApp): Promise<TheiaContextMenu> {
+        const menu = new TheiaContextMenu(app);
+        await menu.waitForVisible();
+        return menu;
+    }
+
+}

package/src/theia-dialog.ts

@@ -0,0 +1,113 @@
+/********************************************************************************
+ * Copyright (C) 2021 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
+ * 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 { TheiaPageObject } from './theia-page-object';
+
+export class TheiaDialog extends TheiaPageObject {
+
+    protected overlaySelector = '#theia-dialog-shell';
+    protected blockSelector = this.overlaySelector + ' .dialogBlock';
+    protected titleBarSelector = this.blockSelector + ' .dialogTitle';
+    protected titleSelector = this.titleBarSelector + ' > div';
+    protected contentSelector = this.blockSelector + ' .dialogContent > div';
+    protected controlSelector = this.blockSelector + ' .dialogControl';
+
+    async waitForVisible(): Promise<void> {
+        await this.page.waitForSelector(`${this.blockSelector}`, { state: 'visible' });
+    }
+
+    async waitForClosed(): Promise<void> {
+        await this.page.waitForSelector(`${this.blockSelector}`, { state: 'detached' });
+    }
+
+    async isVisible(): Promise<boolean> {
+        const pouDialogElement = await this.page.$(this.blockSelector);
+        return pouDialogElement ? pouDialogElement.isVisible() : false;
+    }
+
+    async title(): Promise<string | null> {
+        const titleElement = await this.page.waitForSelector(`${this.titleSelector}`);
+        return titleElement.textContent();
+    }
+
+    async waitUntilTitleIsDisplayed(title: string): Promise<void> {
+        await this.page.waitForFunction(predicate => {
+            const element = document.querySelector(predicate.titleSelector);
+            return !!element && element.textContent === predicate.expectedTitle;
+        }, { titleSelector: this.titleSelector, expectedTitle: title });
+    }
+
+    protected async contentElement(): Promise<ElementHandle<SVGElement | HTMLElement>> {
+        return this.page.waitForSelector(this.contentSelector);
+    }
+
+    protected async buttonElement(label: string): Promise<ElementHandle<SVGElement | HTMLElement>> {
+        return this.page.waitForSelector(`${this.controlSelector} button:has-text("${label}")`);
+    }
+
+    protected async buttonElementByClass(buttonClass: string): Promise<ElementHandle<SVGElement | HTMLElement>> {
+        return this.page.waitForSelector(`${this.controlSelector} button${buttonClass}`);
+    }
+
+    protected async validationElement(): Promise<ElementHandle<SVGElement | HTMLElement>> {
+        return this.page.waitForSelector(`${this.controlSelector} div.error`);
+    }
+
+    async getValidationText(): Promise<string | null> {
+        const element = await this.validationElement();
+        return element.textContent();
+    }
+
+    async validationResult(): Promise<boolean> {
+        const validationText = await this.getValidationText();
+        return validationText !== '' ? false : true;
+    }
+
+    async close(): Promise<void> {
+        const closeButton = await this.page.waitForSelector(`${this.titleBarSelector} i.closeButton`);
+        await closeButton.click();
+        await this.waitForClosed();
+    }
+
+    async clickButton(buttonLabel: string): Promise<void> {
+        const buttonElement = await this.buttonElement(buttonLabel);
+        await buttonElement.click();
+    }
+
+    async isButtonDisabled(buttonLabel: string): Promise<boolean> {
+        const buttonElement = await this.buttonElement(buttonLabel);
+        return buttonElement.isDisabled();
+    }
+
+    async clickMainButton(): Promise<void> {
+        const buttonElement = await this.buttonElementByClass('.theia-button.main');
+        await buttonElement.click();
+    }
+
+    async clickSecondaryButton(): Promise<void> {
+        const buttonElement = await this.buttonElementByClass('.theia-button.secondary');
+        await buttonElement.click();
+    }
+
+    async waitUntilMainButtonIsEnabled(): Promise<void> {
+        await this.page.waitForFunction(() => {
+            const button = document.querySelector<HTMLButtonElement>(`${this.controlSelector} > button.theia-button.main`);
+            return !!button && !button.disabled;
+        });
+    }
+
+}

package/src/theia-editor.ts

@@ -0,0 +1,73 @@
+/********************************************************************************
+ * Copyright (C) 2021 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
+ * 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 { TheiaDialog } from './theia-dialog';
+import { TheiaView } from './theia-view';
+import { containsClass } from './util';
+
+export abstract class TheiaEditor extends TheiaView {
+
+    async isDirty(): Promise<boolean> {
+        return await this.isTabVisible() && containsClass(this.tabElement(), 'theia-mod-dirty');
+    }
+
+    async save(): Promise<void> {
+        await this.activate();
+        if (!await this.isDirty()) {
+            return;
+        }
+        const fileMenu = await this.app.menuBar.openMenu('File');
+        const saveItem = await fileMenu.menuItemByName('Save');
+        await saveItem?.click();
+        await this.page.waitForSelector(this.tabSelector + '.theia-mod-dirty', { state: 'detached' });
+    }
+
+    async closeWithoutSave(): Promise<void> {
+        if (!await this.isDirty()) {
+            return super.close(true);
+        }
+        await super.close(false);
+        const saveDialog = new TheiaDialog(this.app);
+        await saveDialog.clickButton('Don\'t save');
+        await super.waitUntilClosed();
+    }
+
+    async saveAndClose(): Promise<void> {
+        await this.save();
+        await this.close();
+    }
+
+    async undo(times = 1): Promise<void> {
+        await this.activate();
+        for (let i = 0; i < times; i++) {
+            const editMenu = await this.app.menuBar.openMenu('Edit');
+            const undoItem = await editMenu.menuItemByName('Undo');
+            await undoItem?.click();
+            await this.app.page.waitForTimeout(200);
+        }
+    }
+
+    async redo(times = 1): Promise<void> {
+        await this.activate();
+        for (let i = 0; i < times; i++) {
+            const editMenu = await this.app.menuBar.openMenu('Edit');
+            const undoItem = await editMenu.menuItemByName('Redo');
+            await undoItem?.click();
+            await this.app.page.waitForTimeout(200);
+        }
+    }
+
+}