@opensumi/playwright 2.21.4 → 2.21.5-next-1668665440.0

package/src/source-control-view.ts

@@ -0,0 +1,44 @@
+import { OpenSumiApp } from './app';
+import { OpenSumiView } from './view';
+
+export class OpenSumiSourceControlView extends OpenSumiView {
+  constructor(app: OpenSumiApp, name: string) {
+    super(app, {
+      viewSelector: '[data-view-id="scm_view"]',
+      tabSelector: '[data-view-id="scm_view"] [tabindex="0"]',
+      name,
+    });
+  }
+
+  async getTitleActionByName(name: string) {
+    const header = await this.page.$('.scm [class*="titlebar___"]');
+    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 getTitleActionById(id: string) {
+    const header = await this.page.$('.scm [class*="titlebar___"]');
+    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 itemId = await action.getAttribute('id');
+      if (id === itemId) {
+        return action;
+      }
+    }
+  }
+}

package/src/terminal.ts

@@ -0,0 +1,22 @@
+import { OpenSumiApp } from './app';
+import { OpenSumiPanel } from './panel';
+
+export class OpenSumiTerminal extends OpenSumiPanel {
+  constructor(app: OpenSumiApp) {
+    super(app, 'terminal');
+  }
+
+  async sendText(text: string) {
+    const visible = await this.isVisible();
+    if (!visible) {
+      await this.open();
+    }
+    await this.focus();
+    const box = await this.view?.boundingBox();
+    if (box) {
+      await this.app.page.mouse.click(box.x + box?.width / 2, box.y + box?.height / 2);
+    }
+    await this.page.keyboard.type(text);
+    await this.app.page.keyboard.press('Enter');
+  }
+}

package/src/tests/app.test.ts

@@ -0,0 +1,16 @@
+import path from 'path';
+
+import { expect } from '@playwright/test';
+
+import { OpenSumiApp } from '../app';
+import { OpenSumiWorkspace } from '../workspace';
+
+import test, { page } from './hooks';
+
+test.describe('Application', () => {
+  test('should show main layout', async () => {
+    const workspace = new OpenSumiWorkspace([path.resolve('./src/tests/workspaces/default')]);
+    const app = await OpenSumiApp.load(page, workspace);
+    expect(await app.isMainLayoutVisible()).toBe(true);
+  });
+});

package/src/tests/debug.test.ts

@@ -0,0 +1,68 @@
+import path from 'path';
+
+import { expect } from '@playwright/test';
+
+import { OpenSumiApp } from '../app';
+import { OpenSumiDebugView } from '../debug-view';
+import { OpenSumiExplorerView } from '../explorer-view';
+import { OpenSumiTextEditor } from '../text-editor';
+import { OpenSumiWorkspace } from '../workspace';
+
+import test, { page } from './hooks';
+
+let app: OpenSumiApp;
+let explorer: OpenSumiExplorerView;
+let debugView: OpenSumiDebugView;
+let editor: OpenSumiTextEditor;
+let workspace: OpenSumiWorkspace;
+
+test.describe('OpenSumi Debug', () => {
+  test.beforeAll(async () => {
+    workspace = new OpenSumiWorkspace([path.resolve('./src/tests/workspaces/debug')]);
+    app = await OpenSumiApp.load(page, workspace);
+    explorer = await app.open(OpenSumiExplorerView);
+    explorer.initFileTreeView(workspace.workspace.displayName);
+    await explorer.fileTreeView.open();
+  });
+
+  test.afterAll(() => {
+    app.dispose();
+  });
+
+  test('Debug breakpoint editor glyph margin should be worked', async () => {
+    editor = await app.openEditor(OpenSumiTextEditor, explorer, 'index.js', false);
+    const glyphMarginModel = await editor.getGlyphMarginModel();
+    let overlay = await glyphMarginModel.getOverlay(6);
+    await overlay?.click({ position: { x: 9, y: 9 }, force: true });
+    // 此时元素 dom 结构已经改变，需要重新获取
+    overlay = await glyphMarginModel.getOverlay(6);
+    expect(await glyphMarginModel.hasBreakpoint(overlay!)).toBeTruthy();
+    await editor.close();
+  });
+
+  test('Run Debug should be worked', async () => {
+    editor = await app.openEditor(OpenSumiTextEditor, explorer, 'index.js', false);
+    await app.page.waitForTimeout(1000);
+
+    debugView = await app.open(OpenSumiDebugView);
+    const glyphMarginModel = await editor.getGlyphMarginModel();
+    let glyphOverlay = await glyphMarginModel.getOverlay(6);
+    const isClicked = await glyphMarginModel.hasBreakpoint(glyphOverlay!);
+    if (!isClicked) {
+      await glyphOverlay?.click({ position: { x: 9, y: 9 }, force: true });
+      await app.page.waitForTimeout(1000);
+    }
+
+    await debugView.start();
+    await app.page.waitForTimeout(2000);
+
+    glyphOverlay = await glyphMarginModel.getOverlay(6);
+
+    expect(await glyphMarginModel.hasTopStackFrame(glyphOverlay!)).toBeTruthy();
+
+    const overlaysModel = await editor.getOverlaysModel();
+    const viewOverlay = await overlaysModel.getOverlay(6);
+    expect(await glyphMarginModel.hasTopStackFrameLine(viewOverlay!)).toBeTruthy();
+    await editor.close();
+  });
+});

