Merge branch 'feature/ui-e2e-tests' into quick-actions

surajrdy-aws · web-flow · commit 33437c3f9e0f · 2025-08-06T15:01:49.000-04:00
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
         "testE2E": "npm run testE2E -w packages/ --if-present",
         "test:ui:prepare": "./node_modules/.bin/extest get-vscode -s ~/.vscode-test-resources -n && extest get-chromedriver -s ~/.vscode-test-resources -n",
         "test:ui:install": "cd packages/amazonq && npm run package 2>&1 | grep -o 'VSIX Version: [^ ]*' | cut -d' ' -f3 | xargs -I{} bash -c 'cd ../../ && ./node_modules/.bin/extest install-vsix -f amazon-q-vscode-{}.vsix -e packages/amazonq/test/e2e_new/amazonq/resources -s ~/.vscode-test-resources'",
-        "test:ui:run": "npm run testCompile && ./node_modules/.bin/extest run-tests -s ~/.vscode-test-resources -e packages/amazonq/test/e2e_new/amazonq/resources packages/amazonq/dist/test/e2e_new/amazonq/tests/*.js",
+        "test:ui:run": "npm run testCompile && ./node_modules/.bin/extest run-tests -s ~/.vscode-test-resources -e packages/amazonq/test/e2e_new/amazonq/resources packages/amazonq/dist/test/e2e_new/amazonq/tests/*.test.js",
         "test:ui": "npm run test:ui:prepare && npm run test:ui:install && npm run test:ui:run",
         "testInteg": "npm run testInteg -w packages/ --if-present",
         "package": "npm run package -w packages/toolkit -w packages/amazonq",
