implementing the initial setup for the framework

Author: laura-codess

packages/amazonq/test/e2e/amazonq/VET.test.ts

@@ -0,0 +1,37 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { By, WebviewView } from 'vscode-extension-tester'
+import { loginToAmazonQ } from './framework/loginHelper'
+import { closeAllTabs } from './framework/cleanupHelper'
+import { waitForElement } from './framework/generalHelper'
+import { waitForChatResponse } from './framework/chatHelper'
+
+describe('Amazon Q Chat Basic Functionality', function () {
+    // this timeout is the general timeout for the entire test suite
+    this.timeout(150000)
+    let webviewView: WebviewView
+
+    before(async function () {
+        const result = await loginToAmazonQ()
+        webviewView = result.webviewView
+    })
+
+    afterEach(async () => {
+        await closeAllTabs(webviewView)
+    })
+
+    it('Chat Prompt Test', async () => {
+        const chatInput = await waitForElement(webviewView, By.css('.mynah-chat-prompt-input'))
+        await chatInput.sendKeys('Hello, Amazon Q!')
+        const sendButton = await waitForElement(webviewView, By.css('.mynah-chat-prompt-button'))
+        await sendButton.click()
+        const responseReceived = await waitForChatResponse(webviewView)
+        if (!responseReceived) {
+            throw new Error('Chat response not received within timeout')
+        }
+
+        console.log('Chat response detected successfully')
+    })
+})

packages/amazonq/test/e2e_new/amazonq/chat.test.ts

@@ -0,0 +1,34 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { By, WebviewView } from 'vscode-extension-tester'
+
+/* Waits for a chat response and outputs whether the response is "correct"
+
+Logic: 
+The overall conversation container's css is .mynah-chat-items-conversation-container. 
+Within that container we can check how many elements exist. If there is 2 elements,
+we can assume that the chat response has been generated. However, we must grab the 
+latest conversation container, as there can be multiple conversations in the webview. */
+
+export async function waitForChatResponse(webview: WebviewView, timeout = 15000): Promise<boolean> {
+    const startTime = Date.now()
+
+    while (Date.now() - startTime < timeout) {
+        const conversationContainers = await webview.findWebElements(By.css('.mynah-chat-items-conversation-container'))
+
+        if (conversationContainers.length > 0) {
+            const latestContainer = conversationContainers[conversationContainers.length - 1]
+
+            const chatItems = await latestContainer.findElements(By.css('*'))
+
+            if (chatItems.length >= 2) {
+                return true
+            }
+        }
+        await new Promise((resolve) => setTimeout(resolve, 500))
+    }
+
+    return false
+}

packages/amazonq/test/e2e_new/amazonq/framework/chatHelper.ts

@@ -0,0 +1,34 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { By, WebviewView } from 'vscode-extension-tester'
+
+/* Finds all the tabs by looking for the close buttons and then closes them one by one.
+
+Logic:
+There is a button with the css mynah-tabs-close-button, we need to click that button and 
+close all the tabs after the test is done to avoid memory from a previous test. To double
+check if all the tabs are closed, we can check if the mynah-tabs-container is empty. */
+
+export async function closeAllTabs(webview: WebviewView) {
+    try {
+        const closeButtons = await webview.findWebElements(By.css('.mynah-tabs-close-button'))
+
+        for (const button of closeButtons) {
+            await button.click()
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        }
+
+        // double check that all tabs are closed by checking if the mynah-tabs-container is empty
+        const tabsContainer = await webview.findWebElements(By.css('.mynah-tabs-container'))
+        if (
+            tabsContainer.length === 0 ||
+            (await tabsContainer[0].findElements(By.css('.mynah-tab-item-label'))).length === 0
+        ) {
+            console.log('All chat tabs successfully closed')
+        }
+    } catch (error) {
+        console.log('Error closing tabs:', error)
+    }
+}

packages/amazonq/test/e2e_new/amazonq/framework/cleanupHelper.ts

