Develop Reference

How to create unique, complex Xpath to find a textarea tag?

Recently I'm struggling in my job with an issue of creating a proper Xpath selector to get the content of the demanded text area.
Here's the structure of my HTML document:
<div id="X115OutsideBorder" style="left: 59.1%; top: 855px; width: 14.6%; height: 22px; position: absolute;">
<div class="CheckBox ltr mandatoryFieldStyle " id="X115Border">
<div class="xEdit FormatInputReadonly" id="X115Edit">
<div style="display: inline-block; direction: ltr;">
<label disabled="" class="xCheckboxIcon" id="X115Icon" for="X115"></label>
<input name="instance/CUST.risk.major.inc" tabindex="-32768" disabled=""
id="X115" onclick="handleOnClick(this, event);"
onfocus="handleOnFocus(this, event);" onblur="handleOnBlur(this, event);
applyToSameControl(this);" onchange="handleOnChange(this, event);"
type="checkbox" readonly="" value="true" datachangeevent="3034" dvdvar=""
buttonid="" sctype="CheckBox" ref="instance/CUST.risk.major.inc">
</div>
<span class="xCheckboxLabelSpan FormatLabel " id="X115LabelSpan">
<label class="xCheckboxLabel" id="X115Label" for="X115" enabledstyle="
color:
#000000;
">Risk to Major Incident?</label>
</span>
</div>
</div>
</div>
<input id="X117" type="hidden" value="0" dvdvar="instance/CUST.interface.error">
<span class="Label" id="X119" style="left: 0%; top: 885px; width: 15.1%; height: 22px; text-align: right; position: absolute;" type="label">
<label id="X120_Label" for="X120">Additional Information</label>
</span>
<div class="MultiText" id="X120Border" style="left: 16%; top: 885px; width: 71.5%; height: 187px; position: absolute;">
<div class=" mandatoryFieldStyle xEdit xTextArea" id="X120Edit" style="height: 187px;">
<textarea name="instance/Additional.information" tabindex="-32768" id="X120"
style="height: 185px;" onkeyup="
lockFormOnValueChange(this);
"
onclick="handleOnClick(this, event);" onfocus="handleOnFocus(this, event);"
onblur="handleOnBlur(this, event); applyToSameControl(this);"
onchange="handleOnChange(this, event);" rows="4" cols="81"
dvdvar="instance/Additional.information" buttonid="" sctype="MultiText">
</textarea>
</div>
</div>
So I created a class in Java with usage of a Selenium framework, looking as follows:
Thread.sleep(5000);
WebDriverWait wait = new WebDriverWait(driver, 15);
WebElement additionalInfoElement = wait.until
(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[#class='sm-clpsSectionCnt ie cntExpanded']
//div[#class='MultiText']//div[#class=' mandatoryFieldStyle xEdit xTextArea'] //textarea[contains(#id,'X120')]")));
driver.findElement(By.xpath("//div[#class='sm-clpsSectionCnt ie cntExpanded'] //div[#class='MultiText']//div[#class=' mandatoryFieldStyle xEdit xTextArea']
//textarea[contains(#id, 'X120')]"));
Thread.sleep(3000);
additionalInfoElement.click();
String additionalInfoContent = additionalInfoElement.getText();
driver.switchTo().defaultContent();
Map<String, String> assigneesToKeywords = new HashMap<>();
assigneesToKeywords.put("ee57977","Please select the affected Process / Application::SSR");
assigneesToKeywords.put("c308042","Please select the affected Process / Application::SSR1");
assigneesToKeywords.put("p853780","Please select the affected Process / Application::MMSR");
assigneesToKeywords.put("c323607","Please select the affected Process / Application::Reporting");
assigneesToKeywords.put("c152236","Please select the affected Process / Application::BOI");
assigneesToKeywords.put("ex73629","K3, K4");
assigneesToKeywords.put("C321274","Please select the affected Process / Application::CPR");
assigneesToKeywords.put("X","Please select the affected Process / Application::FOBO");
assigneesToKeywords.put("c325285","Please select the affected Process / Application::T-RECS");
for (Map.Entry<String,String> entry : assigneesToKeywords.entrySet()){
if (entry.getValue().contains(additionalInfoContent)){
chosenAssignee=entry.getKey();
}else
chosenAssignee="XXXX";
}
return chosenAssignee;
}
What I'm trying to do right now, is to get the content of the text area named "Additional Info" and compare it against the values of the map "assigneesToKeywords". However, Xpath which I created doesn't work and I ran out of ideas how to fix it... I still get the following error: "Expected condition failed: waiting for visibility of element located by By.xpath: ..."
So far I was trying to increase the amount of a time-out, but it didn't work. I guess it's all about the proper construction of an Xpath.
Any ideas of what I'm doing wrong? Thanks a lot in advance guys!
Best regards,
Mateusz.

As I'm understanding it you're trying to find the textarea that is labeled Additional Information. This label element has a #for attribute that is the #id attribute of the textarea element.
<label id="X120_Label" for="X120">Additional Information</label>
<textarea name="instance/Additional.information" tabindex="-32768" id="X120" ...</textarea>
Try this:
WebElement additionalInfoElement = driver.findElement(By.xpath("//textarea[#id=//label[text()='Additional Information']/#for]"));
String additionalInfoContent = additionalInfoElement.getText();

List<WebElement>.get(i).click picking up random elements

I have a list of images and each need to be clicked.
Below is the HTML
<div id="VELayerListDiv">
<div id="msftve_1002">
<a id="msftve_1002_200000_10000" class="VEAPI_Pushpin" href="javascript://pushin hover" style="position: absolute; left: -17px; top: 450px; display: block; z-index: 1000;">
<div onmousedown="if (VEMap._GetMapFromGUID(1429800443062).FireEvent("onmousedown"))return;VEDragVEShapeDown("msftve_1002_200000_10000",1429800443062);" onmouseover="if (VEMap._GetMapFromGUID(1429800443062).FireEvent("onmouseover"))return;VEShowVEShapeERO("msftve_1002_200000_10000",1429800443062);" onmouseout="if (VEMap._GetMapFromGUID(1429800443062).FireEvent("onmouseout"))return;VEHideVEShapeERO(false);">
<div style="position:absolute;left:6.5px;top:-2px;writing-mode:tb-rl;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=0, xray=0, mirror=0, invert=0, opacity=1, rotation=0);opacity:1;">
<img width="17" height="34" src="images/spatial/custout_50-499_U2.png"/>
</div>
</div>
</a>
</div>
<div id="msftve_1003">
<a id="msftve_1003_200003_10003" class="VEAPI_Pushpin" href="javascript://pushin hover" style="position: absolute; left: 278.5px; top: 363.5px; display: block; z-index: 1000;">
<div onmousedown="if (VEMap._GetMapFromGUID(1429800443062).FireEvent("onmousedown"))return;VEDragVEShapeDown("msftve_1003_200003_10003",1429800443062);" onmouseover="if (VEMap._GetMapFromGUID(1429800443062).FireEvent("onmouseover"))return;VEShowVEShapeERO("msftve_1003_200003_10003",1429800443062);" onmouseout="if (VEMap._GetMapFromGUID(1429800443062).FireEvent("onmouseout"))return;VEHideVEShapeERO(false);">
<div style="position:absolute;left:6.5px;top:-2px;writing-mode:tb-rl;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=0, xray=0, mirror=0, invert=0, opacity=1, rotation=0);opacity:1;">
<img width="17" height="34" src="images/spatial/custout_2-49_U2.png"/>
</div>
</div>
</a>
<a id="msftve_1003_200004_10004" class="VEAPI_Pushpin" href="javascript://pushin hover" style="position: absolute; left: 277.5px; top: 362.5px; display: block; z-index: 1000;">
<div onmousedown="if (VEMap._GetMapFromGUID(1429800443062).FireEvent("onmousedown"))return;VEDragVEShapeDown("msftve_1003_200004_10004",1429800443062);" onmouseover="if (VEMap._GetMapFromGUID(1429800443062).FireEvent("onmouseover"))return;VEShowVEShapeERO("msftve_1003_200004_10004",1429800443062);" onmouseout="if (VEMap._GetMapFromGUID(1429800443062).FireEvent("onmouseout"))return;VEHideVEShapeERO(false);">
<div style="position:absolute;left:6.5px;top:-2px;writing-mode:tb-rl;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=0, xray=0, mirror=0, invert=0, opacity=1, rotation=0);opacity:1;">
<img width="17" height="34" src="images/spatial/custout_2-49_U2.png"/>
</div>
</div>
</a>
</div>
I have written the following code:
List<WebElement> pins = driver.findElements(By.xpath("//*[#id='VELayerListDiv']/div/a/div/div/img")));
System.out.println("Total Pins :"+pins.size());
for(int x=0;x<pins.size();x++)
{
pins.get(x).click();
}
The above code clicks the pins randomly. It is not clicking all the Pins uniquely (i.e all imgs). I get click on img1,img2,img1,img3,img1
I am not sure what is wrong as I get all the img's in the list (as pins.size() is correct). But the click does not click every img uniquely.
It is something to do with img tag not having any unique identifier.

How to align the div to the center vertically in jsp

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*/;
}

Dynamically displaying divison from data being fetched from database

I was tring to make a question answer forum in which each question being displayed is having three divisons : Answers Count,View count,Question.So for achieving this I do something like this :
<div id="container">
<div id="a">
<p align="center">0</p>
<p align="center">Answers</p>
</div>
<div id="b-wrapper">
<div id="b">
<p align="center">0</p>
<p align="center">Views</p>
</div>
</div>
<div id="c-wrapper">
<div id="c">
<p align="center">Question</p>
<p align="right">Asked By Micheal</p>
</div>
</div>
<br style="clear: both;">
</div>
In css i did :
#container {
width: 800px;
}
#a, #b-wrapper, #c-wrapper {
float: left;
}
#a {
width: 10%;
background-color: #0ff;
}
#b-wrapper {
width: 10%;
}
#b {
margin-left: 20px;
background-color: #0f0;
}
#c-wrapper {
width: 60%;
}
#c {
margin-left: 20px;
background-color: #EEEEEE;
}
Now I am facing two problems.
The divison for Answer is getting a bit bigger in height.How to manage it.
I am fetching questions from database Like :
while(rs.next){
String myid=rs.getString("ID");
//display here all three divisons where rs is ResultSet
}
So here problem is that i want to assign this myid to each of the divison And on click of any divison move to second.jsp.
Please help to solve these problems.

How to select an item in the drop down using webdriver (with or without using xpath)

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.