diff --git a/packages/amazonq/test/e2e_new/amazonq/helpers/mcpHelper.ts b/packages/amazonq/test/e2e_new/amazonq/helpers/mcpHelper.ts
@@ -0,0 +1,286 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { WebviewView, By, WebElement } from 'vscode-extension-tester'
+import { waitForElement } from '../utils/generalUtils'
+
+/**
+ * Clicks the tools to get to the MCP server overlay
+ * @param webviewView The WebviewView instance
+ * @returns Promise<boolean> True if tools button was found and clicked, false otherwise
+ */
+export async function clickToolsButton(webviewView: WebviewView): Promise<void> {
+    try {
+        const navWrapper = await waitForElement(webviewView, By.css('.mynah-nav-tabs-wrapper.mynah-ui-clickable-item'))
+        const buttonsWrapper = await navWrapper.findElement(By.css('.mynah-nav-tabs-bar-buttons-wrapper'))
+        const buttons = await buttonsWrapper.findElements(
+            By.css('.mynah-button.mynah-button-secondary.fill-state-always.mynah-ui-clickable-item')
+        )
+        for (const button of buttons) {
+            const icon = await button.findElement(By.css('i.mynah-ui-icon.mynah-ui-icon-tools'))
+            if (icon) {
+                await button.click()
+                await webviewView.getDriver().actions().move({ x: 0, y: 0 }).perform()
+            }
+        }
+        console.log('Tools button not found')
+    } catch (e) {
+        console.error('Error clicking tools button:', e)
+    }
+}
+
+/**
+ * Clicks the add button in the MCP server configuration panel
+ * @param webviewView The WebviewView instance
+ * @returns Promise<boolean> True if add button was found and clicked, false otherwise
+ */
+export async function clickMCPAddButton(webviewView: WebviewView): Promise<void> {
+    try {
+        const sheetWrapper = await waitForElement(webviewView, By.id('mynah-sheet-wrapper'))
+        const header = await sheetWrapper.findElement(By.css('.mynah-sheet-header'))
+        const actionsContainer = await header.findElement(By.css('.mynah-sheet-header-actions-container'))
+        const addButton = await actionsContainer.findElement(By.css('button:has(i.mynah-ui-icon-plus)'))
+        await addButton.click()
+    } catch (e) {
+        console.error('Error clicking the MCP add button:', e)
+    }
+}
+
+/**
+ * Configures an MCP server with the provided settings
+ * @param webviewView The WebviewView instance
+ * @param config Configuration object with optional parameters
+ * @returns Promise<boolean> True if configuration was successful, false otherwise
+ * Note: I have the default settings in the defaultConfig
+ */
+interface MCPServerConfig {
+    scope?: 'global' | 'workspace'
+    name?: string
+    transport?: number
+    command?: string
+    args?: string[]
+    environmentVariable?: { name: string; value: string }
+    timeout?: number
+}
+
+const defaultConfig: MCPServerConfig = {
+    scope: 'global',
+    name: 'aws-documentation',
+    transport: 0,
+    command: 'uvx',
+    args: ['awslabs.aws-documentation-mcp-server@latest'],
+    timeout: 0,
+}
+
+// Each name maps to an index in the '.mynah-form-input-wrapper' array
+const formItemsMap = {
+    SCOPE: 0,
+    NAME: 1,
+    TRANSPORT: 2,
+    COMMAND: 3,
+    ARGS: 4,
+    ENV_VARS: 6,
+    TIMEOUT: 9,
+} as const
+
+type McpFormItem = keyof typeof formItemsMap
+
+async function selectScope(container: WebElement, scope: string) {
+    try {
+        const radioLabels = await container.findElements(
+            By.css('.mynah-form-input-radio-label.mynah-ui-clickable-item')
+        )
+        if (scope === 'global') {
+            const globalOption = radioLabels[0]
+            await globalOption.click()
+        } else {
+            const workspaceOption = radioLabels[1]
+            await workspaceOption.click()
+        }
+    } catch (e) {
+        console.error('Error selecting the scope:', e)
+        throw e
+    }
+}
+
+async function inputName(container: WebElement, name: string) {
+    try {
+        const input = await container.findElement(By.css('.mynah-form-input'))
+        await input.sendKeys(name)
+    } catch (e) {
+        console.error('Error inputing the name:', e)
+        throw e
+    }
+}
+
+async function selectTransport(container: WebElement, transport: number) {
+    try {
+        const selectElement = await container.findElement(By.css('select'))
+        const options = await selectElement.findElements(By.css('option'))
+        const optionIndex = transport
+        await options[optionIndex].click()
+    } catch (e) {
+        console.error('Error selecting the transport:', e)
+        throw e
+    }
+}
+
+async function inputCommand(container: WebElement, command: string) {
+    try {
+        const input = await container.findElement(By.css('.mynah-form-input'))
+        await input.sendKeys(command)
+    } catch (e) {
+        console.error('Error inputing the command:', e)
+        throw e
+    }
+}
+
+async function inputArgs(container: WebElement, args: string[]) {
+    try {
+        const input = await container.findElement(By.css('.mynah-form-input'))
+        const addButton = await container.findElement(By.css('.mynah-form-item-list-add-button'))
+        for (let i = 0; i < args.length; i++) {
+            await input.sendKeys(args[i])
+            await addButton.click()
+        }
+    } catch (e) {
+        console.error('Error inputing the arguments:', e)
+        throw e
+    }
+}
+
+async function inputEnvironmentVariables(container: WebElement, environmentVariable?: { name: string; value: string }) {
+    try {
+        if (environmentVariable) {
+            const envInputs = await container.findElements(By.css('.mynah-form-input'))
+            await envInputs[0].sendKeys(environmentVariable.name)
+            await envInputs[1].sendKeys(environmentVariable.value)
+            const addButton = await container.findElement(By.css('.mynah-form-item-list-add-button'))
+            await addButton.click()
+        } else {
+            console.log('No environmental variables for this configuration')
+        }
+    } catch (e) {
+        console.error('Error inputing the environment variables:', e)
+        throw e
+    }
+}
+
+async function inputTimeout(container: WebElement, timeout: number) {
+    try {
+        const input = await container.findElement(By.css('.mynah-form-input'))
+        await input.clear()
+        await input.sendKeys(timeout.toString())
+    } catch (e) {
+        console.error('Error inputing the timeout:', e)
+        throw e
+    }
+}
+
+async function processFormItem(mcpFormItem: McpFormItem, container: WebElement, config: MCPServerConfig) {
+    switch (mcpFormItem) {
+        case 'SCOPE':
+            await selectScope(container, config.scope!)
+            break
+        case 'NAME':
+            await inputName(container, config.name!)
+            break
+        case 'TRANSPORT':
+            await selectTransport(container, config.transport!)
+            break
+        case 'COMMAND':
+            await inputCommand(container, config.command!)
+            break
+        case 'ARGS':
+            await inputArgs(container, config.args!)
+            break
+        case 'ENV_VARS':
+            await inputEnvironmentVariables(container, config.environmentVariable)
+            break
+        case 'TIMEOUT':
+            await inputTimeout(container, config.timeout!)
+            break
+    }
+}
+
+export async function configureMCPServer(webviewView: WebviewView, config: MCPServerConfig = {}): Promise<void> {
+    const mergedConfig = { ...defaultConfig, ...config }
+    try {
+        const sheetWrapper = await waitForElement(webviewView, By.id('mynah-sheet-wrapper'))
+        const sheetBody = await sheetWrapper.findElement(By.css('.mynah-sheet-body'))
+        const filtersWrapper = await sheetBody.findElement(By.css('.mynah-detailed-list-filters-wrapper'))
+        const formContainer = await filtersWrapper.findElement(By.css('.mynah-chat-item-form-items-container'))
+        const items = await formContainer.findElements(By.css('.mynah-form-input-wrapper'))
+
+        for (const formItem of Object.keys(formItemsMap) as McpFormItem[]) {
+            const index = formItemsMap[formItem]
+            if (index < items.length) {
+                await processFormItem(formItem, items[index], mergedConfig)
+            }
+        }
+    } catch (e) {
+        console.log('Error configuring the MCP Server')
+    }
+}
+
+export async function saveMCPServerConfiguration(webviewView: WebviewView): Promise<void> {
+    try {
+        const sheetWrapper = await waitForElement(webviewView, By.id('mynah-sheet-wrapper'))
+        const body = await sheetWrapper.findElement(By.css('.mynah-sheet-body'))
+        const filterActions = await body.findElement(By.css('.mynah-detailed-list-filter-actions-wrapper'))
+        const saveButton = await filterActions.findElement(
+            By.css('.mynah-button.fill-state-always.status-primary.mynah-ui-clickable-item')
+        )
+        await saveButton.click()
+    } catch (e) {
+        console.error('Error saving the MCP server configuration:', e)
+    }
+}
+
+export async function cancelMCPServerConfiguration(webviewView: WebviewView): Promise<void> {
+    try {
+        const sheetWrapper = await waitForElement(webviewView, By.id('mynah-sheet-wrapper'))
+        const body = await sheetWrapper.findElement(By.css('.mynah-sheet-body'))
+        const filterActions = await body.findElement(By.css('.mynah-detailed-list-filter-actions-wrapper'))
+        const saveButton = await filterActions.findElement(
+            By.css('.mynah-button.mynah-button-secondary.mynah-button-border.fill-state-always.mynah-ui-clickable-item')
+        )
+        await saveButton.click()
+    } catch (e) {
+        console.error('Error saving the MCP server configuration:', e)
+    }
+}
+
+/**
+ * Clicks the refresh button in the MCP server configuration panel
+ * @param webviewView The WebviewView instance
+ * @returns Promise<boolean> True if refresh button was found and clicked, false otherwise
+ */
+export async function clickMCPRefreshButton(webviewView: WebviewView): Promise<void> {
+    try {
+        const sheetWrapper = await waitForElement(webviewView, By.id('mynah-sheet-wrapper'))
+        const header = await sheetWrapper.findElement(By.css('.mynah-sheet-header'))
+        const actionsContainer = await header.findElement(By.css('.mynah-sheet-header-actions-container'))
+        const refreshButton = await actionsContainer.findElement(By.css('button:has(i.mynah-ui-icon-refresh)'))
+        await refreshButton.click()
+    } catch (e) {
+        console.error('Error clicking the MCP refresh button:', e)
+    }
+}
+
+/**
+ * Clicks the close/cancel button in the MCP server configuration panel
+ * @param webviewView The WebviewView instance
+ * @returns Promise<boolean> True if close button was found and clicked, false otherwise
+ */
+export async function clickMCPCloseButton(webviewView: WebviewView): Promise<void> {
+    try {
+        const sheetWrapper = await waitForElement(webviewView, By.id('mynah-sheet-wrapper'))
+        const header = await sheetWrapper.findElement(By.css('.mynah-sheet-header'))
+        const cancelButton = await header.findElement(By.css('button:has(i.mynah-ui-icon-cancel)'))
+        await webviewView.getDriver().executeScript('arguments[0].click()', cancelButton)
+    } catch (e) {
+        console.error('Error closing the MCP overlay:', e)
+    }
+}
diff --git a/packages/amazonq/test/e2e_new/amazonq/tests/inline.test.ts b/packages/amazonq/test/e2e_new/amazonq/tests/inline.test.ts
@@ -5,7 +5,7 @@
 import '../utils/setup'
 import { Workbench, EditorView, InputBox, TextEditor, WebviewView, Key } from 'vscode-extension-tester'
 import { testContext } from '../utils/testContext'
