We Keep Coding

How to locate a specific button inside a class. The button might share classname with other button outside this class

This is the button with classname action. How can I point to only this button inside this snackbar class. I need the xpath.
<div class="snackbar-container snackbar-pos bottom-center" style="width: 475px; background: rgb(50, 50, 50); opacity: 1;" xpath="1">
<p style="margin: 0px; padding: 0px; color: rgb(255, 255, 255); font-size: 14px; font-weight: 300; line-height: 1em;">Show similar patients for Jerry Rocker</p>
<button class="action" style="color: rgb(76, 175, 80);">SHOW</button>
</div>
Tried this.
WebElement
snackbarButton=driver.findElement(By.xpath("//button[contains(#class,'action') and contains(#class,'snackbar-pos']"));
<div class="snackbar-container snackbar-pos bottom-center" style="width: 475px; background: rgb(50, 50, 50); opacity: 1;" xpath="1">
<p style="margin: 0px; padding: 0px; color: rgb(255, 255, 255); font-size: 14px; font-weight: 300; line-height: 1em;">Show similar patients for Jerry Rocker</p>
<button class="action" style="color: rgb(76, 175, 80);">SHOW</button>
</div>

Presumably you intent to click on the button with text as SHOW associated with the element with text as Show similar patients for Jerry Rocker and to achieve that you to induce WebDriverWait for the element to be clickable and you can use either of the following Locator Strategies:
xpath1:
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//p[text()='Show similar patients for Jerry Rocker']//following::button[1]"))).click();
xpath2:
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//p[text()='Show similar patients for Jerry Rocker']//following::button[#class='action' and text()='SHOW']"))).click();

If you want to get the button which is a child of <div> tag which class attribute contains snackbar-pos you could go for the following expression:
//div[contains(#class,'snackbar-pos')]/button
Demo:
However it might make more sense to stick to this xpath attribute:
//div[#xpath='1']/button
Or even this Jerry Rocker text:
//p[contains(text(),'Jerry Rocker')]/following-sibling::button
References:
XPath Tutorial
XPath Axes
XPath Operators & Functions

You can use below given xpath.
//div[#class='snackbar-container snackbar-pos bottom-center']//child::p//following-sibling::button[#class='action']
Hope this will help.

INPUT box-sizing border-box with 100% height and width inside TD issue in Chrome

I found a nearly identical case to mine here. But the accepted answer does not work for me so I hope it's OK that I make a new question.
The pic below is what I want to achieve in all major browsers (at least IE8+, Firefox and Chrome). INPUTs placed inside TDs fills their parents both width and height.
My issue is that I can't get it done in Chrome with below code snippet. Thanks in advance
UPDATE: My issue on Chrome explained:
If you take a closer look, there's 1 or 2px padding at top and bottom border. This is me on Chrome Version 47.0.2526.111 m on Windows 7 (Please open in new windows to see clearer)
UPDATE2: Big mistake on the sample. DIVs adapt their parent just fine without using the box-sizing. What I actually want is the INPUT to adapt their parent as well. Just updated my code snippet again.
table {
border-collapse: collapse;
width: 100%
}
td {
height: 100px;
border: 1px #ccc solid;
}
input {
border: 1px #ccc solid;
height: 100%;
width: 100%;
box-sizing: border-box; /* works fine with IE8+ */
-moz-box-sizing: border-box; /* works fine Firefox */
-webkit-box-sizing: border-box; /* height is not correct in Chrome */
/*-webkit-box-sizing: content-box; width is not correct in Chrome */
}
<table>
<tr>
<td>
<input type="text" value="this INPUT need to adapt to its parent TD">
</td>
</tr>
</table>

This is an odd one, but I think what you are seeing is a td with a fixed height of 100px, and border widths on top and bottom of 1px throwing off the child divs height 100% calculation.
Would it be possible to assign the height to the div instead of the td like below? This works for me in chrome.
table {
border-collapse: collapse;
width: 100%
}
td {
border: 1px #ccc solid;
}
div {
border: 1px #ccc solid;
height: 100px;
width: 100%;
box-sizing: border-box; /* works fine with IE8+ */
-moz-box-sizing: border-box; /* works fine Firefox */
-webkit-box-sizing: border-box; /* height is not correct in Chrome */
/*-webkit-box-sizing: content-box; width is not correct in Chrome */
}
<table>
<tr>
<td>
<div>BOX1</div>
</td>
<td>
<div>BOX2</div>
</td>
<td>
<div>BOX3</div>
</td>
</tr>
</table>

