I have html code like this:
<div style="display: inline-block; position: absolute; top: 84px; bottom: auto; left: 5px; right: auto; width: auto; height: auto; max-width: none; max-height: none;" _afrc="2 1 8 1 start top">**CRED ID:** </div>
<div style="display: inline-block; position: absolute; top: 84px; bottom: auto; left: 115px; right: auto; width: auto; height: auto; max-width: none; max-height: none;" _afrc="3 1 8 1 start top">**11111972**</div>
<div style="display: inline-block; position: absolute; top: 103px; bottom: auto; left: 5px; right: auto; width: auto; height: auto; max-width: none; max-height: none;" _afrc="2 1 10 1 start top">**CAQH ID:** </div>
<div style="display: inline-block; position: absolute; top: 103px; bottom: auto; left: 115px; right: auto; width: auto; height: auto; max-width: none; max-height: none;" _afrc="3 1 10 1 start top">**11189685**</div>
if something shows as two stars for you it is supposed to be bold. I made the text bold so it shows up better. Anyway I can use //div[contains(text(),'CRED ID:')] to get the div element containing "CRED ID". The actual cred id value is "11111972". I am wondering how, when I use the above xpath, I can tell it to get the text value of the next div (i.e., 11111972). I can't really use a ../div because there are earlier and later divs at this level. Can anyone suggest?
I could use a #FindBy and make a List, find the index if "CRED ID" and add 1 I suppose, but it seems like there should be another way?
Thanks
p.s. I never really understodd following-sibling but I do not know whether that would work here?
You can use the following-sibling axis:
WebElement credId = driver.findElement(By.xpath("//div[contains(text(),'CRED ID:')]"));
WebElement credIdValue = credId.findElement(By.xpath("following-sibling::div"));
Or, you can reach it in one go:
WebElement credIdValue = credId.findElement(By.xpath("//div[contains(text(),'CRED ID:')]/following-sibling::div"));
Related
I want to count how many IMG tags there are under the surface div tag and echo the amount.
<div id="surface" style="width: 4567px; height: 4137px; left: -1850px; top: -1152px; cursor: default;">
<img src="https://media.memories.png" data-seat="L:106|EE:5" data-pl="1" style="position: absolute; cursor: pointer; width: 14px; height: 14px; left: 2221px; top: 1561px; display: block;">
<img src="https://media.memories.png" data-seat="L:106|EE:6" data-pl="1" style="position: absolute; cursor: pointer; width: 14px; height: 14px; left: 2237px; top: 1561px; display: block;">
<img src="https://media.memories.png" data-seat="L:106|EE:7" data-pl="1" style="position: absolute; cursor: pointer; width: 14px; height: 14px; left: 2253px; top: 1561px; display: block;">
<img src="https://media.memories.png" data-seat="L:106|EE:8" data-pl="1" style="position: absolute; cursor: pointer; width: 14px; height: 14px; left: 2269px; top: 1561px; display: block;">
</div>
Here is my non working attempt to get the count however its not returning the count to run my test in selenium IDE.
"//div[#surface='data-seat']/img"
Option 1:
You can simply use the below xpath and then get the count.
xpath to Image - "//div[#id='surface']/img"
System.out.println(driver.findElements(By.xpath("//div[#id='surface']/img")).size());
Option 2:
If you want to make it more complex, use the js to run the query and return the count.
JavascriptExecutor js = (JavascriptExecutor) driver;
Long number_of_imgs = (Long) js.executeScript("return document.querySelectorAll(\"div[id='surface'] img\").length");
System.out.println(number_of_imgs);
I would prefer the option 1.
Try:
//div[#surface='data-seat']/count(img)
For your example html, it outputs 4.
You can use the XPath-1.0 expression
count(//div[#id='surface']/img)
It counts all img children of all div elements.
To print the count of <img> tags within the <div> tag, you need to induce WebDriverWait for the visibilityOfAllElementsLocatedBy() and you can use either of the following Locator Strategies:
xpath:
System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.xpath("//div[#id='surface']//img"))).size());
cssSelector:
System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.cssSelector("div#surface img"))).size());
I am trying to click on a menu link but not have any luck. It always showing exception -
Exception in thread "main" org.openqa.selenium.WebDriverException:
unknown error: Element is not clickable at point (64, 64). Other
element would receive the click: <
div style="position: absolute; left:
0px; top: 0px; width: 100%; height: 100%; z-index: 30;
background-color: rgb(221, 221, 221); opacity: 0.4;">
I have following html snippet
<div id="RWR" class="clsDesktopHome" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; overflow: auto;">
<div class="clsDesktop clsDesktopHomePage" style="width: 1553px; height: 430px; top: 0px; left: 15px;">
<div id="foid:2" class="clsDesktopHeader clsTextOnDesktopColor">
<div id="foid:1" class="clsDesktopTabs" style="margin-right: 230px; height: 28px; visibility: visible; width: auto;">
<span class="clsDesktopTab clsDesktopTabActive clsDesktopTabTypeHome clsDesktopTabTypeHomeActive">
<span class="clsDesktopTabContent">
<span class="clsDesktopTabTypeIcon"></span>
<span class="clsDesktopTabMenuIcon"></span>
<span class="clsDesktopTabCollaborationIcon"></span>
<span class="clsDesktopTabCaption">Home</span>
<span class="clsDesktopTabCloseIcon"></span>
</span>
</span>
<span class="clsDesktopTab clsDesktopTabInactive clsDesktopTabCanClose clsDesktopTabTypeSheet">
<span class="clsDesktopTab clsDesktopTabInactive clsDesktopTabCanClose clsDesktopTabTypeSheet">
<span class="clsDesktopTab clsDesktopTabInactive clsDesktopTabCanClose clsDesktopTabTypeSheet">
<span class="clsDesktopTab clsDesktopTabInactive clsDesktopTabCanClose clsDesktopTabTypeSheet">
<span class="clsDesktopTab clsDesktopTabInactive clsDesktopTabCanClose clsDesktopTabTypeSheet">
<span class="clsDesktopTab clsDesktopTabInactive clsDesktopTabCanClose clsDesktopTabTypeSheet">
<span class="clsDesktopTab clsDesktopTabInactive clsDesktopTabCanClose clsDesktopTabTypeSheet">
<span class="clsDesktopTab clsDesktopTabHidden clsDesktopTabNoCaption clsDesktopTabTypeTabsMenu">
<span class="clsDesktopTab clsDesktopTabInactive clsAddNewContainer clsDesktopTabTypeAddNew">
</div>
<div class="clsDesktopBelowTabs" style="height: 325px; visibility: visible;">
<div id="foid:2" class="clsDesktopFooter clsTextOnDesktopColor" style="height: 18px; line-height: 18px;">
</div>
<div class="clsModalNode" style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; z-index: 10; background-color: rgb(0, 0, 0);"></div>
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 30; background-color: rgb(221, 221, 221); opacity: 0.4; display: none;"></div>
</div>
And this is the snapshot how it looking like -
I'm using following code to accomplish the same -
WebElement element = driver.findElement(By.xpath(".//*[#id='foid:1']/span[1]/span/span[4]"));
WebDriverWait wait = new WebDriverWait(driver, 120);
wait.until(ExpectedConditions.elementToBeClickable(element));
//driver.findElement(By.xpath("//span[contains(text(), 'Home')]")).click();
driver.findElement(By.xpath(".//*[#id='foid:1']/span[1]/span/span[4]")).click();
I did inspect the <div> tag in DOM which accepting the click. But I'm seeing this
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 30; background-color: rgb(221, 221, 221); opacity: 0.4;"></div>
with one additional attribute i.e. display:none;
Using following configurations:
Selenium 3.0.1
Driver -ChromeDriver
I don't know to to handle this situation.
Try to wait until element that gets click disappeared:
new WebDriverWait(driver, 10).until(ExpectedConditions.invisibilityOfElementLocated(By.xpath('//div[#style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 30; background-color: rgb(221, 221, 221); opacity: 0.4;"]')));
As this answer was downvoted, I add some more details to explain why it could be acceptable solution.
It's a known issue (I personally have faced it few times) of chromedriver: chromedriver sometimes ignores modal windows such as "Page loading in progress"
and "thinks" that target element (that is covered by modal window) actually visible and clickable and tries to make click which is received by modal window.
So it makes sense to wait until modal window disappeared.
I had the same problem and tried many solution but it didn't work.Lastly i saw selenium docs and found stalenessof
new WebDriverWait(driver, 10).until(ExpectedConditions.stalenessOf(findElement(By.xpath("element_path"))));
It should work now.
I need to get whole content of an iframe using selenium API in java.
This is the expected result:
<div id="WIN_0_304255502" arid="304255502" artype="View" ardbn="z2VF_02"
arcontainerid="304255802" arpercentwidth="100"
arpercentheight="100" class="arfid304255502 ardbnz2VF_02"
ardcf="1" style="top: auto; left: auto; width: 1318px;
height: 744px; z-index: 1135; min-width: 20px;
max-width: 32767px; min-height: 20px;
max-height: 32767px; position: relative; overflow: hidden;
background-color: transparent;"
arvfframe="<iframe style="top:0px; left:0px; width:1170px;
height:744px;
background-color: transparent;" name="VF304255502" frameborder=0
scrolling="no"
allowtransparency="true" arviewbordercolor="null" title="z2VF_02" src="javascript:"<HTML></HTML>""
onload="DVFol()">
</iframe>
" arwindowid="0" arstop="1">
//more elements
For now I try:
WebDriver driver= new HtmlUnitDriver();
driver.get(url3);
saveFile(driver.getPageSource());
After run the program, the result that I have it´s not what I expected. Maybe because of iframe that exists.
Result:
<div id="WIN_0_304255502" arid="304255502" artype="View" ardbn="z2VF_02" arcontainerid="304255802"
arpercentwidth="100" arpercentheight="100" class="arfid304255502 ardbnz2VF_02"
ardcf="1" style="top:0px; left:0px; width:1170px; height:744px;z-index:1135;background-color:transparent;min-width:20px;max-width:32767px;min-height:20px;max-height:32767px;"
arvfframe="<iframe style="top:0px; left:0px; width:1170px;
height:744px;background-color: transparent;" name="VF304255502"
frameborder=0 scrolling="no" allowtransparency="true" arviewbordercolor="null"
title="z2VF_02" src="javascript:"<HTML></HTML>""
onload="DVFol()">
</iframe>
">
</div>
I also try to access iframe (driver.switchTo().frame(driver.findElement(By.name("VF304255503")), but occurs an exception (org.openqa.selenium.NoSuchElementException: Unable to locate element with name: VF304255503).
I'm developing a website for the first time. I have used two div tags. One is outer container whose width and height are set to 100%. Other one is inside container. I want to set this to the center vertically. similar to this website: http://www.bigcinemas.com/IN/home.aspx.
But its not working. I tired something like this:
index.jsp
<div class="container">
<div class="banner">
<a class="logo" href="index.jsp">
<img src="images/logo.png" alt="Rainbow Entertainment" width="250px" height="50px"/></a>
<div id="login">
<table style="background-color: purple">
<tr><td>Username : <input type="text"></td>
<td>Password : <input type="password"></td>
<td>Sign in<input type="submit"></td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
menu.css
.container{
width: 100%;
height: 100%;
}
#banner{
width: 60%;
padding-left: 30%;
padding-right: 30%;
position: absolute;
}
.logo{
margin-top: 5px;
float: left;
width: 20%;
position: relative;
}
#login{
width: 30%;
float: right;
padding-left: 10%;
}
#menu{
height: 20%;
width: 70%;
}
.menu_items{
width: 80%;
color: white;
}
Also I want to the difference between id and class.
I was looking for a similar solution earlier today - check the answer on this question. How to vertically center a div for all browsers? . It sounds like the code provided there will suit your needs.
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
CSS
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: /*whatever width you want*/;
}
I have an issue while selecting a dropdown which is also an input field using selenium webdriver and java.
1) After the pop up appears, I will have to click the drop down and select a field and tab to the next drop down and select one more drop down and select a field .
2) These drop downs also act as input fields, so I used the input id for my xpath and it does type in the box instead of selecting it. Now I don't want to go that route.Instead want to select from the dropdown itself.
Here is the HTML of the pop up. ANy ideas??
Here is what I have written:
WebElement orgUnitText = driver.findElement(By.xpath("//input[#id='textfield-1137- inputEl']"));
orgUnitText.sendKeys("HRD");
logger.info("entered OrgUnitText");
WebElement orgUnitAbb = driver.findElement(By.xpath("//input[#id='textfield-1138- inputEl']"));
orgUnitAbb.sendKeys("HRD");
logger.info("entered OrgUnit abbreviation");
Thread.sleep(15000);
List<WebElement> options = driver.findElements(By.id("combobox-1140-inputEl"));
options.get(0).sendKeys("HR_ADMINS");
List<WebElement> options2 = driver.findElements(By.id("combobox-1141-inputEl"));
options2.get(0).sendKeys("HR_USERS");
WebElement textArea = driver.findElement(By.id("textareafield-1143-inputEl"));
textArea.sendKeys("HRD");
WebElement saveButton = driver.findElement(By.xpath("//a[#id='button-1146-btnEl']"));
saveButton.click();
logger.info("entered OrgUnit description");
</div>
<div id="orgunitpanel-1134-body" class="x-window-body x-window-body-default x-layout-fit x-closable x-window-body-closable x-window-body-default-closable x-window-body-default x-window-body-default-closable" style="background: none repeat scroll 0% 0% white; width: 690px; left: 0px; top: 20px; height: 178px;">
<div id="form-1135" class="x-panel x-fit-item x-window-item x-panel-default" style="padding: 5px; margin: 0px; width: 688px; height: 176px;">
<div id="form-1135-body" class="x-panel-body x-panel-body-default x-panel-body-default x-docked-noborder-top x-docked-noborder-right x-docked-noborder-bottom x-docked-noborder-left" style="width: 678px; left: 0px; top: 0px; height: 166px;">
<span id="form-1135-outerCt" style="display: table; width: 100%; table-layout: fixed;">
</div>
</div>
</div>
<div id="toolbar-1145" class="x-toolbar x-docked x-toolbar-footer x-docked-bottom x-toolbar-docked-bottom x-toolbar-footer-docked-bottom x-box-layout-ct" style="width: 690px; right: auto; left: 4px; top: 202px;">
<div id="toolbar-1145-innerCt" class="x-box-inner " role="presentation" style="width: 684px; height: 22px;">
<div id="toolbar-1145-targetEl" class="x-box-target" style="width: 684px;">
</div>
</div>
</div>
<div id="boundlist-1150" class="x-boundlist x-boundlist-floating x-layer x-boundlist-default x-resizable x-boundlist-resizable x-boundlist-default-resizable" tabindex="-1" style="right: auto; left: 1101px; top: 407px; width: 176px; z-index: 29001; height: auto; display: none;">
<div id="boundlist-1150-listEl" class="x-boundlist-list-ct x-unselectable" style="overflow: auto; height: auto;">
<div id="boundlist-1150-southeast-handle" class="x-resizable-handle x-resizable-handle-southeast x-boundlist-handle x-boundlist-handle-southeast x-boundlist-handle-southeast-br x-unselectable" unselectable="on"></div>
</div>
<div id="ext-gen1284" class="x-mask" style="z-index: 29001; width: 176px; height: 133px; right: auto; left: 1101px; top: 407px; visibility: hidden;"></div>
<div id="loadmask-1151" class="x-mask-msg x-layer x-mask-msg-default" style="right: auto; left: 1143px; top: 457px; z-index: 29003; display: none;">
<div id="loadmask-1151-msgEl" class=" x-mask-msg-inner">
</div>
</body>
</html>
Just use class Select that wraps WebElement and contains functions that allows to select option by value, visible text, get list of options and so on.