Locate an element created by javascript using selenium webdriver - java

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"><span>Desktop</span><span>Tablet</span><span>Mobile</span><span>Rotate</span></div></div><iframe id="zm-display-iframe" src="page=mvc_landingpages&act=templatepage&preview=1&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 :).

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 :).

Related

can't click on checkbox to uncheck it seem like it's hidden

the checkbox is checked be default and can't click on it to uncheck. here is my code but it came back as error saying element is not currently visible and so may not be interacted with. org.openqa.selenium.ElementNotVisibleException.
String checkboxXPath =("//input[contains(#type='checkbox',#name='key_IT_CONFIG.ios.restriction.functionality.enable.camera_checkboxVal')]");
WebElement elementToClick = driver.findElement(By.xpath(checkboxXPath));
elementToClick.click();
Website code
<input type="checkbox" class="uwp_inputCheckBox"
name="key_IT_CONFIG.ios.restriction.functionality.enable.camera_checkboxVal"
id="key_IT_CONFIG.ios.restriction.functionality.enable.camera"
value="true" dir="ltr" hierarchy="false" expand="true"
checkedval="true" uncheckedval="false"
onclick="checkboxChange('IT_CONFIG.ios.restriction.functionality.enable.camera')"
checked="checked">
whole code
whole code http://imageshack.com/a/img661/1720/SIi6Xj.png
I think you should use explicit wait until element get visible. Please check update code here and use it:
String checkboxXPath =("//input[contains(#type='checkbox',#name='key_IT_CONFIG.ios.restriction.functionality.enable.camera_checkboxVal')]");
WebDriverWait wait = new WebDriverWait(driver,30);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath(checkboxXPath)));
WebElement elementToClick = driver.findElement(By.xpath(checkboxXPath));
elementToClick.click();
I have a couple suggestions. I'm not sure why your XPath is so complex when you have an ID on the element you want to click. Try this...
driver.findElement(By.id("key_IT_CONFIG.ios.restriction.functionality.enable.camera"));
I'm kinda guessing that won't work. Looking at the HTML, I see the SPAN right above the element that you want to click and it has an onclick on it. I'm guessing that if you click that, it might trigger the click of the checkbox... so let's try that...
driver.findElement(By.cssSelector("span.uwp_checkBoxSpan.uwp_checkBoxChecked"));
You might need to check my spelling on the class names... I couldn't copy/paste since it's a picture.
Since Selenium works on Javascript I would suggest you to test the checkbox clicking thing manually by entering a Javvascript. Here are the step you need to follow:
Execute the test case manually up till where your script failed.
Goto browsers developer tools option->Console. Enter a javascript
command document.getElementById('key_IT_CONFIG.ios.restriction.functionality.enable.camera').click()
If this works then there is no reason why your code shouldn't work.

Selenium sees textbox as hidden even if I can see it in the browser

I have a password textbox that is something like this
<input class="blahblah" id="someId" type="password"></input>
I am able to see this textbox in the browser and am able to manually insert password.
However when I test this ui using selenium, although it finds the element correctly, but when it tries to click the element, it throws an error
"org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with"
I did a check in code using
Boolean isDisplayed=el.isDisplayed();//false
Boolean isEnabled=el.isEnabled();//true
The isDisplayed came up false and isEnabled came up true. There is a 15 second delay added to give the page enough time to load (the page loads instantly). So adding a delay will not fix the problem.
I verified using firefox developer tools that the id it was finding was of the correct element.
Why does selenium think its invisible even if I am able to see it in the browser? Could it be that one of the parent elements has some style attribute that selenium doesn't like? Or is it a bug in the selenium driver?
I am using selenium driver for java version 2.45.0
The problem is that the desired input is really invisible due to the display: none being set on it's parent table:
<table title="Type a password."
class="dxeTextBoxSys dxeTextBox_MyCompany "
id="ctl00_ctl00_MasterContent_MainContentPlaceHolder_ViewCredentials_TopicPanel1_credentialGrid_editnew_4_txtPassword_P_PB"
style="width: 100%; border-collapse: collapse; display: none;"
border="0" cellpadding="0" cellspacing="0">
Most likely, the table is becoming visible on a particular user action that you need to determine.
But, alternatively, you can make the table visible through javascript:
WebElement table = driver.findElement(By.id("ctl00_ctl00_MasterContent_MainContentPlaceHolder_ViewCredentials_TopicPanel1_credentialGrid_editnew_4_txtPassword_P_PB"));
JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("arguments[0].style.display = 'block';", table);
In case the above doesn't make any difference.
There is an another hidden password input that can be important:
<input value=""
name="ctl00$ctl00$MasterContent$MainContentPlaceHolder$ViewCredentials$TopicPanel1$credentialGrid$editnew_4$txtPassword$P$PB$CVS"
type="hidden">
You can try making it visible and sending keys to it:
WebElement password = driver.findElement(By.name("ctl00$ctl00$MasterContent$MainContentPlaceHolder$ViewCredentials$TopicPanel1$credentialGrid$editnew_4$txtPassword$P$PB$CVS"));
JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("arguments[0].setAttribute('type', 'text');", password);
password.sendKeys("MyPassword");
In case the above doesn't work.
You can set the input value through javascript:
JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("document.getElementById('ctl00_ctl00_MasterContent_MainContentPlaceHolder_ViewCredentials_TopicPanel1_credentialGrid_editnew_4_txtPassword_P_PB_I').setAttribute('value', 'MyPassword');");
Possibly, Selenium is going too fast through your DOM. Has happened with me several times and your element hasn't fully loaded into DOM.
I am more familiar with the PHP/PHPUnit libraries available for Selenium, but perhaps you can introduce a temporary wait with a command similar to waitForElementPresent.
Also, if you have control of the code, can you give a 'name' attribute to your input field as well? It could not hurt anything to do so.
Have a look at the DOM elements and verify that there is no parent element with a display: none etc, when i encountered an issue like this that was the problem.
Are you able to get information from the element by XPath? This was my work around.
I have faced this kind of issue many times. the first thing comes into my mind is probably the selector you are using is not unique or not returning THE element you are looking for. Since,
Boolean isDisplayed=el.isDisplayed();//false
Boolean isEnabled=el.isEnabled();//true
does not return NoSuchElement exception I do not think it's a element load issue. A quick check can tell you what's going on
driver.findElements(By.cssSelector("the css")).size(); and see how many count it returns.