why not use simple css layouts rather than doing an over kill with tables?
Fiddle
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 100%;
}
.padding {
height: 100px;
}
.outer_border {
padding: 1px;
border: 1px solid black;
}
input {
border: 1px black solid;
height: 100%;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
HTML
<div class="container">
<div class="outer_border">
<div class="padding">
<input type="text" value="this INPUT need to adapt to its parent TD">
</div>
</div>
</div>

I'm actually looking for the answer to this question for quite a time now (since 2014). Lying around the internet are some post say that this is a bug of Chromium. I managed to recall a link here. Nonetheless, I doubt there will be answer soon.
Meanwhile, I would like to propose a quick and dirty fix for anyone who got in the same problem as me: For chrome, wrap all the INPUTs inside a DIV.
$(function() {
// if agent is of Chrome
var isChrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase());
if (isChrome) {
$("table td>:input").wrap($("<div>", {"class": "input-container"}));
}
});
table {
border-collapse: collapse;
width: 100%
}
td {
height: 100px;
border: 1px #ccc solid;
}
input {
border: 1px #ccc solid;
height: 100%;
width: 100%;
box-sizing: border-box; /* works fine with IE8+ */
-moz-box-sizing: border-box; /* works fine Firefox */
/*-webkit-box-sizing: border-box; height is not correct in Chrome
*-webkit-box-sizing: content-box; width is not correct in Chrome */
}
div.input-container {
height: 100%;
width: 100%;
-webkit-box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" value="this INPUT need to adapt to its parent TD">
</td>
</tr>
</table>

Replace a substring with a StringBuffer substring

I have a Huge string which is complete html obtained into a string by JSOUP.I have made changes to a substring of the html using String Bufer replace API(replace(int startIndex,int endIndex, "to be changed string).The String buffer is populated perfectly.But when I try to replace the substring of html with new String buffer it does not work.
Here is the code snippet.
html = html.replace(divStyle1.trim(), heightwidthM.toString().trim());
The initial big html is
<!DOCTYPE html>
<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="SAF" id="global-header-light">
<head>
</head>
<body>
**<div style="background-image: url(http://aka-cdn-ns.adtech.de/rm/ads/23274/HPWomenLOFT_1381687318.jpg);background-repeat: no-repeat;-webkit-background-size: 1001px 2059px; height: 2059px; width: 1001px; text-align: center; margin: 0 auto;">**
<div style="height:2058px; padding-left:0px; padding-top:36px;">
<iframe style="height:90px; width:728px;"/>
</div>
</div>
</body>
</html>
The divStyle1 string is
background-image: url(http://aka-cdn-ns.adtech.de/rm/ads/23274/HPWomenLOFT_1381687318.jpg);background-repeat: no-repeat;-webkit-background-size: 1001px 2059px; height: 2059px; width: 1001px; text-align: center; margin: 0 auto;
And the String buffer has value
background-image: url(http://aka-cdn-ns.adtech.de/rm/ads/23274/HPWomenLOFT_1381687318.jpg);background-repeat: no-repeat;-webkit-background-size: 1001px 2059px; height:720px; width:900px; text-align: center; margin: 0 auto;
does not work where divStyle is a substring of the last HTML(in String) and heightwidthM is a Stringbuffer value with which it has to be replaced.It doesnt throw any errors but it does not change it as well.
Thanks
Swaraj

This is very easy with JSoup
String html = "<!DOCTYPE html>\n<html xmlns:og=\"http://opengraphprotocol.org/schema/\" xmlns:fb=\"http://www.facebook.com/2008/fbml\" xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\" class=\"SAF\" id=\"global-header-light\">\n<head>\n\n</head>\n<body>\n\n\n**<div style=\"background-image: url(http://aka-cdn-ns.adtech.de/rm/ads/23274/HPWomenLOFT_1381687318.jpg);background-repeat: no-repeat;-webkit-background-size: 1001px 2059px; height: 2059px; width: 1001px; text-align: center; margin: 0 auto;\">** \n\n<div style=\"height:2058px; padding-left:0px; padding-top:36px;\">\n\n\n<iframe style=\"height:90px; width:728px;\"/>\n\n\n\n</div>\n</div>\n\n</body>\n</html>";
String newStyle = "background-image: url(http://aka-cdn-ns.adtech.de/rm/ads/23274/HPWomenLOFT_1381687318.jpg);background-repeat: no-repeat;-webkit-background-size: 1001px 2059px; height:720px; width:900px; text-align: center; margin: 0 auto;";
Document document = Jsoup.parse(html);
document.body().child(0).attr("style", newStyle);
System.out.println(document.html());

Coming back to my suggestion, if you don't mind trying, you can do something of this sort:
Document newDocument = Jsoup.parse(<your html string>, StringUtils.EMPTY, Parser.htmlParser());
Elements yourStyles = newDocument.select("div[style]"); // this will select all div with attributes style
yourStyles.get(0).attr("style", <your new value>); // this will get your first div and replace attribute style to your new value
System.out.println(newDocument.outerHtml());

Regarding the Link / text / image that stays static even when the webpage is scrolled

are there any Java script or any sample available for the Link / text / image that stays static even when the webpage is scrolled.
I am looking for something similar to the one on the bottom left side of the webpage borders(Helpful?, "Yes", "No").
http://www.ehow.com/facebook-for-business/
Regards,
Gourav

Try this code this may help you. but this code required lot more css and javascript code to make this same as ehow.
<style>
.mainDiv {
height: 1000px;
border: solid 1px #000000;
}
.fixDiv {
height: 250px;
width: 20px;
border: solid 1px #000000;
position: fixed;
margin-top: 200px;
}
</style>
<html>
<body>
<div class="fixDiv">h e l p f u l l? Yes No</div>
<div class="mainDiv">Gaurav</div>
</body>
</html>

This can be done using simple css
create a style for div with id="poll" and give this style
div#poll {
position: fixed;
left: 0;
top: 100px;
}
<div id="poll">
<img src="image.jpg" alt="image" class="contimage" border="0"/></div>
This div will be shown in the left side of the window

Creating CSS from a HTML file

I have an html file which contains many elements:
<div>
<div id="imgElt11289447233738dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1; LEFT: 795px; BORDER-LEFT: 0px; WIDTH: 90px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 186px; HEIGHT: 93px" lineid="lineid" y2="279" y1="186" x2="885" x1="795">
<img style="WIDTH: 90px; HEIGHT: 93px" height="21" alt="Image" src="../images//k03.jpg" width="25" name="imgElt11289447233738dIi15vNI1m6G" tag="img"></img></div>
<div id="imgElt11288263284216dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1; LEFT: 660px; BORDER-LEFT: 0px; WIDTH: 147px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 1964px; HEIGHT: 22px" lineid="lineid" y2="1986" y1="1964" x2="807" x1="660">
<img style="WIDTH: 147px; HEIGHT: 22px" height="21" alt="Image" src="../images//k03.jpg" width="25" name="imgElt11288263284216dIi15vNI1m6G" tag="img"></img></div>
<div id="txtElt11288262779851dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 2872735; LEFT: 250px; BORDER-LEFT: 0px; WIDTH: 95px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 1514px; HEIGHT: 18px" selectedindex="0" pos_rel="false" lineid="lineid" y2="1532" y1="1514" x2="345" x1="250" tag="div">
<p><strong><font face="arial,helvetica,sans-serif" size="2">Course Name</font></strong></p>
</div>
<div id="txtElt11288262309675dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1565881; LEFT: 40px; BORDER-LEFT: 0px; WIDTH: 430px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 1464px; HEIGHT: 34px" selectedindex="0" pos_rel="false" lineid="lineid" y2="1498" y1="1464" x2="470" x1="40" tag="div">
<p><strong>
<font face="arial,helvetica,sans-serif" size="2" tag="font">16. Please
write below the Course Name in order of preference.</font></strong></p>
<p tag="p"><strong><font face="Arial" size="2" tag="font"> (Please
see the "Instructions to Candidate" for list of courses)</font></strong></p>
</div>
</div>
As can be seen, 1 div has many divs in it. Now I want to create a css file that will contain all the styling of this html page (need not be same). Have to write something in java code. I have the DOM object of this file available to me.
Basically, I want all the styles to be removed from here and will be kept under a CSS file like for div with id = imgElt11289447233738dIi15v css will be:
#imgElt11289447233738dIi15v{BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1; LEFT: 795px; BORDER-LEFT: 0px; WIDTH: 90px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 186px; HEIGHT: 93px}
I am don't till this part but since I don't know how many levels of hierarchy of elements will be there is there any way to do the same for all child elements as well?
I used the following code
public static Document getStyleInCSSfile(Document aoDoc, String aoPathToWrite, String aoFileName) throws ApplicationException {
String loValue = null;
String loID = null;
String lsContent = "";
Element loRoot = aoDoc.getRootElement();
List loTempElementList = loRoot.getChildren();
int liCounter;
for (liCounter = 0; liCounter < loTempElementList.size(); liCounter++) {
Element loTemplateEle = (Element) loTempElementList.get(liCounter);
String loId=loTemplateEle.getAttribute("id").getValue();
loID = loTemplateEle.getAttributeValue("id");
if(null != loID)
{
loValue = loTemplateEle.getAttributeValue("style");
if(loValue!=null && loValue.trim().length()>0)
{
loTemplateEle.removeAttribute("style");
lsContent = lsContent.concat("#"+loID+"{"+loValue+"}\n");
}
}
}
SaveFormOnLocalUtil.writeToFile(aoPathToWrite,aoFileName,lsContent);
return aoDoc;
}
Edit : got to know that some regular expression may help by getting a string of SAX parser object and and using regular expression on it... any idea? any one? how to implement it

is it effective to define a style for each single tag?
if i were you i'd checked if any other tag has the same style and if all elements with one style had the same 'tag_name' i'd used the following:
tag_name{text-transform:uppercase;text-align:center;}
and every element with this tag name (if its' style isn't set in any other way) would have this style.
if there's a lot of different tags with the same style:
.class_name{text-transform:uppercase;text-align:center;}
<tag class="class_name">content</tag>

I think you should use SAX instead of DOM. In SAX you can register the handler that is called every time the parser sees new tag, attribute etc. In this case every time you see attribute "style" you should extract its value to CSS file.
The next approach is using Digester from jakarta.apache.org. It uses SAX and allows XML configuration (see DigesterDigester) that maps your value object directly yo your XML document.
Absolutely different solution may made using unix shell commands like grep and sed. The preference to one of the solution depends on your system requirements and how often do you have to run this code. If it is one time transformation use unix shell scripting. If it must be something robust and change the pages on the fly use java solution.