Add page object for WebviewView

Fixes #804

Signed-off-by: David Thompson <davthomp@redhat.com>

Author: datho7561

page-objects/src/components/bottomBar/WebviewView.ts

@@ -0,0 +1,69 @@
+import { Locator, WebElement, until } from "selenium-webdriver";
+import { AbstractElement } from "../AbstractElement";
+
+/**
+ * Page object representing a user-contributed panel implemented using a Webview.
+ */
+export class WebviewView extends AbstractElement {
+
+    constructor() {
+        super(WebviewView.locators.Workbench.constructor);
+    }
+
+    private static handle: string | undefined;
+
+    /**
+     * Search for an element inside the webview iframe.
+     * Requires webdriver being switched to the webview iframe first.
+     * (Will attempt to search from the main DOM root otherwise)
+     *
+     * @param locator webdriver locator to search by
+     * @returns promise resolving to WebElement when found
+     */
+    async findWebElement(locator: Locator): Promise<WebElement> {
+        return this.getDriver().findElement(locator);
+    }
+
+    /**
+     * Search for all element inside the webview iframe by a given locator
+     * Requires webdriver being switched to the webview iframe first.
+     * (Will attempt to search from the main DOM root otherwise)
+     *
+     * @param locator webdriver locator to search by
+     * @returns promise resolving to a list of WebElement objects
+     */
+    async findWebElements(locator: Locator): Promise<WebElement[]> {
+        return this.getDriver().findElements(locator);
+    }
+
+    /**
+     * Switch the underlying webdriver context to the webview iframe.
+     * This allows using the findWebElement methods.
+     * Note that only elements inside the webview iframe will be accessible.
+     * Use the switchBack method to switch to the original context.
+     */
+    async switchToFrame(): Promise<void> {
+        if (!WebviewView.handle) {
+            WebviewView.handle = await this.getDriver().getWindowHandle();
+        }
+
+        const view = await this.getDriver().wait(until.elementLocated(WebviewView.locators.WebView.iframe)) as WebElement;
+
+        await this.getDriver().switchTo().frame(view);
+
+        await this.getDriver().wait(until.elementLocated(WebviewView.locators.WebView.activeFrame), 5000);
+        const frame = await this.getDriver().findElement(WebviewView.locators.WebView.activeFrame);
+        await this.getDriver().switchTo().frame(frame);
+    }
+
+    /**
+     * Switch the underlying webdriver back to the original window
+     */
+    async switchBack(): Promise<void> {
+        if (!WebviewView.handle) {
+            WebviewView.handle = await this.getDriver().getWindowHandle();
+        }
+        return this.getDriver().switchTo().window(WebviewView.handle);
+    }
+
+}

page-objects/src/index.ts

@@ -36,6 +36,7 @@ export * from './components/sidebar/debug/DebugView';
 
 export * from './components/bottomBar/BottomBarPanel';
 export * from './components/bottomBar/ProblemsView';
+export * from './components/bottomBar/WebviewView';
 export * from './components/bottomBar/Views';
 export * from './components/statusBar/StatusBar';
 
