c# - WebDriver reporting child div as "Not Visible" after parent div has been moved too far up, on scrolling SPA -
the webpage in question spa, describe single large div several div "boards" inside it, scroll view applying webkit transform on parent div.
unfortunately, once scrolled far, elements returned webdriver "disabled" - webelement property "displayed" false, text property blank, , can't execute clicks/actions on element. visible on page @ time , functional.
while investigating problem, created small test webpage see under conditions occurs.
link jsfiddle sample page show functionality
nb note not using iframes in website, jsfiddle demonstrate functionality.
<html><head> <script type="text/javascript" src="jquery-1.8.3.js"></script> <style type="text/css"> .board-nav { font-size: 12px; color: #1b1a1a; margin-right: 10px; vertical-align: middle; } .scroller{ -webkit-transition: -webkit-transform 0ms; transition: -webkit-transform 0ms; -webkit-transform-origin: 0px 0px; -webkit-transform: translate(0px, 0px) scale(1) translatez(0px); transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, 0px) scale(1) translatez(0px); height: 4000px; } </style> <script type="text/javascript"> var boardpositions = [0, -878, -1748, -2598, -3468]; var $scroller = null; function changeboard(event) { var newvalue = 'translate(0px, ' + boardpositions[event.target.id] + 'px) scale(1) translatez(0px)'; $('.scroller').css('-webkit-transform',newvalue); $('.scroller').css('transform', newvalue); } $(document).ready( function(){ var $boards = $('.board-nav'); $boards.on('click', changeboard); }); </script> </head><body> <div> <div class="board-nav" id="0">info</div> <div class="board-nav" id="1">board1</div> <div class="board-nav" id="2">board2</div> <div class="board-nav" id="3">board3</div> <div class="board-nav" id="4">board4</div> </div> <div id="content" style="width:1612px; height:864px; position:absolute; left:58px; overflow:hidden"> <div class="scroller"> <ul class="vertical"> <li class="v" id="li0"> <div class="target"><span>info</span></div> </li> <li class="v" id="li1"> <div class="target"><span>board1</span></div> </li> <li class="v" id="li2"> <div class="target"><span>board2</span></div> </li> <li class="v" id="li3"> <div class="target"><span>board3</span></div> </li> <li class="v" id="li4"> <div class="target"><span>board4</span></div> </li> </ul> </div> </div> </body></html> it seems parent div y location becomes less around -2000, all child elements become "disabled" in manner. prior (around -1900 example), elements returned information valid. can switch board 3, board 2, , elements returned correctly again. board 3 - boards "disabled". seems browser webdriver limitation.
webdriver c# test code :
var driver = new firefoxdriver(); driver.manage().window.maximize(); driver.navigate().gotourl("testpage.html"); var elements = driver.findelements(by.classname("v")); return elements[3].findelement(by.tagname("span")).text; firefox handles best - @ least shows info/board1/board2 before giving up. chrome doesn't handle of boards, returning same displayed = false, blank text boards.
so question - there way around this? can test text on other boards correct, while board1/info showing, won't able interact last 2 boards.
answer:
just resolved problem adding height attribute parent div "scroller" element - guess webdriver couldn't determine height of parent div , assumed beyond location no longer visible.
i've updated code above , jsfiddle solution
i guess happens firefox , ie, not chrome? if so, experiencing similar issue. suspect chrome doesn't care webdriver w3c standards , determines visibility in different way.
if answer not related question, hope still beneficial find through search engine.
the issue i'm facing selenium returns elements invisible, real end users can see , perform actions without issues. best solution here change site's source code make selenium's firefoxdriver , internetexplorerdriver happy. related elements' positions , overlapping, seems pretty hard reproduce , fix.
however, apart that, here few workarounds , hacks through selenium might helpful.
- use
element.getattribute("textcontent")instead ofelement.textinvisible elements
return elements[3].findelement(by.tagname("span")).getattribute("textcontent"); - use actions click or javascript click, instead of normal click. example, if need method many time, might want create extension methods either
iwebelementoriwebdriver.
// example of javascriptclick extension method iwebdriver // use driver.javascriptclick(element); // or can make iwebelement's extension , pass in iwebdriver // or create normal method , pass in both driver , element public static void javascriptclick(this iwebdriver driver, iwebelement element) { ijavascriptexecutor executor = driver ijavascriptexecutor; executor.executescript("arguments[0].click();", element); } public static void actionsclick(this iwebdriver driver, iwebelement element) { new actions(driver).click(element).perform(); } related reading:
Comments
Post a Comment