Giters

AngleSharp / AngleSharp.Js

:angel: Extends AngleSharp with a .NET-based JavaScript engine.

Home Page:https://anglesharp.github.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

JavaScript function changing dataset properties of element node is executed from C# but dataset changes are not reflected in AngleSharp DOM

martin-honnen opened this issue · comments

commented

Bug Report

Prerequisites

  • Can you reproduce the problem in a MWE?
  • Are you running the latest version of AngleSharp? Using AngleSharp 0.15, AngleSharp.Js 0.14
  • Did you check the FAQs to see if that helps you?
  • Are you reporting to the correct repository? (there are multiple AngleSharp libraries, e.g., AngleSharp.Css for CSS support)
  • Did you perform a search in the issues?

For more information, see the CONTRIBUTING guide.

Description

A JavaScript function that changes two dataset properties on an element node is successfully called from C# but somehow the dataset property changes are not reflected in the AngleSharp DOM.

Steps to Reproduce

  1. [First Step]
    Run code
using System;
using System.Threading.Tasks;
using AngleSharp;
using AngleSharp.Html.Dom;
using AngleSharp.Scripting;

namespace DatasetMWE
{
    class Program
    {
        static async Task Main(string[] args)
        {
            var html = @"<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <script>
    function test() {
      var element = document.querySelector('section');
      element.dataset.level = '2';
      element.dataset.title = 'section 2';
      return 'test executed';
    }
    </script>
  </head>
  <body>
    <h1>Test</h1>
    <section data-level=1 data-title='section 1'>
      <h2>Section test</h2>
    </section>
  </body>
</html>";

            var jsService = new JsScriptingService();

            var config = Configuration.Default.With(jsService);

            var context = BrowsingContext.New(config);

            var document = await context.OpenAsync(req => req.Content(html));

            var testFunction = jsService.GetOrCreateJint(document).GetValue("test");

            var result = testFunction.Invoke();

            Console.WriteLine(document.DocumentElement.OuterHtml);

            var sectionEl = document.QuerySelector("section") as IHtmlElement;

            Console.WriteLine(sectionEl.Dataset["level"]);

            Console.WriteLine(result);


        }
    }
}

Expected behavior: The dataset changes the JavaScript function performs should be reflected in the AngleSharp DOM so both the OuterHtml as well as the result output should show the changes, i.e. the output should be

<html><head>
    <title>Test</title>
    <script>
    function test() {
      var element = document.querySelector('section');
      element.dataset.level = '2';
      element.dataset.title = 'section 2';
      return 'test executed';
    }
    </script>
  </head>
  <body>
    <h1>Test</h1>
    <section data-level="2" data-title="section 2">
      <h2>Section test</h2>
    </section>

</body></html>
2
test executed

Actual behavior: I get the output

<html><head>
    <title>Test</title>
    <script>
    function test() {
      var element = document.querySelector('section');
      element.dataset.level = '2';
      element.dataset.title = 'section 2';
      return 'test executed';
    }
    </script>
  </head>
  <body>
    <h1>Test</h1>
    <section data-level="1" data-title="section 1">
      <h2>Section test</h2>
    </section>

</body></html>
1
test executed

Environment details: [OS, .NET Runtime, ...] Windows 10 20H2, .NET 5 (Core) Visual Studio 2019 console project

Possible Solution