-import { pressKey, createNewTextFile, writeToTextEditor } from '../utils/generalUtils'
+import { createNewTextFile, writeToTextEditor, sleep } from '../utils/generalUtils'
 import assert from 'assert'
 
 describe('Amazon Q Inline Completion / Chat Functionality', function () {
@@ -20,25 +20,31 @@ describe('Amazon Q Inline Completion / Chat Functionality', function () {
         webviewView = testContext.webviewView
         await webviewView.switchBack()
         workbench = testContext.workbench
-
         editorView = new EditorView()
         testContext.editorView = editorView
-
         textEditor = await createNewTextFile(workbench, editorView)
     })
-
-    it('Inline Test', async () => {
-        await writeToTextEditor(textEditor, 'Select Me')
+    after(async function () {
+        // Switch back to Webview Iframe when dealing with external webviews from Amazon Q.
+        await editorView.closeAllEditors()
+        await webviewView.switchToFrame()
+    })
+    it('Inline Test Shortcut', async () => {
+        await writeToTextEditor(textEditor, 'def factorial(n):')
         const text = await textEditor.getText()
-        assert.equal(text, 'Select Me')
+        assert.equal(text, 'def factorial(n): ')
         await textEditor.clearText()
 
+        const textBefore = await textEditor.getText()
         await workbench.executeCommand('Amazon Q: Inline Chat')
         const input = new InputBox()
-        await input.sendKeys('Write a simple sentece')
+        await input.sendKeys('Generate the fibonacci sequence through iteration')
         await input.sendKeys(Key.ENTER)
-        const driver = textEditor.getDriver()
-        await pressKey(driver, 'ENTER')
-        await pressKey(driver, 'TAB')
+        // Must wait for response to be generated.
+        await sleep(8000)
+
+        const textAfter = await textEditor.getText()
+        assert(textAfter.length > textBefore.length, 'Amazon Q should have generated code')
+        await textEditor.clearText()
     })
 })
diff --git a/packages/amazonq/test/e2e_new/amazonq/tests/mcp.test.ts b/packages/amazonq/test/e2e_new/amazonq/tests/mcp.test.ts
@@ -0,0 +1,49 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../utils/setup'
+import { WebviewView } from 'vscode-extension-tester'
+import { testContext } from '../utils/testContext'
+import {
+    clickMCPAddButton,
+    clickMCPCloseButton,
+    clickMCPRefreshButton,
+    clickToolsButton,
+    configureMCPServer,
+    saveMCPServerConfiguration,
+} from '../helpers/mcpHelper'
+import { closeAllTabs } from '../utils/cleanupUtils'
+
+describe('Amazon Q MCP Functionality', function () {
+    // this timeout is the general timeout for the entire test suite
+    this.timeout(150000)
+    let webviewView: WebviewView
+
+    before(async function () {
+        webviewView = testContext.webviewView
+    })
+
+    after(async function () {
+        await closeAllTabs(webviewView)
+    })
+
+    it('Test Amazon Q MCP Servers and Built-in Tools Access', async () => {
+        await clickToolsButton(webviewView)
+        await clickMCPCloseButton(webviewView)
+    })
+
+    it('Add new MCP Server', async () => {
+        await clickToolsButton(webviewView)
+        await clickMCPAddButton(webviewView)
+        await configureMCPServer(webviewView)
+        await saveMCPServerConfiguration(webviewView)
+        await clickMCPCloseButton(webviewView)
+    })
+
+    it('Refresh MCP Server', async () => {
+        await clickToolsButton(webviewView)
+        await clickMCPRefreshButton(webviewView)
+        await clickMCPCloseButton(webviewView)
+    })
+})
diff --git a/packages/amazonq/test/e2e_new/amazonq/utils/generalUtils.ts b/packages/amazonq/test/e2e_new/amazonq/utils/generalUtils.ts
