| <html> |
| <head> |
| <title>shadow_dom_test.html</title> |
| <script type="text/javascript" src="test_bootstrap.js"> |
| </script> |
| <script type="text/javascript"> |
| goog.require('goog.testing.jsunit'); |
| goog.require('webdriver.chrome'); |
| goog.require('bot.locators'); |
| </script> |
| </head> |
| <body> |
| <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> |
| document.getElementById('padding').style.height = window.innerHeight; |
| </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> |
| <content></content> |
| </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> |
| <content></content> |
| <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').createShadowRoot(); |
| parentShadowRoot.appendChild(document.querySelector('#parentTemplate' |
| ).content.cloneNode(true)); |
| var childShadowRoot = parentShadowRoot.querySelector("#parentDiv" |
| ).createShadowRoot(); |
| childShadowRoot.appendChild(document.querySelector('#childTemplate' |
| ).content.cloneNode(true)); |
| function buttonWasClicked() { |
| document.querySelector("* /deep/ #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); |
| } |
| |
| function testShadowRootIsElementClickable() { |
| // check isElementClickable works as expected on elements within a shadow |
| // DOM |
| var elemButton = document.querySelector("* /deep/ #button"); |
| var elemText = document.querySelector("* /deep/ #textBox"); |
| |
| // scroll to the element |
| webdriver.chrome.getLocationInView(elemButton, true); |
| assertTrue( |
| "Button #button should be clickable", |
| webdriver.chrome.isElementClickable(elemButton, |
| getCenterCoordinate(elemButton)).clickable); |
| assertFalse( |
| "Textbox #textBox should not be clickable from #button's location", |
| webdriver.chrome.isElementClickable(elemText, |
| getCenterCoordinate(elemButton)).clickable); |
| } |
| |
| function testShadowRootIsDisplayed() { |
| // check isDisplayed works as expected on elements within a shadow |
| // DOM |
| var elem = document.querySelector("* /deep/ #textBox"); |
| assertTrue("Text box #textBox should be visible", |
| webdriver.chrome.isElementDisplayed(elem)); |
| document.querySelector("#outerDiv").style.display="None"; |
| try { |
| assertFalse( |
| "Text box #textBox should not be visible", |
| webdriver.chrome.isElementDisplayed(elem)); |
| } finally { |
| document.querySelector("#outerDiv").style.display=""; |
| } |
| } |
| |
| function testShadowRootFindElement() { |
| // check FindElement works as expected on elements within a shadow |
| // DOM |
| var elemDiv = document.querySelector("* /deep/ #childDiv"); |
| var elemButton = document.querySelector("* /deep/ #button"); |
| assertEquals( |
| "webdriver.chrome.findElement didn't find the element #button", |
| elemButton, |
| webdriver.chrome.findElement({"id" : "button"}, elemDiv)); |
| } |
| |
| function testBotLocatorsFindElements() { |
| // webdriver.chrome.findElement depends on bot.locators.findElements. |
| // So check that bot.locators.findElements keeps working as expected |
| // with shadow roots |
| var elemDiv = document.querySelector("* /deep/ #childDiv"); |
| var elemButton = document.querySelector("* /deep/ #button"); |
| var elems = bot.locators.findElements({"id" : "button"}, elemDiv); |
| assertEquals("webdriver.chrome.findElements didn't find exactly 1 element for #button", |
| 1, |
| elems.length); |
| assertEquals( |
| "webdriver.chrome.findElement didn't find the element button", |
| elemButton, |
| elems[0]); |
| } |
| |
| </script> |
| </body> |
| </html> |
| |
| |
| |
