Add shadow DOM support (#1994)

Author: kblok

appveyor/GenerateDocs.ps1

@@ -4,7 +4,7 @@ if($env:APPVEYOR_REPO_TAG -eq 'True' -And $env:framework -eq 'net6.0' -And $env:
 
     git config --global user.email "[email protected]"
     git config --global user.name "Dario Kondratiuk"
-    git remote add pages https://github.com/kblok/puppeteer-sharp.git
+    git remote add pages https://github.com/hardkoded/puppeteer-sharp.git
     git fetch pages
     git checkout master
     git subtree add --prefix docs pages/gh-pages

lib/PuppeteerSharp.Tests/QuerySelectorTests/PierceHandlerTests.cs

@@ -0,0 +1,98 @@
+using System;
+using System.Linq;
+using System.Threading.Tasks;
+using System.Xml.Linq;
+using PuppeteerSharp.Tests.Attributes;
+using PuppeteerSharp.Xunit;
+using Xunit;
+using Xunit.Abstractions;
+using static System.Net.Mime.MediaTypeNames;
+
+namespace PuppeteerSharp.Tests.QuerySelectorTests
+{
+    [Collection(TestConstants.TestFixtureCollectionName)]
+    public class PierceHandlerTests : PuppeteerPageBaseTest
+    {
+        public PierceHandlerTests(ITestOutputHelper output) : base(output)
+        {
+        }
+
+        public override async Task InitializeAsync()
+        {
+            await base.InitializeAsync();
+
+            await Page.SetContentAsync(@"
+                <script>
+                const div = document.createElement('div');
+                const shadowRoot = div.attachShadow({mode: 'open'});
+                const div1 = document.createElement('div');
+                div1.textContent = 'Hello';
+                div1.className = 'foo';
+                const div2 = document.createElement('div');
+                div2.textContent = 'World';
+                div2.className = 'foo';
+                shadowRoot.appendChild(div1);
+                shadowRoot.appendChild(div2);
+                document.documentElement.appendChild(div);
+                </script>
+                ");
+        }
+        public override Task DisposeAsync()
+        {
+            Browser.ClearCustomQueryHandlers();
+            return base.DisposeAsync();
+        }
+
+        [PuppeteerTest("queryselector.spec.ts", "pierceHandler", "should find first element in shadow")]
+        [PuppeteerFact]
+        public async Task ShouldFindFirstElementInShadow()
+        {
+            var div = await Page.QuerySelectorAsync("pierce/.foo");
+            var text = await div.EvaluateFunctionAsync<string>(@"(element) => {
+                return element.textContent;
+            }");
+            Assert.Equal("Hello", text);
+        }
+
+        [PuppeteerTest("queryselector.spec.ts", "pierceHandler", "should find all elements in shadow")]
+        [PuppeteerFact]
+        public async Task ShouldFindAllElementsInShadow()
+        {
+            var divs = await Page.QuerySelectorAllAsync("pierce/.foo");
+            var text = await Task.WhenAll(
+                divs.Select(div => {
+                    return div.EvaluateFunctionAsync<string>(@"(element) => {
+                        return element.textContent;
+                    }");
+                }));
+            Assert.Equal("Hello World", string.Join(" ", text));
+        }
+
+        [PuppeteerTest("queryselector.spec.ts", "pierceHandler", "should find first child element")]
+        [PuppeteerFact]
+        public async Task ShouldFindFirstChildElement()
+        {
+            var parentElement = await Page.QuerySelectorAsync("html > div");
+            var childElement = await parentElement.QuerySelectorAsync("pierce/div");
+            var text = await childElement.EvaluateFunctionAsync<string>(@"(element) => {
+                return element.textContent;
+            }");
+            Assert.Equal("Hello", text);
+        }
+
+        [PuppeteerTest("queryselector.spec.ts", "pierceHandler", "should find all child elements")]
+        [PuppeteerFact]
+        public async Task ShouldFindAllChildElements()
+        {
+            var parentElement = await Page.QuerySelectorAsync("html > div");
+            var childElements = await parentElement.QuerySelectorAllAsync("pierce/div");
+            var text = await Task.WhenAll(
+                childElements.Select(div => {
+                    return div.EvaluateFunctionAsync<string>(@"(element) => {
+                        return element.textContent;
+                    }");
+                }));
+            Assert.Equal("Hello World", string.Join(" ", text));
+        }
+    }
+}

lib/PuppeteerSharp/CustomQueriesManager.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Collections;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text.RegularExpressions;
@@ -8,7 +9,58 @@ namespace PuppeteerSharp
     internal class CustomQueriesManager
     {
         private readonly Dictionary<string, InternalQueryHandler> _queryHandlers = new();
-        private readonly Dictionary<string, InternalQueryHandler> _builtInHandlers = new();
+        private readonly InternalQueryHandler _pierceHandler = MakeQueryHandler(new CustomQueryHandler
+        {
+            QueryOne = @"(element, selector) => {
+                let found = null;
+                const search = (root) => {
+                  const iter = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+                  do {
+                    const currentNode = iter.currentNode;
+                    if (currentNode.shadowRoot) {
+                      search(currentNode.shadowRoot);
+                    }
+                    if (currentNode instanceof ShadowRoot) {
+                      continue;
+                    }
+                    if (currentNode !== root && !found && currentNode.matches(selector)) {
+                      found = currentNode;
+                    }
+                  } while (!found && iter.nextNode());
+                };
+                if (element instanceof Document) {
+                  element = element.documentElement;
+                }
+                search(element);
+                return found;
+              }",
+            QueryAll = @"(element, selector) => {
+                const result = [];
+                const collect = (root) => {
+                  const iter = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+                  do {
+                    const currentNode = iter.currentNode;
+                    if (currentNode.shadowRoot) {
+                      collect(currentNode.shadowRoot);
+                    }
+                    if (currentNode instanceof ShadowRoot) {
+                      continue;
+                    }
+                    if (currentNode !== root && currentNode.matches(selector)) {
+                      result.push(currentNode);
+                    }
+                  } while (iter.nextNode());
+                };
+                if (element instanceof Document) {
+                  element = element.documentElement;
+                }
+                collect(element);
+                return result;
+              }",
+        });
+
+        private readonly Dictionary<string, InternalQueryHandler> _builtInHandlers;
+
         private readonly Regex _customQueryHandlerNameRegex = new("[a-zA-Z]+$", RegexOptions.Compiled);
         private readonly Regex _customQueryHandlerParserRegex = new("(?<query>^[a-zA-Z]+)\\/(?<selector>.*)", RegexOptions.Compiled);
         private readonly InternalQueryHandler _defaultHandler = MakeQueryHandler(new CustomQueryHandler
@@ -17,6 +69,17 @@ internal class CustomQueriesManager
             QueryAll = "(element, selector) => element.querySelectorAll(selector)",
         });
 
+        public CustomQueriesManager()
+        {
+            _builtInHandlers = new()
+            {
+                ["pierce"] = _pierceHandler,
+            };
+            _queryHandlers = _builtInHandlers.ToDictionary(
+                entry => entry.Key,
+                entry => entry.Value);
+        }
+
         internal void RegisterCustomQueryHandler(string name, CustomQueryHandler queryHandler)
         {
             if (_queryHandlers.ContainsKey(name))