package/src/tests/editor.test.ts

@@ -0,0 +1,143 @@
+import path from 'path';
+
+import { expect } from '@playwright/test';
+
+import { OpenSumiApp } from '../app';
+import { OPENSUMI_VIEW_CONTAINERS } from '../constans';
+import { OpenSumiExplorerView } from '../explorer-view';
+import { OpenSumiTextEditor } from '../text-editor';
+import { OpenSumiWorkspace } from '../workspace';
+
+import test, { page } from './hooks';
+
+let app: OpenSumiApp;
+let explorer: OpenSumiExplorerView;
+let editor: OpenSumiTextEditor;
+let workspace: OpenSumiWorkspace;
+
+test.describe('OpenSumi Editor', () => {
+  test.beforeAll(async () => {
+    workspace = new OpenSumiWorkspace([path.resolve('./src/tests/workspaces/default')]);
+    app = await OpenSumiApp.load(page, workspace);
+    explorer = await app.open(OpenSumiExplorerView);
+    explorer.initFileTreeView(workspace.workspace.displayName);
+    await explorer.fileTreeView.open();
+  });
+
+  test.afterAll(() => {
+    app.dispose();
+  });
+
+  test('open editor.js on the editor with preview', async () => {
+    editor = await app.openEditor(OpenSumiTextEditor, explorer, 'editor.js');
+    const isPreview = await editor.isPreview();
+    expect(isPreview).toBeTruthy();
+    await editor.close();
+  });
+
+  test('open editor.js on the editor without preview', async () => {
+    editor = await app.openEditor(OpenSumiTextEditor, explorer, 'editor.js', false);
+    const isPreview = await editor.isPreview();
+    expect(isPreview).toBeFalsy();
+    await editor.close();
+  });
+
+  test('editor dirty status should be update immediately after typing and saving', async () => {
+    editor = await app.openEditor(OpenSumiTextEditor, explorer, 'editor.js');
+    await editor.addTextToNewLineAfterLineByLineNumber(
+      1,
+      `const a = 'a';
+console.log(a);`,
+    );
+    let isDirty = await editor.isDirty();
+    expect(isDirty).toBeTruthy();
+    await editor.save();
+    await app.page.waitForTimeout(2000);
+    isDirty = await editor.isDirty();
+    expect(isDirty).toBeFalsy();
+    await editor.close();
+  });
+
+  test('File tree automatic location', async () => {
+    editor = await app.openEditor(OpenSumiTextEditor, explorer, 'editor.js', false);
+    const editor2 = await app.openEditor(OpenSumiTextEditor, explorer, 'editor2.js', false);
+    await app.page.waitForTimeout(1000);
+    const firstFileTab = await editor.getTab();
+    await firstFileTab?.click();
+    await app.page.waitForTimeout(1000);
+    const node = await explorer.getFileStatTreeNodeByPath('editor.js');
+    expect(await node?.isSelected()).toBeTruthy();
+    const node2 = await explorer.getFileStatTreeNodeByPath('editor2.js');
+    expect(await node2?.isSelected()).toBeFalsy();
+    await editor.close();
+    await editor2.close();
+  });
+
+  test('Close All Editors should be worked', async () => {
+    editor = await app.openEditor(OpenSumiTextEditor, explorer, 'editor.js', false);
+    await app.openEditor(OpenSumiTextEditor, explorer, 'editor2.js', false);
+    await app.page.waitForTimeout(1000);
+    expect(await editor.isTabVisible()).toBeTruthy();
+    const contextMenu = await editor.openTabContextMenu();
+    expect(await contextMenu?.isOpen()).toBeTruthy();
+    const closeAll = await contextMenu?.menuItemByName('Close All');
+    await closeAll?.click();
+    await app.page.waitForTimeout(1000);
+    expect(await editor.isTabVisible()).toBeFalsy();
+  });
+
+  test('copy path from file explorer to the editor content', async () => {
+    const node = await explorer.getFileStatTreeNodeByPath('editor3.js');
+    let fileMenu = await node?.openContextMenu();
+    expect(await fileMenu?.isOpen()).toBeTruthy();
+    const copyPath = await fileMenu?.menuItemByName('Copy Path');
+    await app.page.waitForTimeout(400);
+    await copyPath?.click();
+    editor = await app.openEditor(OpenSumiTextEditor, explorer, 'editor3.js');
+    await editor.addTextToNewLineAfterLineByLineNumber(1, 'File Path: ');
+    // cause of https://github.com/microsoft/playwright/issues/8114
+    // we can just using keypress to fake the paste feature
+    let editorMenu = await editor.openLineContextMenuByLineNumber(2);
+    expect(await editorMenu?.isOpen()).toBeTruthy();
+    let paste = await editorMenu?.menuItemByName('Paste');
+    await paste?.click();
+    await app.page.waitForTimeout(200);
+    expect(await editor.numberOfLines()).toBe(2);
+    expect(
+      await editor.textContentOfLineContainingText(
+        `File Path: ${workspace.workspace.resolve('editor3.js').codeUri.fsPath.toString()}`,
+      ),
+    ).toBeTruthy();
+    fileMenu = await node?.openContextMenu();
+    const copyRelativePath = await fileMenu?.menuItemByName('Copy Relative Path');
+    await copyRelativePath?.click();
+    await app.page.waitForTimeout(200);
+    await editor.addTextToNewLineAfterLineByLineNumber(2, 'File Relative Path: ');
+    editorMenu = await editor.openLineContextMenuByLineNumber(3);
+    expect(await editorMenu?.isOpen()).toBeTruthy();
+    paste = await editorMenu?.menuItemByName('Paste');
+    await paste?.click();
+    await app.page.waitForTimeout(200);
+    expect(await editor.numberOfLines()).toBe(3);
+    expect(await editor.textContentOfLineContainingText('File Relative Path: editor3.js')).toBeTruthy();
+  });
+
+  test('Go to Symbol... should be worked', async () => {
+    editor = await app.openEditor(OpenSumiTextEditor, explorer, 'editor2.js');
+    // waiting for extHost process done.
+    await app.page.waitForTimeout(1000);
+    const editorMenu = await editor.openLineContextMenuByLineNumber(1);
+    expect(await editorMenu?.isOpen()).toBeTruthy();
+    const goto = await editorMenu?.menuItemByName('Go to Symbol...');
+    await goto?.click();
+    await app.page.waitForTimeout(1000);
+    const input = await app.page.waitForSelector(`#${OPENSUMI_VIEW_CONTAINERS.QUICKPICK_INPUT}`);
+    await input.focus();
+    await app.page.keyboard.press(' ');
+    await app.page.keyboard.press('ArrowDown');
+    await app.page.keyboard.press('ArrowDown');
+    await app.page.keyboard.press('Enter');
+    await app.page.keyboard.press('Delete');
+    expect(await editor.textContentOfLineContainingText('Person.prototype.getAge = ;')).toBeTruthy();
+  });
+});

