fix: improve selection of webview (#1727)

Signed-off-by: Michael Pollind <[email protected]>
Co-authored-by: Michael Pollind <[email protected]>

Author: pollend

packages/page-objects/src/components/WebviewMixin.ts

@@ -28,7 +28,7 @@ type Constructor<T = object> = new (...args: any[]) => T;
  * The interface that a class is required to have in order to use the Webview mixin.
  */
 interface WebviewMixable extends AbstractElement {
-	getViewToSwitchTo(handle: string): Promise<WebElement | undefined>;
+	getViewToSwitchTo(): Promise<WebElement | undefined>;
 }
 
 /**
@@ -89,7 +89,7 @@ export default function <TBase extends Constructor<WebviewMixable>>(Base: TBase)
 				this.handle = await this.getDriver().getWindowHandle();
 			}
 
-			const view = await this.getViewToSwitchTo(this.handle);
+			const view = await this.getViewToSwitchTo();
 
 			if (!view) {
 				return;

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

@@ -16,21 +16,22 @@
  */
 
 /* eslint-disable no-redeclare */
-import { WebElement } from 'selenium-webdriver';
+import { Locator, WebElement } from 'selenium-webdriver';
 import { AbstractElement } from '../AbstractElement';
 import WebviewMixin from '../WebviewMixin';
+import { findBestContainingElement } from '../../locators/locators';
 
 /**
  * Page object representing a user-contributed panel implemented using a Webview.
  */
 class WebviewViewBase extends AbstractElement {
-	constructor() {
-		super(WebviewViewBase.locators.Workbench.constructor);
+	constructor(base: Locator | WebElement = WebviewViewBase.locators.Workbench.constructor, enclosingItem?: WebElement | Locator) {
+		super(base, enclosingItem);
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	async getViewToSwitchTo(handle: string): Promise<WebElement | undefined> {
-		return await this.getDriver().findElement(WebviewViewBase.locators.WebviewView.iframe);
+	async getViewToSwitchTo(): Promise<WebElement | undefined> {
+		const frames = await this.getDriver().findElements(WebviewViewBase.locators.WebView.iframe);
+		return findBestContainingElement(await this.getRect(), frames);
 	}
 }
 

packages/page-objects/src/components/editor/WebView.ts

@@ -19,23 +19,15 @@
 import { WebElement } from 'selenium-webdriver';
 import WebviewMixin from '../WebviewMixin';
 import { Editor } from './Editor';
+import { findBestContainingElement } from '../../locators/locators';
 
 /**
  * Page object representing an open editor containing a web view
  */
 class WebViewBase extends Editor {
-	async getViewToSwitchTo(handle: string): Promise<WebElement | undefined> {
-		const handles = await this.getDriver().getAllWindowHandles();
-		for (const handle of handles) {
-			await this.getDriver().switchTo().window(handle);
-
-			if ((await this.getDriver().getTitle()).includes('Virtual Document')) {
-				await this.getDriver().switchTo().frame(0);
-				return;
-			}
-		}
-		await this.getDriver().switchTo().window(handle);
-		return await this.getDriver().findElement(WebViewBase.locators.WebView.iframe);
+	async getViewToSwitchTo(): Promise<WebElement | undefined> {
+		const frames = await this.getDriver().findElements(WebViewBase.locators.WebView.iframe);
+		return findBestContainingElement(await this.getRect(), frames);
 	}
 }
 

packages/page-objects/src/locators/locators.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { By, WebElement } from 'selenium-webdriver';
+import { By, IRectangle, WebElement } from 'selenium-webdriver';
 import { PartialDeep } from 'type-fest';
 import { ViewSection } from '../components/sidebar/ViewSection';
 
@@ -618,3 +618,26 @@ export function fromText(locator?: By): (el: WebElement) => Promise<string> {
 		return await el.getText();
 	};
 }
+
+export async function findBestContainingElement(container: IRectangle, testElements: WebElement[]): Promise<WebElement | undefined> {
+	const areas: number[] = await Promise.all(
+		testElements.map(async (value) => {
+			const rect = await value.getRect();
+			const ax = Math.max(container.x, rect.x);
+			const ay = Math.max(container.y, rect.y);
+			const bx = Math.min(container.x + container.width, rect.x + rect.width);
+			const by = Math.min(container.y + container.height, rect.y + rect.height);
+			return (bx - ax) * (by - ay);
+		}),
+	);
+	let bestIdx: number = -1;
+	for (let i = 0; i < testElements.length; i++) {
+		if (areas[i] < 0) {
+			continue;
+		}
+		if (bestIdx === -1 || areas[i] > areas[bestIdx]) {
+			bestIdx = i;
+		}
+	}
+	return bestIdx === -1 ? undefined : testElements[bestIdx];
+}

tests/test-project/package.json

@@ -74,7 +74,19 @@
       },
       {
         "command": "extension.webview",
-        "title": "Webview Test"
+        "title": "Webview Test Column 1"
+      },
+      {
+        "command": "extension.webview.2",
+        "title": "Webview Test Column 2"
+      },
+      {
+        "command": "extension.webview.3",
+        "title": "Webview Test Column 3"
+      },
+      {
+        "command": "extension.webview.4",
+        "title": "Webview Test Column 4"
       },
       {
         "command": "extension.notification",

tests/test-project/src/extension.ts

@@ -24,8 +24,18 @@ export function activate(context: vscode.ExtensionContext) {
 		await vscode.window.showQuickPick([{ label: 'TestLabel', description: 'Test Description' }]);
 	});
 	const webViewCommand = vscode.commands.registerCommand('extension.webview', async () => {
-		new TestView();
+		const col: vscode.ViewColumn = (vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined) || vscode.ViewColumn.One;
+		openTestView(col);
 	});
+
+	const columns: vscode.ViewColumn[] = [vscode.ViewColumn.Two, vscode.ViewColumn.Three, vscode.ViewColumn.Four];
+	for (const c of columns) {
+		const webViewCmd = vscode.commands.registerCommand(`extension.webview.${c}`, async () => {
+			openTestView(c);
+		});
+		context.subscriptions.push(webViewCmd);
+	}
+
 	const notificationCommand = vscode.commands.registerCommand('extension.notification', async () => {
 		await vscode.window.showInformationMessage('This is a notification', 'Yes', 'No');
 	});
@@ -111,58 +121,49 @@ export function deactivate() {}
 let emptyViewNoContent: boolean = true;
 const emitter = new vscode.EventEmitter<undefined>();
 
-class TestView {
-	public static readonly viewType = 'testView';
-
-	private readonly _panel: vscode.WebviewPanel;
-	private _disposables: vscode.Disposable[] = [];
-	private randomWebViewTitle: string;
-
-	constructor() {
-		const column = vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined;
-
-		this.randomWebViewTitle = 'Test WebView ' + Math.floor(Math.random() * 100);
-		this._panel = vscode.window.createWebviewPanel(TestView.viewType, this.randomWebViewTitle, column || vscode.ViewColumn.One);
-		this.update(this.randomWebViewTitle);
-
-		this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
-
-		this._panel.onDidChangeViewState(
-			() => {
-				if (this._panel.visible) {
-					this.update(this.randomWebViewTitle);
+function openTestView(viewColumn: vscode.ViewColumn) {
+	const randomWebViewTitle = 'Test WebView ' + Math.floor(Math.random() * 100);
+	const panel = vscode.window.createWebviewPanel('testView', randomWebViewTitle, viewColumn);
+	const disposables: vscode.Disposable[] = [];
+
+	const update = (title: string) => {
+		panel.title = title;
+		panel.webview.html = `<!DOCTYPE html>
+			<html lang="en">
+			<head>
+				<meta charset="UTF-8">
+				<meta name="viewport" content="width=device-width, initial-scale=1.0">
+				<title>${title}</title>
+			</head>
+			<body>
+				<h1>This is a web view with title: ${title}</h1>
+			</body>
+			</html>`;
+	};
+	update(randomWebViewTitle);
+
+	panel.onDidDispose(
+		() => {
+			while (disposables.length) {
+				const x = disposables.pop();
+				if (x) {
+					x.dispose();
 				}
-			},
-			null,
-			this._disposables,
-		);
-	}
-
-	public dispose() {
-		this._panel.dispose();
-
-		while (this._disposables.length) {
-			const x = this._disposables.pop();
-			if (x) {
-				x.dispose();
 			}
-		}
-	}
+		},
+		null,
+		disposables,
+	);
 
-	private update(title: string) {
-		this._panel.title = title;
-		this._panel.webview.html = `<!DOCTYPE html>
-		<html lang="en">
-		<head>
-			<meta charset="UTF-8">
-			<meta name="viewport" content="width=device-width, initial-scale=1.0">
-			<title>${title}</title>
-		</head>
-		<body>
-			<h1>This is a web view with title: ${title}</h1>
-		</body>
-		</html>`;
-	}
+	panel.onDidChangeViewState(
+		() => {
+			if (panel.visible) {
+				update(randomWebViewTitle);
+			}
+		},
+		null,
+		disposables,
+	);
 }
 
 class MyPanelView implements vscode.WebviewViewProvider {

tests/test-project/src/test/editor/editorView.test.ts

@@ -43,7 +43,7 @@ describe('EditorView', function () {
 		await view.closeAllEditors();
 		await newUntitledFile('Untitled-1');
 		await newUntitledFile('Untitled-2');
-		await new Workbench().executeCommand('Webview Test');
+		await new Workbench().executeCommand('Webview Test Column 1');
 		await view.getDriver().sleep(2500);
 		await new Workbench().executeCommand('Open Settings UI');
 		await view.getDriver().sleep(500);