@@ -0,0 +1,59 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { By, WebviewView, WebElement } from 'vscode-extension-tester'
+import { until } from 'selenium-webdriver'
+
+/* Waits for an element (or multiple elements) to appear based on the parameters
+
+Logic:
+The function utilizes the Selenium wait driver. We can call that driver from our
+WebviewView but it can also be called on parts of the VSCode Editor that are not
+part of the WebviewView.
+
+(TO-DO: create a more general function that can be called on any part of the VSCode
+Editor. Will do when a use case appears for it.*/
+
+export async function waitForElement(
+    webview: WebviewView,
+    locator: By,
+    multiple: true,
+    timeout?: number
+): Promise<WebElement[]>
+export async function waitForElement(
+    webview: WebviewView,
+    locator: By,
+    multiple?: false,
+    timeout?: number
+): Promise<WebElement>
+export async function waitForElement(
+    webview: WebviewView,
+    locator: By,
+    multiple = false,
+    timeout = 15000
+): Promise<WebElement | WebElement[]> {
+    const driver = webview.getDriver()
+    await driver.wait(until.elementsLocated(locator), timeout)
+    return multiple ? await webview.findWebElements(locator) : await webview.findWebElement(locator)
+}
+
+/* General function for finding WebElement by their text content
+
+Logic:
+It searches through an array of WebElements and looks for an element with 
+the ".tittle" CSS class within each item. Compares the text content and returns
+the first matching parent element, or throws an error if not found. */
+
+export async function findItemByText(items: WebElement[], text: string) {
+    for (const item of items) {
+        const titleDivs = await item.findElements(By.css('.title'))
+        for (const titleDiv of titleDivs) {
+            const titleText = await titleDiv.getText()
+            if (titleText?.trim().startsWith(text)) {
+                return item
+            }
+        }
+    }
+    throw new Error(`Item with text "${text}" not found`)
+}

packages/amazonq/test/e2e_new/amazonq/framework/generalHelper.ts

@@ -0,0 +1,52 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Workbench, By, WebviewView } from 'vscode-extension-tester'
+import { waitForElement, findItemByText } from './generalHelper'
+
+/* Completes the entire Amazon Q login flow
+
+Currently, the function will
+1. Open AmazonQ
+2. Clicks Company Account
+3. Inputs the Start URL
+4. IMPORTANT: you must click manually open yourself when the popup window asks to open the browser and complete the authentication in the browser** 
+
+TO-DO: Currently this loginToAmazonQ is not fully autonomous as we ran into a blocker when the browser window pops up
+Documentation: https://quip-amazon.com/PoJOAyt4ja8H/Authentication-for-UI-Tests-Documentation */
+
+export async function loginToAmazonQ(): Promise<{ workbench: Workbench; webviewView: WebviewView }> {
+    const workbench = new Workbench()
+    await workbench.executeCommand('Amazon Q: Open Chat')
+
+    await new Promise((resolve) => setTimeout(resolve, 5000))
+    let webviewView = new WebviewView()
+    await webviewView.switchToFrame()
+
+    const selectableItems = await waitForElement(webviewView, By.css('.selectable-item'), true)
+    if (selectableItems.length === 0) {
+        throw new Error('No selectable login options found')
+    }
+
+    const companyItem = await findItemByText(selectableItems, 'Company account')
+    await companyItem.click()
+    const signInContinue = await webviewView.findWebElement(By.css('#connection-selection-continue-button'))
+    await signInContinue.click()
+    const startUrlInput = await webviewView.findWebElement(By.id('startUrl'))
+    await startUrlInput.clear()
+    await startUrlInput.sendKeys('https://amzn.awsapps.com/start')
+    const UrlContinue = await webviewView.findWebElement(By.css('button.continue-button.topMargin'))
+    await UrlContinue.click()
+    console.log('Waiting for manual authentication...')
+    await new Promise((resolve) => setTimeout(resolve, 12000))
+    console.log('Manual authentication should be done')
+    await webviewView.switchBack()
+
+    const editorView = workbench.getEditorView()
+    await editorView.closeAllEditors()
+    webviewView = new WebviewView()
+    await webviewView.switchToFrame()
+
+    return { workbench, webviewView }
+}