package/src/tests/explorer-view.test.ts

@@ -0,0 +1,202 @@
+import path from 'path';
+
+import { expect } from '@playwright/test';
+
+import { isWindows } from '@opensumi/ide-utils';
+
+import { OpenSumiApp } from '../app';
+import { OpenSumiExplorerView } from '../explorer-view';
+import { OpenSumiFileTreeView } from '../filetree-view';
+import { OpenSumiOpenedEditorView } from '../opened-editor-view';
+import { OpenSumiTerminal } from '../terminal';
+import { OpenSumiTextEditor } from '../text-editor';
+import { OpenSumiWorkspace } from '../workspace';
+
+import test, { page } from './hooks';
+
+let app: OpenSumiApp;
+let explorer: OpenSumiExplorerView;
+let fileTreeView: OpenSumiFileTreeView;
+let openedEditorView: OpenSumiOpenedEditorView;
+let workspace: OpenSumiWorkspace;
+
+test.describe('OpenSumi Explorer Panel', () => {
+  test.beforeAll(async () => {
+    workspace = new OpenSumiWorkspace([path.resolve('./src/tests/workspaces/default')]);
+    app = await OpenSumiApp.load(page, workspace);
+    explorer = await app.open(OpenSumiExplorerView);
+    explorer.initFileTreeView(workspace.workspace.displayName);
+    fileTreeView = explorer.fileTreeView;
+    openedEditorView = explorer.openedEditorView;
+  });
+
+  test.afterAll(() => {
+    app.dispose();
+  });
+
+  test('should show file explorer', async () => {
+    expect(explorer.isVisible()).toBeTruthy();
+    await fileTreeView.open();
+    expect(await fileTreeView.isVisible()).toBeTruthy();
+  });
+
+  test('can new single file by context menu', async () => {
+    const node = await explorer.getFileStatTreeNodeByPath('test');
+    await node?.expand();
+    expect(await node?.isCollapsed()).toBeFalsy();
+    const menu = await node?.openContextMenu();
+    expect(await menu?.isOpen()).toBeTruthy();
+    const newFileMenu = await menu?.menuItemByIndex(0);
+    await newFileMenu?.click();
+    // type `new_file` as the file name
+    const newFileName = 'new_file';
+    const input = await (await fileTreeView.getViewElement())?.waitForSelector('.kt-input-box');
+    if (input != null) {
+      await input.focus();
+      await input.type(newFileName, { delay: 200 });
+      await app.page.keyboard.press('Enter');
+    }
+    await app.page.waitForTimeout(200);
+    const newFile = await explorer.getFileStatTreeNodeByPath(`test/${newFileName}`);
+    expect(newFile).toBeDefined();
+    expect(await newFile?.isFolder()).toBeFalsy();
+  });
+
+  test('can new folder by context menu', async () => {
+    const node = await explorer.getFileStatTreeNodeByPath('test');
+    await node?.expand();
+    expect(await node?.isCollapsed()).toBeFalsy();
+    const menu = await node?.openContextMenu();
+    expect(await menu?.isOpen()).toBeTruthy();
+    const newFileMenu = await menu?.menuItemByName('New Folder');
+    await newFileMenu?.click();
+    // type `new_file` as the file name
+    const newFileName = 'new_folder';
+    const input = await (await fileTreeView.getViewElement())?.waitForSelector('.kt-input-box');
+    if (input != null) {
+      await input.focus();
+      await input.type(newFileName, { delay: 200 });
+      await app.page.keyboard.press('Enter');
+    }
+    await app.page.waitForTimeout(200);
+    const newFile = await explorer.getFileStatTreeNodeByPath(`test/${newFileName}`);
+    expect(newFile).toBeDefined();
+    expect(await newFile?.isFolder()).toBeTruthy();
+  });
+
+  test('can new file from toolbar', async () => {
+    const node = await explorer.getFileStatTreeNodeByPath('editor.js');
+    await node?.open();
+    const action = await fileTreeView.getTitleActionByName('New File');
+    await action?.click();
+    // type `new_file` as the file name
+    const newFileName = 'new_file2';
+    const input = await (await fileTreeView.getViewElement())?.waitForSelector('.kt-input-box');
+    if (input != null) {
+      await input.focus();
+      await input.type(newFileName, { delay: 200 });
+      await app.page.keyboard.press('Enter');
+    }
+    await app.page.waitForTimeout(200);
+    const newFile = await explorer.getFileStatTreeNodeByPath(`${newFileName}`);
+    expect(newFile).toBeDefined();
+    expect(await newFile?.isFolder()).toBeFalsy();
+  });
+
+  test('can new folder from toolbar', async () => {
+    const node = await explorer.getFileStatTreeNodeByPath('editor.js');
+    await node?.open();
+    const action = await fileTreeView.getTitleActionByName('New Folder');
+    await action?.click();
+    // type `new_folder2` as the file name
+    const newFileName = 'new_folder2';
+    const input = await (await fileTreeView.getViewElement())?.waitForSelector('.kt-input-box');
+    if (input != null) {
+      await input.focus();
+      await input.type(newFileName, { delay: 200 });
+      await app.page.keyboard.press('Enter');
+    }
+    await app.page.waitForTimeout(200);
+    const newFile = await explorer.getFileStatTreeNodeByPath(`${newFileName}`);
+    expect(newFile).toBeDefined();
+    expect(await newFile?.isFolder()).toBeTruthy();
+  });
+
+  (isWindows ? test.skip : test)('fileTree should be updated while create directory from terminal', async () => {
+    const dirname = 'dir_from_terminal';
+    const terminal = await app.open(OpenSumiTerminal);
+    await terminal.sendText(`cd ${workspace.workspace.codeUri.fsPath}`);
+    await terminal.sendText(`mkdir ${dirname}`);
+    await app.page.waitForTimeout(2000);
+    let newDir = await explorer.getFileStatTreeNodeByPath(dirname);
+    if (!newDir) {
+      const action = await fileTreeView.getTitleActionByName('Refresh');
+      await action?.click();
+      await app.page.waitForTimeout(200);
+      newDir = await explorer.getFileStatTreeNodeByPath(dirname);
+    }
+    expect(newDir).toBeDefined();
+  });
+
+  test('can filter files on the filetree', async () => {
+    const action = await fileTreeView.getTitleActionByName('Filter on opened files');
+    await action?.click();
+    // type `editor2` to filter existed files
+    const filterString = 'editor2';
+    const input = await (await fileTreeView.getViewElement())?.waitForSelector('.kt-input-box');
+    if (input != null) {
+      await input.focus();
+      await input.type(filterString, { delay: 200 });
+    }
+    await app.page.waitForTimeout(200);
+    const file_1 = await explorer.getFileStatTreeNodeByPath(`${filterString}.js`);
+    expect(file_1).toBeDefined();
+    let file_2 = await explorer.getFileStatTreeNodeByPath('editor.js');
+    expect(file_2).toBeUndefined();
+    await app.page.keyboard.press('Escape');
+    file_2 = await explorer.getFileStatTreeNodeByPath('editor.js');
+    expect(file_2).toBeDefined();
+  });
+
+  test('should show opened files on the opened editor panel', async () => {
+    await openedEditorView.open();
+    expect(await openedEditorView.isVisible()).toBeTruthy();
+    const testFilePath = 'editor.js';
+    await app.openEditor(OpenSumiTextEditor, explorer, testFilePath);
+    await app.page.waitForTimeout(500);
+    const node = await explorer.getOpenedEditorTreeNodeByPath(testFilePath);
+    expect(node).toBeDefined();
+  });
+
+  test('should show dirty icon on the opened editor panel', async () => {
+    await openedEditorView.open();
+    expect(await openedEditorView.isVisible()).toBeTruthy();
+    const testFilePath = 'editor3.js';
+    const editor = await app.openEditor(OpenSumiTextEditor, explorer, testFilePath);
+    await editor.addTextToNewLineAfterLineByLineNumber(
+      1,
+      `const a = 'a';
+console.log(a);`,
+    );
+    await app.page.waitForTimeout(1000);
+    let node = await explorer.getOpenedEditorTreeNodeByPath(testFilePath);
+    expect(await node?.isDirty()).toBeTruthy();
+    await editor.save();
+    await app.page.waitForTimeout(1000);
+    node = await explorer.getOpenedEditorTreeNodeByPath(testFilePath);
+    expect(await node?.isDirty()).toBeFalsy();
+  });
+
+  test('split file on the editor should showing on two group', async () => {
+    await openedEditorView.open();
+    expect(await openedEditorView.isVisible()).toBeTruthy();
+    const testFilePath = 'editor3.js';
+    const editor = await app.openEditor(OpenSumiTextEditor, explorer, testFilePath);
+    await editor.triggerTitleMenuById('editor.splitToRight');
+    await app.page.waitForTimeout(2000);
+    const group1 = await explorer.getOpenedEditorTreeNodeByPath('Group 1');
+    const group2 = await explorer.getOpenedEditorTreeNodeByPath('Group 2');
+    expect(group1).toBeDefined();
+    expect(group2).toBeDefined();
+  });
+});