@@ -64,7 +65,7 @@ export * from './conditions/WaitForAttribute';
 
 /**
  * Initialize the page objects for your tests
- * 
+ *
  * @param currentVersion version of the locators to load
  * @param baseVersion base version of the locators if you have multiple versions with diffs, otherwise leave the same as currentVersion
  * @param locatorFolder folder that contains locator files

test/test-project/package.json

@@ -81,8 +81,21 @@
 			{
 				"command": "extension.disableCodeLens",
 				"title": "Disable Codelens"
+			},
+			{
+				"command": "extension.myPanelView.focus",
+				"title": "Focus My Panel View"
 			}
 		],
+		"viewsContainers": {
+			"panel": [
+				{
+					"icon": "./media/paw-outline.svg",
+					"id": "myPanel",
+					"title": "My Panel"
+				}
+			]
+		},
 		"views": {
 			"explorer": [
 				{
@@ -93,6 +106,13 @@
 					"id": "emptyView",
 					"name": "Empty View"
 				}
+			],
+			"myPanel": [
+				{
+					"id": "myPanelView",
+					"name": "My Panel View",
+					"type": "webview"
+				}
 			]
 		},
 		"viewsWelcome": [
@@ -122,6 +142,11 @@
 					"group": "navigation",
 					"when": "resourceFilename =~ /Untitled.*$/"
 				}
+			],
+			"commandPalette": [
+				{
+					"command": "extension.myPanelView.focus"
+				}
 			]
 		}
 	},

test/test-project/src/extension.ts

@@ -1,8 +1,8 @@
-import * as vscode from 'vscode';
 import * as path from 'path';
-import { TreeView } from './treeView';
+import * as vscode from 'vscode';
 import { CatScratchEditorProvider } from './catScratchEditor';
 import { CodelensProvider } from './codelensProvider';
+import { TreeView } from './treeView';
 
 export const ERROR_MESSAGE_COMMAND = 'extension.errorMsg';
 
@@ -60,7 +60,7 @@ export function activate(context: vscode.ExtensionContext) {
 		"extension.populateTestView",
 		() => { emptyViewNoContent = false; emitter.fire(undefined); }
 	));
-	
+
 	const codelensProvider = new CodelensProvider();
 	context.subscriptions.push(vscode.languages.registerCodeLensProvider("*", codelensProvider));
 	context.subscriptions.push(
@@ -75,6 +75,14 @@ export function activate(context: vscode.ExtensionContext) {
 		vscode.commands.registerCommand("extension.codelensAction", (args: any) => {
 			vscode.window.showInformationMessage(`CodeLens action clicked with args=${args}`);
 		}));
+	context.subscriptions.push(
+		vscode.window.registerWebviewViewProvider("myPanelView", new MyPanelView())
+	);
+	context.subscriptions.push(
+		vscode.commands.registerCommand("extension.myPanelView.focus", async () => {
+			await vscode.commands.executeCommand("myPanelView.focus");
+		})
+	);
 }
 
 export function deactivate() {}
@@ -135,4 +143,10 @@ class TestView {
 		</body>
 		</html>`;
 	}
+}
+
+class MyPanelView implements vscode.WebviewViewProvider {
+	resolveWebviewView(webviewView: vscode.WebviewView, context: vscode.WebviewViewResolveContext<unknown>, token: vscode.CancellationToken): void | Thenable<void> {
+		webviewView.webview.html = "<!DOCTYPE html><html><head><title>My Panel View</title></head><body><div><h1>Shopping List</h1><ul><li>Apple</li><li>Banana</li></ul></div></body></html>";
+	}
 }

test/test-project/src/test/bottomBar/webviewView-test.ts

@@ -0,0 +1,36 @@
+import { expect } from 'chai';
+import { BottomBarPanel, By, InputBox, WebviewView, Workbench } from 'vscode-extension-tester';
+
+describe('WebviewView', function () {
+
+    let webviewView: WebviewView;
+
+    before(async function () {
+        const prompt = await new Workbench().openCommandPrompt() as InputBox;
+        await prompt.setText('>Focus My Panel View');
+        await prompt.confirm();
+    });
+
+    after(async function () {
+        if (webviewView) {
+            await webviewView.switchBack();
+            webviewView = undefined;
+        }
+        await new BottomBarPanel().toggle(false);
+    });
+
+    it('contains apple and banana', async () => {
+        webviewView = new WebviewView();
+        await webviewView.switchToFrame();
+        const elts = await webviewView.findWebElements(By.xpath('//div/ul/li'));
+        console.log(JSON.stringify(elts));
+        const listContent: string[] = [];
+        await Promise.all(elts.map(async elt => {
+            listContent.push(await elt.getText());
+        }));
+        expect(listContent).to.have.length(2);
+        expect(listContent).to.contain('Apple');
+        expect(listContent).to.contain('Banana');
+    });
+
+});