WebView2.DevTools.Dom 1.0.5

There is a newer version of this package available.
See the version list below for details.
dotnet add package WebView2.DevTools.Dom --version 1.0.5                
NuGet\Install-Package WebView2.DevTools.Dom -Version 1.0.5                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="WebView2.DevTools.Dom" Version="1.0.5" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add WebView2.DevTools.Dom --version 1.0.5                
#r "nuget: WebView2.DevTools.Dom, 1.0.5"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install WebView2.DevTools.Dom as a Cake Addin
#addin nuget:?package=WebView2.DevTools.Dom&version=1.0.5

// Install WebView2.DevTools.Dom as a Cake Tool
#tool nuget:?package=WebView2.DevTools.Dom&version=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:

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");
        }
    }
};

<sup><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></sup>

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();

<sup><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></sup>

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);

<sup><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></sup>

NOT YET SUPPORTED

  • Drag Interception/Events
  • Print to PDF
Product Compatible and additional computed target framework versions.
.NET net5.0 was computed.  net5.0-windows was computed.  net6.0 was computed.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
.NET Core netcoreapp3.1 is compatible. 
.NET Framework net462 is compatible.  net463 was computed.  net47 was computed.  net471 was computed.  net472 was computed.  net48 was computed.  net481 was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
4.0.1 1,474 3/16/2024
3.0.1 4,936 10/30/2022
3.0.0 1,278 7/25/2022
3.0.0-beta01 408 5/20/2022
2.0.2 1,134 4/11/2022
2.0.1 657 3/28/2022
2.0.0 642 3/25/2022
1.0.6 649 3/21/2022
1.0.5 627 3/21/2022

First public release