Locate an element created by javascript using selenium webdriver

Question

I'm new in Selenium and Java, i'm work in a Automation testing project using selenium (java) , today i have a problem with driver.findElement, the element i want to find was created by javascript, i'm sure about using WebDriverWait to wait to target element to present, even i use thread.sleep and wait for it for about few minutes but webdriver still can not locate that element.

This is my problem, in html/js code i have a button, click this button javascript will create a div and i need use selenium to locate it to make Automatio Testing work.

After click a button, javascript makes a div look like :

<div id="zm-view-frame" class="fade in"><div class="zm-view-header"><div class="zm-view-back"><a onclick="WFLandingpage.closePreview();" id="zm-view-close" class="button" href="javascript:void(0);"><span>Close</span></a></div><div id="zm-view-button"><a href="javascript:void(0);" onclick="WFLandingpage.showDesktop(this)" class="zm-display-desktop"><span>Desktop</span></a><a href="javascript:void(0);" onclick="WFLandingpage.showTablet(this)" class="zm-display-tablet"><span>Tablet</span></a><a href="javascript:void(0);" onclick="WFLandingpage.showMobile(this)" class="zm-display-phone"><span>Mobile</span></a><a href="javascript:void(0);" onclick="WFLandingpage.rotateView()" class="zm-display-rotate"><span>Rotate</span></a></div></div><iframe id="zm-display-iframe" src="page=mvc_landingpages&amp;act=templatepage&amp;preview=1&amp;templateId=landingpage3" style="padding-top: 63px; margin: 0px auto;" scrolling="yes" width="100%" height="609"></iframe></div>

then, in java code i wrote :

this.wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("zm-view-frame")));

Then :

Tester.Browser.findElement(By.id("zm-view-frame")).click();

of course, i have defined this.wait :

public WebDriverWait wait = new WebDriverWait(Tester.Browser, 100);

and i get a wait timeout exception

I even use many type of By such as Xpath, css selector, class ... but still no luck.

I also use Selenium IDE for firefox to get element, export it to java code and view in my editor then do the same but it's not work for me again.

i'm really stuck on this, can you give me some help ?

and sorry for my bad english, many thanks !

UPDATE - this is my html structure : html structure

UPDATE - I found the bug and have a solution

Reason : Before above code i have few line of codes to check if a iframe available, the code like :

this.wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(locator));

and i didn't know that code make driver switched to that iframe, so my code above to find element is on wrong place (context).

Solution : so i need to back to defaut context (back to parent), i code like that :

Tester.Browser.switchTo().defaultContent();

Many thank to @Naveen to remind me to check that case :).

check whether the element you want to find is inside a frame element, i.e., your element is child of an <iframe> tag. If yes, then first you must switch to the frame and then find the element. please refer my answer here stackoverflow.com/questions/40758138/… to know more about switching b/w frames. — Naveen Kumar R B
– Naveen Kumar R B, Commented Dec 27, 2016 at 9:16
thank @Naveen i have checked and it's on <body> of parent page which place i'm working on — Risk
– Risk, Commented Dec 27, 2016 at 9:32
As I can see in the HTML, class is defined as fade in. Are you sure that the element is displayed on the web page? Or you need to perform some action like (hover etc) in order to display the element? — Naveen Kumar R B
– Naveen Kumar R B, Commented Dec 27, 2016 at 9:58
hi @Naveen thank you for point me to check whether the element stayed, after few debugs i found the reason : that element is on <body> of parent it's true, but before above code i use this.wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(locator)); to check if my other iframe available, i didn't know that it switched to that iframe after that check. to fix this i use Tester.Browser.switchTo().defaultContent(); to back to parent and everythings work fine now, thank you so much again bro !!! — Risk
– Risk, Commented Dec 27, 2016 at 10:10
good, you solved the issue. you can post it as an answer so other community members can benefit from it. Once, you switch to one frame, you should always switch to default frame again in order to find the elements. — Naveen Kumar R B
– Naveen Kumar R B, Commented Dec 27, 2016 at 10:15

Risk · Accepted Answer · 2016-12-27 10:21:18Z

0

I found the bug and have a solution

Reason : Before above code i have few lines of code to check if a iframe available, the code like below :

this.wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(locator));

and i didn't know that code make driver switched to that iframe, so my code above to find element is on wrong place (context).

Solution : so i need to back to defaut context (back to parent), i code like that :

Tester.Browser.switchTo().defaultContent();

Many thank to @Naveen to remind me to check that case :).

answered Dec 27, 2016 at 10:21

Risk

111 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Locate an element created by javascript using selenium webdriver

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related