VSCode webview extension testing

[dpetroff]

Hi. I had implemented a theia view with tests but this has now been ported to a VSCode extension where it's a webview. Is there a nice way to port the tests using the theia Playwright binding such as TheiaView from @theia/playwright? It's really quite difficult to navigate, if you could point me at any example projects where one tests that the webview has opened and presses a button in it, that would be perfect.

[msujew]

Hey @dpetroff,

generally, the Theia webviews are just iframe DOM elements, which should be accessible via playwright. However, I'm not too familiar with this either. cc @planger Perhaps you have more experience with this kind of work.

[planger]

Thanks for the ping!

[planger]

Hi @dpetroff,

I don't recall trying it out lately, but accessing WebViews should work by locating the frame with Playwright's framelocator or locator.contentFrame. You just need a way to identify the correct iframe reliably. So it is probably best to look into the DOM once the VS Code WebView is loaded and check if there is any useful attribute.

Hope this helps!

[dpetroff]

In the end I went for

const MyViewData: TheiaViewData = {
	tabSelector: "[id^=shell-tab-plugin-webview]",
	viewSelector: "[id^=plugin-webview]"
}

export class Webview extends TheiaView {
	contentFrame = super.page.locator(this.data.viewSelector).frameLocator(".webview").frameLocator("#active-frame")

	/**
	 * Webviews are nested in multiple iframes, which playwright won't traverse.
	 * You'll want {@link Webview.contentFrame} instead.
	 */
	get page(): never {
		throw Error("You will not find content from the webview in here")
	}
}

export class MyView extends Webview {
	constructor(app: TheiaApp) {
		super(MyViewData, app)
	}

	async open(): Promise<MyView> {
		await this.app.quickCommandPalette.type("My View")
		await this.app.quickCommandPalette.trigger("My Extension: My View")
		await this.waitForVisible()
		return this
	}

But that's kinda dodgy for at least three reasons:

1. Not sure if this iframe nesting arrangement is stable
2. My selectors rely on prefixes that will match any other webview (the rest of the view and tab ids are some UUID)
3. I have to override the open function because the VSCode extension points don't allow registering a webview that's intended to open in the main editor compartment in the Theia view menu.

Any suggestions?

[planger]

Hm, I see your point. I was already worried that Theia won't mark the webviews in a way that allows conveniently locating them, just knowing the VS Code extension. I don't have any immediate suggestion without digging into it myself, unfortunately.

I guess Theia could transfer more data attributes into the Webview, not just the UUID. There seems to be also a viewType which may contain something useful.

Alternatively, the webview content could carry some attribute that is more easily identifyable and Playwright traverses all of them, look into their frame content to identify the right one. This is not very efficient though.