package/src/tests/hooks/index.ts

@@ -0,0 +1,13 @@
+import test, { Page } from '@playwright/test';
+
+export let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  // ref: https://playwright.dev/docs/api/class-browsercontext
+  const context = await browser.newContext({
+    permissions: ['clipboard-read', 'clipboard-write'],
+  });
+  page = await context.newPage();
+});
+
+export default test;

package/src/tests/keymaps.test.ts

@@ -0,0 +1,118 @@
+import path from 'path';
+
+import { expect } from '@playwright/test';
+
+import { OpenSumiApp } from '../app';
+import { OpenSumiComponentEditor } from '../component-editor';
+import { OPENSUMI_VIEW_CONTAINERS } from '../constans';
+import { OpenSumiContextMenu } from '../context-menu';
+import { OpenSumiExplorerView } from '../explorer-view';
+import { OpenSumiTextEditor } from '../text-editor';
+import { keypressWithCmdCtrl } from '../utils';
+import { OpenSumiWorkspace } from '../workspace';
+
+import test, { page } from './hooks';
+
+let app: OpenSumiApp;
+let explorer: OpenSumiExplorerView;
+let workspace: OpenSumiWorkspace;
+
+test.describe('OpenSumi Keyboard Shortcuts', () => {
+  test.beforeAll(async () => {
+    workspace = new OpenSumiWorkspace([path.resolve('./src/tests/workspaces/default')]);
+    app = await OpenSumiApp.load(page, workspace);
+    explorer = await app.open(OpenSumiExplorerView);
+    explorer.initFileTreeView(workspace.workspace.displayName);
+  });
+
+  test.afterAll(() => {
+    app.dispose();
+  });
+
+  const openKeymapsView = async () => {
+    const leftTabbar = await app.page.waitForSelector(`#${OPENSUMI_VIEW_CONTAINERS.LEFT_TABBAR}`);
+    const settingsButton = await leftTabbar.$('[class*="titleActions___"] span');
+    await settingsButton?.click();
+    const menu = new OpenSumiContextMenu(app);
+    await menu.clickMenuItem('Keyboard Shortcut');
+  };
+
+  test('open Keyboard Settings by keybinding', async () => {
+    await explorer.fileTreeView.focus();
+    await app.page.keyboard.press(keypressWithCmdCtrl('KeyK'), { delay: 200 });
+    await app.page.keyboard.press(keypressWithCmdCtrl('KeyS'), { delay: 200 });
+    const editor = await app.openComponentEditor(
+      OpenSumiComponentEditor,
+      'keymaps:/',
+      'Keyboard Shortcuts',
+      "[class*='keybinding_container___']",
+    );
+    expect(await editor.isVisible()).toBeTruthy();
+    await editor.close();
+    await app.page.waitForTimeout(1000);
+    expect(await editor.isVisible()).toBeFalsy();
+  });
+
+  test('open Keyboard Settings by settings button', async () => {
+    await openKeymapsView();
+    const editor = await app.openComponentEditor(
+      OpenSumiComponentEditor,
+      'keymaps:/',
+      'Keyboard Shortcuts',
+      "[class*='keybinding_container___']",
+    );
+    expect(await editor.isVisible()).toBeTruthy();
+    await editor.close();
+  });
+
+  test("change 'Save Current File' keybinding to 'CMD+SHIFT+S'", async () => {
+    await openKeymapsView();
+    const editor = await app.openComponentEditor(
+      OpenSumiComponentEditor,
+      'keymaps:/',
+      'Keyboard Shortcuts',
+      "[class*='keybinding_container___']",
+    );
+    expect(await editor.isVisible()).toBeTruthy();
+    const searchArea = await (await editor.getContainer())?.$('[class*="search_input___"]');
+    const keyboardButton = await searchArea?.$('[class*="search_inline_action___"] span');
+    const searchInput = await searchArea?.$('.kt-input-box input');
+    await keyboardButton?.click();
+    await searchInput?.focus();
+    // type 'CMD+S' to filter 'Save Current File' command
+    await app.page.keyboard.press(keypressWithCmdCtrl('KeyS'), { delay: 200 });
+
+    const items = (await (await editor.getContainer())?.$$('[class*="keybinding_list_item__"]')) || [];
+    let saveFileItem;
+    for (const item of items) {
+      const command_name = await (await item.$('[class*="command_name___"]'))?.textContent();
+      if (command_name === 'Save Current File') {
+        saveFileItem = item;
+        break;
+      }
+    }
+    expect(saveFileItem).toBeDefined();
+    await saveFileItem?.hover();
+    const edit = await saveFileItem.$('[title="Edit"]');
+    await edit?.click();
+    await app.page.keyboard.press(keypressWithCmdCtrl('Shift+KeyS'), { delay: 200 });
+    await app.page.keyboard.press('Enter');
+    // varified file save keybinding
+    const textEditor = await app.openEditor(OpenSumiTextEditor, explorer, 'editor.js');
+    await textEditor.addTextToNewLineAfterLineByLineNumber(
+      1,
+      `const a = 'a';
+console.log(a);`,
+    );
+    let isDirty = await textEditor.isDirty();
+    expect(isDirty).toBeTruthy();
+    await app.page.keyboard.press(keypressWithCmdCtrl('KeyS'), { delay: 200 });
+    await app.page.waitForTimeout(1000);
+    isDirty = await textEditor.isDirty();
+    expect(isDirty).toBeTruthy();
+    await app.page.keyboard.press(keypressWithCmdCtrl('Shift+KeyS'), { delay: 200 });
+    await app.page.waitForTimeout(1000);
+    isDirty = await textEditor.isDirty();
+    expect(isDirty).toBeFalsy();
+  });
+});

