Wrong missing Child Element in HTML Comparison Using Diffing Strategy Pipeline

[starsibi]

Discussed in #46

^{Originally posted by starsibi October 27, 2024}
Am I missing something here? I'm facing an issue where the expected output, <div class="child2">child2</div>, is missing in testHTML, but it's actually returning <div class="child3">child3</div>. Could you share your thoughts on this?

Thanks in advance!

var strategy = new DiffingStrategyPipeline();
strategy.AddDefaultOptions();

// Create the differ and pass in the strategy
var differ = new HtmlDiffer(strategy);

// Use the differ to compare markup
var controlHtml = "<div class="parent">\r\n <div class="child1">child1\r\n <div class="child2">child2\r\n <div class="child3">child3\r\n";
var testHtml = "<div class="parent">\r\n <div class="child1">child1\r\n <div class="child3">child3\r\n";
var diffs = differ.Compare(controlHtml, testHtml);
```</div>

[egil]

First thought is that the test and control HTML is not valid, it's missing closing DIV tags. I am not sure what the html tree looks like in that case and that may be the reason for the behavior.

[starsibi]

@egil : Apologies, my mistake. Here is the correct test and control HTML with proper closing tag. But still facing the same issue

var controlHtml = "<div class="parent">
                                  <div class="child1">child1</div>
                                  <div class="child2">child2</div>
                                  <div class="child3">child3</div>
                              </div>";
    var testHtml = "<div class="parent">
                                  <div class="child1">child1</div>
                                  <div class="child3">child3</div>
                              </div>";

[starsibi]

@egil - Could you please provide an update on this issue? I am awaiting your response.

[egil]

What does the diff result contain?

[starsibi]

Here is the diff result

AttrDiff { Control = { Type = Attribute, Path = div(0) > div(1)[class] }, Test = { Type = Attribute, Path = div(0) > div(1)[class] }, Target = Attribute, Result = Different, Kind = Value }
TextDiff { Control = { Type = Text, Index = 0, Path = div(0) > div(1) > #text(0) }, Test = { Type = Text, Index = 0, Path = div(0) > div(1) > #text(0) }, Target = Text, Result = Different }
MissingNodeDiff { Control = { Type = Element, Index = 2, Path = div(0) > div(2) }, Target = Element, Result = Missing }

[egil]

So it looks like this works as expected, or at least, based on the "matcher" that is used.

The elements is matched:

control	test	diff
child1	child1
child2	child3	AttrDiff , TextDiff
child3		MissingNodeDiff

Using https://github.com/AngleSharp/AngleSharp.Diffing/wiki/Diffing-Options#forward-searching-node-matcher may solve this, and you can also implement your own custom matcher. More complex matches does result in slower performance, as more searching needs to happen.

[egil]

Ill close this issue.

What you could do is also to look at https://github.com/bigskysoftware/idiomorph/ for inspiration for matching up elements. If you create an implementation that works with AngleSharp Diffing, please submit a PR.