javascript/chrome-driver/test/shadow_dom_test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>shadow_dom_test.html</title>
  <link rel="stylesheet" href="/filez/_main/third_party/js/qunit/qunit.css">
  <script src="/filez/_main/third_party/js/qunit/qunit.js"></script>
  <script src="/filez/_main/third_party/js/qunit/qunit_test_runner.js"></script>
  <script type="text/javascript" src="test_bootstrap.js">
  </script>
  <script type="text/javascript">
    goog.require('goog.math.Coordinate');
    goog.require('webdriver.chrome');
    goog.require('bot.locators');
  </script>
</head>
<body>
<style>
  /* Ensure test content clears the QUnit UI */
  #qunit {
    position: relative;
    z-index: 1;
  }
  #test-content {
    position: relative;
    z-index: 0;
  }
</style>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div id="test-content">
<H1>Page for Shadow DOM chromedriver tests</H1>
The various sections are highlighted with colored borders to make it more obvious
where each element comes from. Default to pushing the content off the first 
screen, to test that scrolling to the elements works.
<div id="padding"></div>
<script>
// Add enough padding to push content well past any QUnit UI
document.getElementById('padding').style.height = window.innerHeight + 'px';
</script>
<div id="outerDiv">
  <div id="innerDiv" style="border-style:solid;border-color:yellow">
    stuff
  </div>
</div>

<template id="parentTemplate">
  <div id="parentDiv">
    <div style="border-style:solid;border-color:green">
      <H3>Parent</H3>
      <H4>Contents</H4>
      <slot></slot>
    </div>
  </div>
</template>
<template id="childTemplate">
  <div id="childDiv">
    <div style="border-style:solid;border-color:red">
      <H3 id="heading">Child</H3>
      As the child of a nested shadow root, this is the most likely
      to go wrong bit of the page, so we'll concentrate our tests here.
      <H4>Contents</H4>
      <slot></slot>
      <input id="textBox" type="text" value="foo"/>
      <input type="button" onClick="buttonWasClicked()" value="button"
          id="button"/>
    </div>
  </div>
</template>
<script type="text/javascript" >
var parentShadowRoot = document.querySelector('#innerDiv').attachShadow({mode: 'open'});
parentShadowRoot.appendChild(document.querySelector('#parentTemplate'
    ).content.cloneNode(true));
var childShadowRoot = parentShadowRoot.querySelector("#parentDiv"
    ).attachShadow({mode: 'open'});
childShadowRoot.appendChild(document.querySelector('#childTemplate'
    ).content.cloneNode(true));
// Helper to query into nested shadow roots
function deepQuery(selector) {
  return childShadowRoot.querySelector(selector);
}
function buttonWasClicked() {
  deepQuery("#textBox").value="Button Was Clicked";
}
</script>
<script type="text/javascript">

  function getCenterCoordinate(elem) {
    var rect = elem.getClientRects()[0];
    var x = rect.left + (rect.right - rect.left) / 2;
    var y = rect.top + (rect.bottom - rect.top) / 2;
    return new goog.math.Coordinate(x, y);
  }

  QUnit.test('shadow root isElementClickable', function(assert) {
    // check isElementClickable works as expected on elements within a shadow
    // DOM
    var elemButton = deepQuery("#button");
    var elemText = deepQuery("#textBox");

    // scroll to the element
    webdriver.chrome.getLocationInView(elemButton, true);
    assert.ok(
        webdriver.chrome.isElementClickable(elemButton,
            getCenterCoordinate(elemButton)).clickable,
        "Button #button should be clickable");
    assert.notOk(
        webdriver.chrome.isElementClickable(elemText,
            getCenterCoordinate(elemButton)).clickable,
        "Textbox #textBox should not be clickable from #button's location");
  });

  QUnit.test('shadow root isDisplayed', function(assert) {
    // check isDisplayed works as expected on elements within a shadow
    // DOM
    var elem = deepQuery("#textBox");
    assert.ok(webdriver.chrome.isElementDisplayed(elem),
        "Text box #textBox should be visible");
    document.querySelector("#outerDiv").style.display="None";
    try {
      assert.notOk(
        webdriver.chrome.isElementDisplayed(elem),
        "Text box #textBox should not be visible");
    } finally {
      document.querySelector("#outerDiv").style.display="";
    }
  });

  QUnit.test('shadow root findElement', function(assert) {
    // check FindElement works as expected on elements within a shadow
    // DOM
    var elemDiv = deepQuery("#childDiv");
    var elemButton = deepQuery("#button");
    assert.strictEqual(
        webdriver.chrome.findElement({"id" : "button"}, elemDiv),
        elemButton,
        "webdriver.chrome.findElement didn't find the element #button");
  });

  QUnit.test('bot locators findElements', function(assert) {
    // webdriver.chrome.findElement depends on bot.locators.findElements.
    // So check that bot.locators.findElements keeps working as expected
    // with shadow roots
    var elemDiv = deepQuery("#childDiv");
    var elemButton = deepQuery("#button");
    var elems = bot.locators.findElements({"id" : "button"}, elemDiv);
    assert.strictEqual(elems.length, 1,
        "webdriver.chrome.findElements didn't find exactly 1 element for #button");
    assert.strictEqual(
        elems[0],
        elemButton,
        "webdriver.chrome.findElement didn't find the element button");
  });

</script>
</div><!-- end test-content -->
</body>
</html>