package/src/tests/language.test.ts

@@ -0,0 +1,55 @@
+import path from 'path';
+
+import { expect } from '@playwright/test';
+
+import { isMacintosh } from '@opensumi/ide-utils';
+
+import { OpenSumiApp } from '../app';
+import { OpenSumiExplorerView } from '../explorer-view';
+import { OpenSumiTextEditor } from '../text-editor';
+import { OpenSumiWorkspace } from '../workspace';
+
+import test, { page } from './hooks';
+
+let app: OpenSumiApp;
+let explorer: OpenSumiExplorerView;
+let editor: OpenSumiTextEditor;
+let workspace: OpenSumiWorkspace;
+
+test.describe('OpenSumi Language', () => {
+  test.beforeAll(async () => {
+    workspace = new OpenSumiWorkspace([path.resolve('./src/tests/workspaces/language')]);
+    app = await OpenSumiApp.load(page, workspace);
+    explorer = await app.open(OpenSumiExplorerView);
+    explorer.initFileTreeView(workspace.workspace.displayName);
+    await explorer.fileTreeView.open();
+  });
+
+  test.afterAll(() => {
+    app.dispose();
+  });
+
+  test('Go to Defination by cmd + click', async () => {
+    const folder = await explorer.getFileStatTreeNodeByPath('language');
+    await folder?.open();
+
+    editor = await app.openEditor(OpenSumiTextEditor, explorer, 'reference.ts', false);
+    await editor.activate();
+    await app.page.waitForTimeout(2000);
+    await editor.placeCursorInLineWithPosition(4, 20);
+    let cursorHandle = await editor.getCursorElement();
+    await cursorHandle?.click({ modifiers: [isMacintosh ? 'Meta' : 'Control'] });
+    await app.page.waitForTimeout(2000);
+    const definitionTree = await explorer.getFileStatTreeNodeByPath('definition.ts');
+    expect(await definitionTree?.isSelected()).toBeTruthy();
+    const currentTab = await editor.getCurrentTab();
+    expect(await currentTab?.textContent()).toStrictEqual(' definition.ts');
+
+    cursorHandle = await editor.getCursorElement();
+    const cursorLineNumber = await editor.getCursorLineNumber(cursorHandle?.asElement());
+    expect(cursorLineNumber).toBe(1);
+    expect(await editor.textContentOfLineByLineNumber(cursorLineNumber!)).toBe('export class Definition {');
+
+    await editor.close();
+  });
+});