Porting from WebBrowser (Internet Explorer)

[amaitland]

For those sponsoring the project I'm happy to provide guidance in porting from the IE WebBrowser.

IMPORTANT
In the interest of getting some real world code examples the first three people to provide code examples I'll provide guidance without change.

If you are a sponsor and require assistance please post your existing code here. For those not currently sponsoring I can provide code examples starting from $50USD via a One Time GitHub sponsorship. Please post your code first and then ask how much to provide a detailed example.

Some general notes and comments are below:

Threading

The API is designed to be Async and should be used with async all the way. Current limitation of WebView2 is that DevTools protocol method calls can only happen on the UI Thread (Issue #2) so writing sync code will deadlock very very easily and should be avoided at all costs.

Usage Examples

More detailed usage examples are available at https://github.com/ChromiumDotNet/WebView2.DevTools.Dom#usage

GetElementById

// Get element by Id
// https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
// https://www.javascripttutorial.net/javascript-dom/javascript-queryselector/
HtmlElement element = await devtoolsContext.QuerySelectorAsync("#myElementId");

//Strongly typed element types
//Only a subset of element types have been added so far, use HtmlElement as a generic type for all others
var htmlDivElement = await devToolsContext.QuerySelectorAsync<HtmlDivElement>("#myDivElementId");
var htmlSpanElement = await devToolsContext.QuerySelectorAsync<HtmlSpanElement>("#mySpanElementId");
var htmlSelectElement = await devToolsContext.QuerySelectorAsync<HtmlSelectElement>("#mySelectElementId");
var htmlInputElement = await devToolsContext.QuerySelectorAsync<HtmlInputElement>("#myInputElementId");
var htmlFormElement = await devToolsContext.QuerySelectorAsync<HtmlFormElement>("#myFormElementId");
var htmlAnchorElement = await devToolsContext.QuerySelectorAsync<HtmlAnchorElement>("#myAnchorElementId");
var htmlImageElement = await devToolsContext.QuerySelectorAsync<HtmlImageElement>("#myImageElementId");
var htmlTextAreaElement = await devToolsContext.QuerySelectorAsync<HtmlImageElement>("#myTextAreaElementId");
var htmlButtonElement = await devToolsContext.QuerySelectorAsync<HtmlButtonElement>("#myButtonElementId");
var htmlParagraphElement = await devToolsContext.QuerySelectorAsync<HtmlParagraphElement>("#myParagraphElementId");

GetElementsByTagName

// Get elements by tag name
// https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
var divElements = await devtoolsContext.QuerySelectorAllAsync("div");
var spanElements = await devtoolsContext.QuerySelectorAllAsync("span");

Element Click

Use the HtmlElement.ClickAsync() method to click a button. This method uses mouse emulation, moves the mouse over the element and sends down/up events.

// Get element by Id
// https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
// https://www.javascripttutorial.net/javascript-dom/javascript-queryselector/
var element = await devtoolsContext.QuerySelectorAsync("#myElementId");

// Get elements by tag name
// https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
var elements = await devtoolsContext.QuerySelectorAllAsync("#div");

//Click The element
await element.ClickAsync();

Use the HtmlElement.InvokeMember() method to click a button. This method calls the HTMLElement.click method.

// Get element by Id
// https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
var element = await devtoolsContext.QuerySelectorAsync("#myElementId");

//Click The element
await element.InvokeMemberAsync("click");

InnerHtml/InnerText

HtmlElement.SetPropertyValueAsync/HtmlElement.GetPropertyValueAsync can be used to get properties of a HtmlElement

await using var devtoolsContext = await coreWebView2.CreateDevToolsContextAsync();

// Get element by Id
// https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
var element = await devtoolsContext.QuerySelectorAsync("#myElementId");

//Set innerText property for the element
await element.SetInnerTextAsync("Welcome!");

//Get innerText property for the element
var innerText = await element.GetInnerTextAsync();

Html Element classes

There are a number of common HtmlElement implementations that have strongly typed class implementations. A number of common methods have been mapped and will appear as Get/Set[MethodName]Async methods.

//Strongly typed element types
//Only a subset of element types have been added so far, use HtmlElement as a generic type for all others
var htmlDivElement = await devToolsContext.QuerySelectorAsync<HtmlDivElement>("#myDivElementId");
var htmlSpanElement = await devToolsContext.QuerySelectorAsync<HtmlSpanElement>("#mySpanElementId");
var htmlSelectElement = await devToolsContext.QuerySelectorAsync<HtmlSelectElement>("#mySelectElementId");
var htmlInputElement = await devToolsContext.QuerySelectorAsync<HtmlInputElement>("#myInputElementId");
var htmlFormElement = await devToolsContext.QuerySelectorAsync<HtmlFormElement>("#myFormElementId");
var htmlAnchorElement = await devToolsContext.QuerySelectorAsync<HtmlAnchorElement>("#myAnchorElementId");
var htmlImageElement = await devToolsContext.QuerySelectorAsync<HtmlImageElement>("#myImageElementId");
var htmlTextAreaElement = await devToolsContext.QuerySelectorAsync<HtmlImageElement>("#myTextAreaElementId");
var htmlButtonElement = await devToolsContext.QuerySelectorAsync<HtmlButtonElement>("#myButtonElementId");
var htmlParagraphElement = await devToolsContext.QuerySelectorAsync<HtmlParagraphElement>("#myParagraphElementId");
var htmlTableElement = await devToolsContext.QuerySelectorAsync<HtmlTableElement>("#myTableElementId");

For any other property that isn't mapped they can be accessed via HtmlElement.SetPropertyValueAsync/HtmlElement.GetPropertyValueAsync methods.

Html Table Elements

Table support was added in version 2.0.2

//Get all table elements
var tableElements = await devtoolsContext.QuerySelectorAllAsync<HtmlTableElement>("table");

var table = tableElements[0];

var body = await table.GetBodyAsync();
var rows = await body.GetRowsAsync().ToArrayAsync();

foreach (var row in rows)
{
	var cells = await row.GetCellsAsync().ToArrayAsync();

	foreach (var cell in cells)
	{
		await table.SetInnerHtmlAsync("Updated Div innerText");
	}
}