Handle target elements that are inside Shadow DOM; hammerhead@10.6.1 (c…

…loses #1312)
DevExpress · Mar 17, 2017 · 5ddd92d · 5ddd92d
1 parent 5df1cbe
commit 5ddd92d
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -91,7 +91,7 @@
     "stack-chain": "^1.3.6",
     "strip-bom": "^2.0.0",
     "testcafe-browser-tools": "1.2.1",
-    "testcafe-hammerhead": "10.6.0",
+    "testcafe-hammerhead": "10.6.1",
     "testcafe-legacy-api": "2.0.2",
     "testcafe-reporter-json": "^2.1.0",
     "testcafe-reporter-list": "^2.1.0",

diff --git a/src/client/core/utils/position.js b/src/client/core/utils/position.js
@@ -229,6 +229,15 @@ export function getElementFromPoint (x, y) {
     if (el === null)
         el = func.call(document, x - 1, y - 1);
 
+    while (el && el.shadowRoot) {
+        var shadowEl = el.shadowRoot.elementFromPoint(x, y);
+
+        if (!shadowEl)
+            break;
+
+        el = shadowEl;
+    }
+
     return el;
 }
 

diff --git a/test/functional/fixtures/regression/gh-1312/pages/index.html b/test/functional/fixtures/regression/gh-1312/pages/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+</head>
+<body>
+  <div id="host">Shadow DOM</div>
+  <script>
+    var host   = document.querySelector('#host');
+    var root   = host.createShadowRoot();
+    var header = document.createElement('h1');
+    var input  = document.createElement('input');
+
+    header.textContent = 'Test Me!';
+
+    header.addEventListener('click', () => header.textContent = 'Test passed');
+
+    root.appendChild(header);
+    root.appendChild(input);
+  </script>
+</body>
+</html>
diff --git a/test/functional/fixtures/regression/gh-1312/test.js b/test/functional/fixtures/regression/gh-1312/test.js
@@ -0,0 +1,15 @@
+describe('[Regression](GH-1312)', function () {
+    it('Should preform a click action on the element inside shadow DOM', function () {
+        return runTests('testcafe-fixtures/index-test.js', 'click', {
+            // NOTE: Currently supported in Chrome only: http://caniuse.com/#feat=shadowdom
+            only: 'chrome'
+        });
+    });
+
+    it('Should preform a typeText action on the element inside shadow DOM', function () {
+        return runTests('testcafe-fixtures/index-test.js', 'typeText', {
+            // NOTE: Currently supported in Chrome only: http://caniuse.com/#feat=shadowdom
+            only: 'chrome'
+        });
+    });
+});
diff --git a/test/functional/fixtures/regression/gh-1312/testcafe-fixtures/index-test.js b/test/functional/fixtures/regression/gh-1312/testcafe-fixtures/index-test.js
@@ -0,0 +1,19 @@
+import { Selector } from 'testcafe';
+
+fixture `gh-1312`
+    .page `http://localhost:3000/fixtures/regression/gh-1312/pages/index.html`;
+
+const shadowHeader = Selector(() => document.querySelector('#host').shadowRoot.querySelector('h1'));
+const shadowInput  = Selector(() => document.querySelector('#host').shadowRoot.querySelector('input'));
+
+test('click', async t => {
+    await t
+        .click(shadowHeader)
+        .expect(shadowHeader.innerText).eql('Test passed');
+});
+
+test('typeText', async t => {
+    await t
+        .typeText(shadowInput, 'Test passed')
+        .expect(shadowInput.value).eql('Test passed');
+});