@opensumi/playwright 2.21.13 → 2.22.0

package/src/explorer-view.ts

@@ -0,0 +1,149 @@
+import { OpenSumiApp } from './app';
+import { OpenSumiFileTreeView } from './filetree-view';
+import { OpenSumiOpenedEditorView } from './opened-editor-view';
+import { OpenSumiOutlineView } from './outline-view';
+import { OpenSumiPanel } from './panel';
+import { OpenSumiTreeNode } from './tree-node';
+
+export class OpenSumiExplorerFileStatNode extends OpenSumiTreeNode {
+  async getFsPath() {
+    return await this.elementHandle.getAttribute('title');
+  }
+
+  async isFolder() {
+    const icon = await this.elementHandle.$("[class*='file_icon___']");
+    if (!icon) {
+      return false;
+    }
+    const className = await icon.getAttribute('class');
+    return className?.includes('folder-icon');
+  }
+
+  async getMenuItemByName(name: string) {
+    const contextMenu = await this.openContextMenu();
+    const menuItem = await contextMenu.menuItemByName(name);
+    return menuItem;
+  }
+
+  async open(preview = true) {
+    if (!preview) {
+      await this.elementHandle.dblclick();
+    } else {
+      await this.elementHandle.click();
+    }
+  }
+
+  async isDirty() {
+    const classname = await this.elementHandle.getAttribute('class');
+    if (classname?.includes('mod_dirty__')) {
+      return true;
+    }
+    return false;
+  }
+}
+
+export class OpenSumiExplorerOpenedEditorNode extends OpenSumiTreeNode {
+  async getRelativePath() {
+    return await (await this.elementHandle.$('[class*="opened_editor_node_description__"]'))?.textContent();
+  }
+
+  async getFsPath() {
+    return await this.elementHandle.getAttribute('title');
+  }
+
+  async isGroup() {
+    const icon = await this.elementHandle.waitForSelector("[class*='file_icon___']");
+    const className = await icon.getAttribute('class');
+    return className?.includes('folder-icon');
+  }
+
+  async getMenuItemByName(name: string) {
+    const contextMenu = await this.openContextMenu();
+    const menuItem = await contextMenu.menuItemByName(name);
+    return menuItem;
+  }
+
+  async open() {
+    await this.elementHandle.click();
+  }
+}
+
+export class OpenSumiExplorerView extends OpenSumiPanel {
+  private _fileTreeView: OpenSumiFileTreeView;
+  private _openedEditorView: OpenSumiOpenedEditorView;
+  private _outlineView: OpenSumiOutlineView;
+
+  constructor(app: OpenSumiApp) {
+    super(app, 'EXPLORER');
+    this._openedEditorView = new OpenSumiOpenedEditorView(this.app);
+    this._outlineView = new OpenSumiOutlineView(this.app);
+  }
+
+  initFileTreeView(name: string) {
+    this._fileTreeView = new OpenSumiFileTreeView(this.app, name);
+  }
+
+  get fileTreeView() {
+    return this._fileTreeView;
+  }
+
+  get openedEditorView() {
+    return this._openedEditorView;
+  }
+
+  get outlineView() {
+    return this._outlineView;
+  }
+
+  async getFileStatTreeNodeByPath(path: string) {
+    const treeItems = await (await this.fileTreeView.getViewElement())?.$$('[class*="file_tree_node__"]');
+    if (!treeItems) {
+      return;
+    }
+    let node;
+    for (const item of treeItems) {
+      const title = await item.getAttribute('title');
+      if (title?.startsWith('Group')) {
+        if (title === path) {
+          node = item;
+          break;
+        }
+      } else {
+        // The title maybe `~/a.js • Untracked`
+        if (title?.split(' ')[0]?.endsWith(path)) {
+          node = item;
+          break;
+        }
+      }
+    }
+    if (node) {
+      return new OpenSumiExplorerFileStatNode(node, this.app);
+    }
+  }
+
+  async getOpenedEditorTreeNodeByPath(path: string) {
+    const treeItems = await (await this.openedEditorView.getViewElement())?.$$('[class*="opened_editor_node__"]');
+    if (!treeItems) {
+      return;
+    }
+    let node;
+    for (const item of treeItems) {
+      const title = await item.getAttribute('title');
+      if (title?.startsWith('GROUP')) {
+        if (title === path) {
+          node = item;
+          break;
+        }
+      } else {
+        // The title maybe `~/a.js • Untracked`
+        if (title?.split(' ')[0]?.endsWith(path)) {
+          node = item;
+          break;
+        }
+      }
+    }
+    if (node) {
+      return new OpenSumiExplorerFileStatNode(node, this.app);
+    }
+  }
+}