Selenium webdriver unable to find this one particular element

I tried looking around for a solution, but haven't found any. Webdriver is unable to find this one particular element for some reason.
Here's the html code:
<div id=​"cboxOverlay" style="opacity: 1; cursor: auto; display: none;">​</div>​
And I am using xpath to find this element
By.xpath("//div[#id = 'cboxOverlay' and contains(#style, 'display: none;')]")
When I use firefinder, I can find this element. But it times out and doesnt find the element when I run the code
WebElement cboxOverlayWebElement = driver.findElement(cboxOverlay);
I have also tried using explicit wait to wait till the element is clickable or visible. Also I am using Java.
Could someone help me? Thanks!!
#Sweta
In your html code there is "display: none" means cboxoverlay would not be display. So webdriver also did not get it. Try to fine out what action makes this overlay display and then according write your code.

How best should I interact with a this <li> from Selenium Java Webdriver

I am trying to interact with the Nike shoe online shop, login and then select a shoe size from the list and then press add to cart button from Selenium's Java WebDriver:
http://store.nike.com/us/en_us/pd/air-max-2014-running-shoe/pid-830258/pgid-774364
First of all I cannot seem to find the correct <li> element and select it - and need some advise on how to do it.
I am finding my code does not work for selecting a shoe size : pastebin.com/6K1RpPKL (as guided by the kind user on the first response.
The element type in li is not select. Use following code instead, it will work fine.
WebElement shoeSizes = driver.findElement(By.xpath("//div[contains(#class,'exp-pdp-size-container')]/a"));
shoeSizes.click(); // Expanded
String shoeSize = "8.5";
WebElement shoeSizeSel = driver.findElement(By.xpath("//li[text()='"+shoeSize+"']"));
shoeSizeSel.click(); // Size selected
driver.findElement(By.xpath("//div[#class='exp-pdp-save-container']/button")).click(); // Added to cart
As far as advice goes, you should first learn the basics like identifying elements, using locators before asking these kind of question. Go through these: Selenium Docs, Mozilla Blogs. Many such resources are available on web.
First off, you should get away from the IDE if you are wanting more robust test-writing like flash. For your login issue, this is simple.
Using the getting started with selenium framework your test would look like:
#Config(url="http://store.nike.com/us/en_us/pd/air-max-2014-running-shoe/pid-830258/pgid-774364")
public class NikeTest extends AutomationTest {
#Test
public void testNike() {
click (By.cssSelector("div.login.nav-section > a"))
.setText(By.cssSelector("form[name='login-form] input[name='email']"), "<My Username>")
.setText(By.cssSelector("form[name='login-form] input[name='password']"), "<My Password>")
.click (By.cssSelector("form[name='login-form] button.exp-login-submit")
// now we're logged in.
// let's select a size of shoe.
.click (By.cssSelector("div.exp-pdp-size-and-quantity-container > a.exp-pdp-size-dropdown") // now it's expanded.
.selectOptionByText(By.cssSelector("select[name='skuAndSize']"), "10.5") // you can replace 10.5 with whatever option you need.
}
}
Those are some CSS selectors you can use. Also per your Flash thing, i think you're out of luck buddy.. I hadn't heard of any very successful solution with automating flash.
One key thing here:
Make sure you know what element is receiving the click. Selenium IDE doesn't do a great job determining WHAT exact element is receiving the click. My guess is that it was trying either the <div> or <li> when it's the <a> that actually makes the dropdown come down.

Selenium does not find element via xpath using Chromedriver

I'm using Chromedriver to try and find the following element:
<td class="section-menuoption"
onmouseover="this.className='section-menuoption-hilite';"
onmouseout="this.className='section-menuoption';" align="left"
onclick="self.jssDetails.location='products.php?xUser=kery&xRand=123';">
Scheduled Changes
</td>
When using the SeleniumIDE in Firefox I can use this selector without issue:
//*[contains(text(), 'Scheduled Changes')]
However, when I attempt to use this selector with the Chromedriver I get a "no such element" error (running via maven). My Chromedriver code looks likes this:
WebElement box = driver.findElement(By.xpath("//*[contains(text(), 'Scheduled Changes')]"));
System.out.print(box.getText());
box.click();
I've tried different quoting strategies, different xpaths (that also resolve correctly in the SeleniumIDE), but with no success. The only thing I can think of now is changing my XPath implementation, but I'm not even sure that's possible with Chromedriver.
Any help would be very appreciated.
First, make sure it it not in any kind of frames. Otherwise you need switch into the frame first, like this.
Then try use css selector instead of XPath. For example (you may need try different variations):
WebElement box = driver.findElement(By.cssSelector("td[onclick*=\"self.jssDetails.location='products.php?xUser=kery&xRand=123';\"]"));
Also, you might want to post every XPaths you have tried, to help us analyse.

Categories