WebView2.DevTools.Dom 1.0.5

WebView2 DevTools Context

WebView2 DevTools Dom is a port of puppeteer-sharp by Darío Kondratiuk that has been adapted specifically for use with WebView2. Direct communication with the CoreWebView2 via the DevTools protocol. 1:1 mapping of WebView2DevToolsContext and CoreWebView2 The primary focus of this project is DOM access/manipulation and Javascript execution/evaluation. Only a subset of the Puppeteer Sharp features were ported. It maybe possible to port additional features if sufficent user demand.

Sponsorware

This project has adopted a variant of the Sponsorware open source model. To ensure the project maintainer/developer (@amaitland) can support the project the source will be released under an MIT license when the target of 45 sponsors via GitHub Sponsors is reached. Sponsors will get priority support. Everyone is free to download and use the Nuget package.

Prerequisites

• .Net 4.6.2 or .Net Core 3.1 or greater
• Microsoft.Web.WebView2.DevToolsProtocolExtension 1.0.824 or greater

Questions and Support

Sponsors can:

• Ask a question on Discussions.
• File bug reports on Issues.

Usage

DOM Access

Read/write to the DOM

<a id='snippet-queryselector'></a>

coreWebView2.NavigationCompleted += async (sender, args) =>
{
    if(args.IsSuccess)
    {
        // WebView2DevToolsContext implements IAsyncDisposable and can be Disposed
        // via await using or await devToolsContext.DisposeAsync();
        // https://docs.microsoft.com/en-us/dotnet/standard/garbage-collection/implementing-disposeasync#using-async-disposable
        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");

        // Get a custom attribute value
        var customAttribute = await element.GetAttributeValueAsync<string>("data-customAttribute");

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

        //Get innerText property for the element
        var innerText = await element.GetPropertyValueAsync<string>("innerText");

        //Get all child elements
        var childElements = await element.QuerySelectorAllAsync("div");

        //Change CSS style background colour
        _ = await element.EvaluateFunctionAsync("e => e.style.backgroundColor = 'yellow'");

        //Type text in an input field
        await element.TypeAsync("Welcome to my Website!");

        //Scroll Element into View (if needed)
        //Can optional specify a Rect to be scrolled into view, relative to the node's border box,
        //in CSS pixels. When omitted, center of the node will be used
        await element.ScrollIntoViewIfNeededAsync();

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

        var divElements = await devtoolsContext.QuerySelectorAllAsync("div");

        foreach (var div in divElements)
        {
            // Get a reference to the CSSStyleDeclaration
            var style = await div.GetStyleAsync();

            //Set the border to 1px solid red
            await style.SetPropertyAsync("border", "1px solid red", important: true);

            await div.SetAttributeValueAsync("data-customAttribute", "123");
            await div.SetPropertyValueAsync("innerText", "Updated Div innerText");
        }
    }
};

^{<a href='/WebView2.DevTools.Dom.Tests/QuerySelectorTests/DevToolsContextQuerySelectorTests.cs#L20-L77' title='Snippet source file'>snippet source</a> | <a href='#snippet-queryselector' title='Start of snippet'>anchor</a>}

Inject HTML

<a id='snippet-setcontentasync'></a>

// WebView2DevToolsContext implements IAsyncDisposable and can be Disposed
// via await using or await devToolsContext.DisposeAsync();
// https://docs.microsoft.com/en-us/dotnet/standard/garbage-collection/implementing-disposeasync#using-async-disposable
await using var devtoolsContext = await coreWebView2.CreateDevToolsContextAsync();
await devtoolsContext.SetContentAsync("<div>My Receipt</div>");
var result = await devtoolsContext.GetContentAsync();

^{<a href='/WebView2.DevTools.Dom.Tests/DevToolsContextTests/SetContentTests.cs#L22-L30' title='Snippet source file'>snippet source</a> | <a href='#snippet-setcontentasync' title='Start of snippet'>anchor</a>}

Evaluate Javascript

<a id='snippet-evaluate'></a>

await webView2Browser.EnsureCoreWebView2Async();

// WebView2DevToolsContext implements IAsyncDisposable and can be Disposed
// via await using or await devToolsContext.DisposeAsync();
// https://docs.microsoft.com/en-us/dotnet/standard/garbage-collection/implementing-disposeasync#using-async-disposable
await using var devToolsContext = await webView2Browser.CoreWebView2.CreateDevToolsContextAsync();
await devToolsContext.IgnoreCertificateErrorsAsync(true);
var seven = await devToolsContext.EvaluateExpressionAsync<int>("4 + 3");
var someObject = await devToolsContext.EvaluateFunctionAsync<dynamic>("(value) => ({a: value})", 5);
System.Console.WriteLine(someObject.a);

^{<a href='/WebView2.DevTools.Dom.Tests/QuerySelectorTests/ElementHandleQuerySelectorEvalTests.cs#L19-L31' title='Snippet source file'>snippet source</a> | <a href='#snippet-evaluate' title='Start of snippet'>anchor</a>}

NOT YET SUPPORTED

• Drag Interception/Events
• Print to PDF