package/src/filetree-view.ts

@@ -0,0 +1,28 @@
+import { OpenSumiApp } from './app';
+import { OpenSumiView } from './view';
+
+export class OpenSumiFileTreeView extends OpenSumiView {
+  constructor(app: OpenSumiApp, workspaceName: string) {
+    super(app, {
+      viewSelector: '[data-view-id="file-explorer"]',
+      tabSelector: '[data-view-id="file-explorer"] [tabindex="0"]',
+      name: workspaceName,
+    });
+  }
+
+  async getTitleActionByName(name: string) {
+    const header = await this.getTabElement();
+    if (!header) {
+      return;
+    }
+    await header.hover();
+    const titleAction = await header.waitForSelector('[class*="titleActions___"]');
+    const actions = await titleAction.$$('[class*="iconAction__"]');
+    for (const action of actions) {
+      const title = await action.getAttribute('title');
+      if (name === title) {
+        return action;
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+export * from './app';
+export * from './component-editor';
+export * from './context-menu';
+export * from './editor';
+export * from './explorer-view';
+export * from './filetree-view';
+export * from './menu-item';
+export * from './menu';
+export * from './menubar';
+export * from './opened-editor-view';
+export * from './panel';
+export * from './quick-command-palette';
+export * from './search-view';
+export * from './terminal-view';
+export * from './output-view';
+export * from './text-editor';
+export * from './tree-node';
+export * from './view-base';
+export * from './view';
+export * from './workspace';

package/src/menu-item.ts

@@ -0,0 +1,40 @@
+import { ElementHandle } from '@playwright/test';
+
+import { textContent } from './utils';
+
+export class OpenSumiMenuItem {
+  constructor(protected element: ElementHandle<SVGElement | HTMLElement>) {}
+
+  protected labelElementHandle() {
+    return this.element.$("[class*='label__']");
+  }
+
+  protected shortCutElementHandle() {
+    return this.element.$("[class*='shortcut__']");
+  }
+
+  async label() {
+    return textContent(this.labelElementHandle());
+  }
+
+  async shortCut() {
+    return textContent(this.shortCutElementHandle());
+  }
+
+  async isEnabled() {
+    const classAttribute = await this.element.getAttribute('class');
+    if (classAttribute === undefined || classAttribute === null) {
+      return false;
+    }
+    return !classAttribute.includes('kt-inner-menu-item-disabled');
+  }
+
+  async click() {
+    const action = await this.element.waitForSelector("[class*='menuAction__']");
+    await action?.click({ position: { x: 10, y: 10 } });
+  }
+
+  async hover(): Promise<void> {
+    return this.element.hover();
+  }
+}

package/src/menu.ts

@@ -0,0 +1,69 @@
+import { OpenSumiMenuItem } from './menu-item';
+import { OpenSumiViewBase } from './view-base';
+
+export class OpenSumiMenu extends OpenSumiViewBase {
+  selector = '.rc-trigger-popup .kt-inner-menu';
+
+  protected async menuElementHandle() {
+    return this.page.waitForSelector(this.selector);
+  }
+
+  async waitForVisible() {
+    await this.page.waitForSelector(this.selector, { state: 'visible' });
+  }
+
+  async isOpen() {
+    const menu = await this.menuElementHandle();
+    return !!menu && menu.isVisible();
+  }
+
+  async close() {
+    if (!(await this.isOpen())) {
+      return;
+    }
+    await this.page.mouse.click(0, 0);
+    await this.page.waitForSelector(this.selector, { state: 'detached' });
+  }
+
+  async menuItems() {
+    const menuHandle = await this.menuElementHandle();
+    if (!menuHandle) {
+      return [];
+    }
+    const items = await menuHandle.$$('.kt-inner-menu-item');
+    return items.map((element) => new OpenSumiMenuItem(element));
+  }
+
+  async clickMenuItem(name: string) {
+    return (await this.page.waitForSelector(this.menuItemSelector(name))).click();
+  }
+
+  async menuItemByName(name: string) {
+    const menuItems = await this.menuItems();
+    for (const item of menuItems) {
+      const label = await item.label();
+      if (label === name) {
+        return item;
+      }
+    }
+    return undefined;
+  }
+
+  async menuItemByIndex(index: number) {
+    const menuItems = await this.menuItems();
+    if (menuItems.length > index) {
+      return menuItems[index];
+    }
+    return undefined;
+  }
+
+  protected menuItemSelector(label = '') {
+    return `.kt-inner-menu-item [class*='label___'] >> text=${label}`;
+  }
+
+  async visibleMenuItems() {
+    const menuItems = await this.menuItems();
+    const labels = await Promise.all(menuItems.map((item) => item.label()));
+    return labels.filter((label) => !!label);
+  }
+}

package/src/menubar.ts

@@ -0,0 +1,53 @@
+import { ElementHandle } from '@playwright/test';
+
+import { OpenSumiApp } from './app';
+import { OPENSUMI_VIEW_CONTAINERS } from './constans';
+import { textContent } from './utils';
+import { OpenSumiViewBase } from './view-base';
+
+export class OpenSumiMenubar extends OpenSumiViewBase {
+  static USER_KEY_TYPING_DELAY = 100;
+
+  private _menuItems: ElementHandle[];
+
+  selector = `#${OPENSUMI_VIEW_CONTAINERS.MENUBAR}`;
+
+  constructor(app: OpenSumiApp) {
+    super(app);
+  }
+
+  async getMenubar() {
+    return await this.page.waitForSelector(this.selector);
+  }
+
+  async trigger(group: string, command: string) {
+    // group maybe on of this: File, Edit, Selection, View, Go, Terminal, Help
+    const sections = await this.getMenuItems();
+    let item;
+    for (const section of sections) {
+      if ((await section.textContent()) === group) {
+        item = section;
+      }
+    }
+    if (!item) {
+      return;
+    }
+    await item.click();
+    const menu = await this.page.waitForSelector('.kt-dropdown:not(.kt-dropdown-hidden)');
+    const menuItems = await menu.$$('.kt-inner-menu-item');
+    for (const menu of menuItems) {
+      const label = await textContent(menu.$("[class*='label__']"));
+      if (command === label) {
+        menu.click();
+        return;
+      }
+    }
+  }
+
+  async getMenuItems() {
+    if (!this._menuItems) {
+      return await (await this.getMenubar())?.$$("[class^='menubar___']");
+    }
+    return this._menuItems;
+  }
+}

package/src/opened-editor-view.ts

@@ -0,0 +1,28 @@
+import { OpenSumiApp } from './app';
+import { OpenSumiView } from './view';
+
+export class OpenSumiOpenedEditorView extends OpenSumiView {
+  constructor(app: OpenSumiApp) {
+    super(app, {
+      viewSelector: '[data-view-id="file-opened-editor"]',
+      tabSelector: '[data-view-id="file-opened-editor"] [tabindex="0"]',
+      name: 'OPENED EDITORS',
+    });
+  }
+
+  async getTitleActionByName(name: string) {
+    const header = await this.getTabElement();
+    if (!header) {
+      return;
+    }
+    await header.hover();
+    const titleAction = await header.waitForSelector('[class*="titleActions___"]');
+    const actions = await titleAction.$$('[class*="iconAction__"]');
+    for (const action of actions) {
+      const title = await action.getAttribute('title');
+      if (name === title) {
+        return action;
+      }
+    }
+  }
+}

package/src/outline-view.ts

@@ -0,0 +1,37 @@
+import { OpenSumiApp } from './app';
+import { OpenSumiContextMenu } from './context-menu';
+import { OpenSumiView } from './view';
+
+export class OpenSumiOutlineView extends OpenSumiView {
+  constructor(app: OpenSumiApp) {
+    super(app, {
+      viewSelector: '[data-view-id="outline-view"]',
+      tabSelector: '[data-view-id="outline-view"] [tabindex="0"]',
+      name: 'OUTLINE',
+    });
+  }
+
+  async getTitleActionByName(name: string) {
+    const header = await this.getTabElement();
+    if (!header) {
+      return;
+    }
+    await header.hover();
+    const titleAction = await header.waitForSelector('[class*="titleActions___"]');
+    const actions = await titleAction.$$('[class*="iconAction__"]');
+    for (const action of actions) {
+      const title = await action.getAttribute('title');
+      if (name === title) {
+        return action;
+      }
+    }
+  }
+
+  async openTabContextMenu() {
+    const header = await this.getTabElement();
+    if (!header) {
+      return;
+    }
+    return OpenSumiContextMenu.open(this.app, async () => header);
+  }
+}

package/src/output-view.ts

@@ -0,0 +1,76 @@
+import { OpenSumiApp } from './app';
+import { OpenSumiPanel } from './panel';
+
+export class OpenSumiOutputView extends OpenSumiPanel {
+  constructor(app: OpenSumiApp) {
+    super(app, 'OUTPUT');
+  }
+
+  async setChannel(type: string) {
+    const visible = await this.isVisible();
+    if (!visible) {
+      await this.open();
+    }
+    const titleBar = await this.view?.$('[class*="panel_title_bar___"]');
+    const select = await titleBar?.$('.kt-select-option');
+    if (select) {
+      await select.click();
+      const wrapper = await titleBar?.$('.kt-select-options');
+      const options = await wrapper?.$$('span');
+      if (!options) {
+        return;
+      }
+      for (const option of options) {
+        const text = await option.textContent();
+        if (text === type) {
+          await option.click();
+          return;
+        }
+      }
+    }
+  }
+
+  async getCurrentContent() {
+    const visible = await this.isVisible();
+    if (!visible) {
+      await this.open();
+    }
+    const content = await this.view?.$('[class*="output___"]');
+    const lines = await content?.$$('.view-line');
+    if (!lines) {
+      return;
+    }
+    let text = '';
+    for (const line of lines) {
+      const lineText = await line.textContent();
+      text += lineText + '\n';
+    }
+    return text;
+  }
+
+  async clean() {
+    const button = await this.getAction('Clear Output Panel');
+    await button?.click();
+  }
+
+  async getAction(name: string) {
+    const visible = await this.isVisible();
+    if (!visible) {
+      await this.open();
+    }
+    const titleBar = await this.view?.$('[class*="panel_title_bar___"]');
+    const actions = await titleBar?.$$('[class*="titleActions___"]');
+    if (!actions) {
+      return;
+    }
+    for (const action of actions) {
+      const items = await action.$$('[class*="iconAction__"]');
+      for (const item of items) {
+        const title = await item.getAttribute('title');
+        if (title === name) {
+          return item;
+        }
+      }
+    }
+  }
+}

package/src/panel.ts

@@ -0,0 +1,50 @@
+import { ElementHandle } from '@playwright/test';
+
+import { OpenSumiApp } from './app';
+import { OpenSumiViewBase } from './view-base';
+
+export abstract class OpenSumiPanel extends OpenSumiViewBase {
+  public view: ElementHandle<HTMLElement | SVGElement> | null;
+  private whenReady: Promise<void>;
+
+  constructor(app: OpenSumiApp, private viewId: string) {
+    super(app);
+    this.whenReady = this.init();
+  }
+
+  get viewSelector() {
+    return `[data-viewlet-id="${this.viewId.toLocaleLowerCase()}"]`;
+  }
+
+  async init() {
+    this.view = await this.page.$(this.viewSelector);
+  }
+
+  async isVisible() {
+    await this.whenReady;
+    return this.view?.isVisible();
+  }
+
+  async open() {
+    if (!this.viewId) {
+      return;
+    }
+    await this.app.quickOpenPalette.type('view ');
+    await this.app.quickOpenPalette.trigger(this.viewId);
+    await this.waitForVisible();
+    this.view = await this.page.$(this.viewSelector);
+    return this;
+  }
+
+  async focus() {
+    const visible = await this.isVisible();
+    if (!visible) {
+      await this.open();
+    }
+    await this.view?.focus();
+  }
+
+  async waitForVisible() {
+    await this.page.waitForSelector(this.viewSelector, { state: 'visible' });
+  }
+}

package/src/quick-command-palette.ts

@@ -0,0 +1,62 @@
+import { ElementHandle } from '@playwright/test';
+
+import { isMacintosh } from '@opensumi/ide-utils';
+
+import { OPENSUMI_VIEW_CONTAINERS } from './constans';
+import { OpenSumiViewBase } from './view-base';
+
+export class OpenSumiCommandPalette extends OpenSumiViewBase {
+  static USER_KEY_TYPING_DELAY = 200;
+
+  async open() {
+    await this.page.keyboard.press(isMacintosh ? 'Meta+Shift+p' : 'Control+Shift+p');
+    await this.page.waitForSelector(`#${OPENSUMI_VIEW_CONTAINERS.QUICKPICK}`);
+  }
+
+  async isOpen(): Promise<boolean> {
+    try {
+      await this.page.waitForSelector(`#${OPENSUMI_VIEW_CONTAINERS.QUICKPICK}`, { timeout: 5000 });
+    } catch (err) {
+      return false;
+    }
+    return true;
+  }
+
+  async trigger(...commandName: string[]): Promise<void> {
+    for (const command of commandName) {
+      await this.triggerSingleCommand(command);
+    }
+  }
+
+  protected async triggerSingleCommand(commandName: string): Promise<void> {
+    if (!(await this.isOpen())) {
+      await this.open();
+    }
+    let selected = await this.selectedCommand();
+    while (!((await selected?.getAttribute('aria-label')) === commandName)) {
+      await this.page.keyboard.press('ArrowDown');
+      selected = await this.selectedCommand();
+    }
+    await this.page.keyboard.press('Enter');
+  }
+
+  async type(command: string): Promise<void> {
+    if (!(await this.isOpen())) {
+      await this.open();
+    }
+    const input = await this.page.waitForSelector(`#${OPENSUMI_VIEW_CONTAINERS.QUICKPICK_INPUT}`);
+    if (input != null) {
+      await input.focus();
+      await input.type(command, { delay: OpenSumiCommandPalette.USER_KEY_TYPING_DELAY });
+    }
+  }
+
+  protected async selectedCommand(): Promise<ElementHandle<SVGElement | HTMLElement> | null> {
+    const command = await this.page.waitForSelector(`#${OPENSUMI_VIEW_CONTAINERS.QUICKPICK}`);
+    if (!command) {
+      throw new Error('No selected command found!');
+    }
+    const item = await command.$("[class*='item_selected']");
+    return item;
+  }
+}

package/src/quick-open-palette.ts

@@ -0,0 +1,62 @@
+import { ElementHandle } from '@playwright/test';
+
+import { isMacintosh } from '@opensumi/ide-utils';
+
+import { OPENSUMI_VIEW_CONTAINERS } from './constans';
+import { OpenSumiViewBase } from './view-base';
+
+export class OpenSumiQuickOpenPalette extends OpenSumiViewBase {
+  static USER_KEY_TYPING_DELAY = 200;
+
+  async open() {
+    await this.page.keyboard.press(isMacintosh ? 'Meta+p' : 'Control+p');
+    await this.page.waitForSelector(`#${OPENSUMI_VIEW_CONTAINERS.QUICKPICK}`);
+  }
+
+  async isOpen(): Promise<boolean> {
+    try {
+      await this.page.waitForSelector(`#${OPENSUMI_VIEW_CONTAINERS.QUICKPICK}`, { timeout: 5000 });
+    } catch (err) {
+      return false;
+    }
+    return true;
+  }
+
+  async trigger(...commandName: string[]): Promise<void> {
+    for (const command of commandName) {
+      await this.triggerSingleCommand(command);
+    }
+  }
+
+  protected async triggerSingleCommand(commandName: string): Promise<void> {
+    if (!(await this.isOpen())) {
+      await this.open();
+    }
+    let selected = await this.selectedCommand();
+    while (!((await selected?.getAttribute('aria-label')) === commandName)) {
+      await this.page.keyboard.press('ArrowDown');
+      selected = await this.selectedCommand();
+    }
+    await this.page.keyboard.press('Enter');
+  }
+
+  async type(command: string): Promise<void> {
+    if (!(await this.isOpen())) {
+      await this.open();
+    }
+    const input = await this.page.waitForSelector(`#${OPENSUMI_VIEW_CONTAINERS.QUICKPICK_INPUT}`);
+    if (input != null) {
+      await input.focus();
+      await input.type(command, { delay: OpenSumiQuickOpenPalette.USER_KEY_TYPING_DELAY });
+    }
+  }
+
+  protected async selectedCommand(): Promise<ElementHandle<SVGElement | HTMLElement> | null> {
+    const command = await this.page.waitForSelector(`#${OPENSUMI_VIEW_CONTAINERS.QUICKPICK}`);
+    if (!command) {
+      throw new Error('No selected command found!');
+    }
+    const item = await command.$("[class*='item_selected']");
+    return item;
+  }
+}