@opensumi/playwright 2.21.13 → 2.22.0

package/src/tests/editor.test.ts

@@ -0,0 +1,141 @@
+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: ');
+    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,329 @@
+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 { OpenSumiOutlineView } from '../outline-view';
+import { OpenSumiTerminalView } from '../terminal-view';
+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 outlineView: OpenSumiOutlineView;
+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;
+    outlineView = explorer.outlineView;
+    openedEditorView = explorer.openedEditorView;
+  });
+
+  test.afterAll(() => {
+    app.dispose();
+  });
+
+  test('should show file explorer', async () => {
+    expect(await 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(OpenSumiTerminalView);
+    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('the open state of the editor should be restored after refreshing', async () => {
+    await openedEditorView.open();
+    const testFilePath_1 = 'editor2.js';
+    const testFilePath_2 = 'editor3.js';
+    // Close All Edtior Tabs
+    const editor = await app.openEditor(OpenSumiTextEditor, explorer, testFilePath_1);
+    await app.page.waitForTimeout(1000);
+    let node = await explorer.getOpenedEditorTreeNodeByPath(testFilePath_1);
+    expect(node).toBeDefined();
+    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);
+    node = await explorer.getOpenedEditorTreeNodeByPath(testFilePath_1);
+    expect(node).toBeUndefined();
+    // Open File
+    await app.openEditor(OpenSumiTextEditor, explorer, testFilePath_1, false);
+    await app.openEditor(OpenSumiTextEditor, explorer, testFilePath_2, false);
+    await app.page.waitForTimeout(1000);
+    node = await explorer.getOpenedEditorTreeNodeByPath(testFilePath_1);
+    expect(node).toBeDefined();
+    node = await explorer.getOpenedEditorTreeNodeByPath(testFilePath_2);
+    expect(node).toBeDefined();
+    await app.page.reload();
+    await app.page.waitForTimeout(2000);
+    node = await explorer.getOpenedEditorTreeNodeByPath(testFilePath_1);
+    expect(node).toBeDefined();
+    node = await explorer.getOpenedEditorTreeNodeByPath(testFilePath_2);
+    expect(node).toBeDefined();
+  });
+
+  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();
+  });
+
+  test('create file with path', async () => {
+    await fileTreeView.open();
+    const node = await explorer.getFileStatTreeNodeByPath('test');
+    await node?.expand();
+    expect(await node?.isCollapsed()).toBeFalsy();
+    let menu = await node?.openContextMenu();
+    expect(await menu?.isOpen()).toBeTruthy();
+    let newFileMenu = await menu?.menuItemByName('New File');
+    await newFileMenu?.click();
+    // type `index.ts` as the file name
+    let newFileName = 'index.ts';
+    let 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();
+    // new compress node by path
+    menu = await node?.openContextMenu();
+    newFileMenu = await menu?.menuItemByName('New File');
+    await newFileMenu?.click();
+    // type `a/b/c.js` as the file name
+    newFileName = 'a/b/c.js';
+    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(1000);
+    // |- test
+    // |----a/b
+    const nodeA = await explorer.getFileStatTreeNodeByPath('test/a');
+    await nodeA?.expand();
+    await app.page.waitForTimeout(2000);
+    expect(await nodeA?.isCollapsed()).toBeFalsy();
+    const compressNode = await explorer.getFileStatTreeNodeByPath('test/a/b');
+    expect(compressNode).toBeDefined();
+    expect(await compressNode?.label()).toBe('a/b');
+    menu = await node?.openContextMenu();
+    newFileMenu = await menu?.menuItemByName('New File');
+    await newFileMenu?.click();
+    // type `a/d/c.js` as the file name
+    newFileName = 'a/d/c.js';
+    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(2000);
+    // |- test
+    // |----a
+    // |------b
+    // |------d
+    const uncompressNode = await explorer.getFileStatTreeNodeByPath('test/a/b');
+    expect(uncompressNode).toBeDefined();
+    expect(await uncompressNode?.label()).toBe('b');
+    // After delete `test/a/b` folder
+    // |- test
+    // |----a/d
+    menu = await uncompressNode?.openContextMenu();
+    const deleteMenu = await menu?.menuItemByName('Delete');
+    await deleteMenu?.click();
+    await app.page.waitForTimeout(200);
+    const confirmed = await app.getDialogButton('Move to trash');
+    await confirmed?.click();
+    await app.page.waitForTimeout(2000);
+    const afterDeleteNode = await explorer.getFileStatTreeNodeByPath('test/a/d');
+    expect(afterDeleteNode).toBeDefined();
+    expect(await afterDeleteNode?.label()).toBe('a/d');
+  });
+
+  test('the visible state of outline panel should be restored after refreshing', async () => {
+    if (!(await explorer.isVisible())) {
+      await explorer.open();
+    }
+    await outlineView.open();
+    const menu = await outlineView.openTabContextMenu();
+    await menu?.clickMenuItem(outlineView.name!);
+    await app.page.waitForTimeout(1000);
+    // Default to be visibled
+    expect(await outlineView.isVisible()).toBeFalsy();
+    await app.page.reload();
+    await app.page.waitForTimeout(2000);
+    expect(await outlineView.isVisible()).toBeFalsy();
+  });
+});

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();
+  });
+});