For a website I have to assert the use of colours. The element is easy to find but I can't seem to figure out how to assert the color as the css uses psuedo code to generate the displayed color. I use the following to get to the element and retreive the color:
assertEquals("rgba(236, 117, 4 , 1)", driver.findElement(By.xpath("//*[#class='ab-toggle']")).getCssValue("color"));
The code on the page is:
<div class="ab-toggle">::before</div> //in chrome
<div class="ab-toggle"></div> //in firebug
The css:
.contenthere .ab-toggle::before {
color: #ec7504;
content: "▾";
display: inline-block;
font-family: "icons";
font-size: 1.6em;
line-height: 1;
margin-left: 0.3em;
vertical-align: middle;
}
If I run my code it returns a comparisonFailure:
org.junit.ComparisonFailure: expected:<[rgba(236, 117, 4 , 1)]> but was:<[rgba(34, 34, 34, 1)]>
I can see this colour in the CSS too but don't know how to go about getting the correct color from the assert statement
.contenthere a.expandable-toggle {
color: #222;
cursor: pointer;
I also tried to get to the element using a css selector instead of xpath, when I use the following:
assertEquals("rgba(236, 117, 4 , 1)", driver.findElement(By.cssSelector("div.ab-toggle ::before")).getCssValue("color"));
it results in a NoSuchElementException. And when I try:
assertEquals("rgba(236, 117, 4 , 1)", driver.findElement(By.cssSelector("div.ab-toggle")).getCssValue("color"));
it simply returns the old result, same as when I use xpath to locate the element
Related
I updated my code from iText 5.0 to iText 7 and html2pdf 2.0 according to this post. In earlier version rupee symbol was rendering properly, but because of css issue i changed the code. Now complete page is converting properly to pdf except rupee symbol.
Tried adding font in html style tag itself like * { font-family: Arial; }.
Changed value of rupee symbol from ₹, ₹ and also added directly ₹ , but no use.
My Html:
<html>
<head>
<style>
* { font-family: Arial; }
</style>
<title>HTML div</title>
</head>
<body>
<p style="margin-bottom: 0in; padding-left: 60px;">
<div style="font-size: 450%; text-indent: 150px;">
<strong>BUY <span style="color: #ff420e;">2</span> GET
</strong>
</div>
</p>
<div
style="float: left; display: inline-block; margin: 10px; text-align: right; font-size: 70%; line-height: 27; transform: rotate(270deg);">Offer
Expiry Date : 30/11/2017</Div>
<div
style="float: left; display: inline-block; margin: 10px; text-align: right; font-size: 350%;">
₹
<!-- ₹ -->
</div>
<div
style="float: left; display: inline-block; margin: auto; font-size: 1500%; color: red; font-weight: bold;">99</div>
<div
style="float: left; display: inline-block; margin: 10px; text-align: left; font-size: 250%; line-height: 10;">OFF</div>
<div
style="position: absolute; height: 40px; font-size: 250%; line-height: 600px; color: red; text-indent: 50px">Pepsi
2.25 Pet Bottle ltr</div>
<div
style="position: absolute; height: 40px; font-size: 245%; line-height: 694px; text-indent: 50px">
MRP: ₹ <span style="color: #ff420e;">654</span>
</div>
</body>
</html>
Java Code :
public class Test {
final static String DEST = "D://Workspace_1574973//POP//sample_12.pdf";
final static String SRC = "D://Workspace_1574973//POP//src//com//resources//test.html";
public static void main(String[] args) throws Exception {
createPdf(SRC, DEST);
}
public static void createPdf(String src, String dest) throws IOException {
HtmlConverter.convertToPdf(new File(src), new File(dest));
}
}
Earlier code, which was working with symbols.
log.info("Creating file start");
OutputStream file = new FileOutputStream(new File("font_check.pdf"));
Document document = new Document(PageSize.A4);
PdfWriter writer = PdfWriter.getInstance(document, file);
document.open();
InputStream is = new ByteArrayInputStream(fileTemplate.getBytes());
XMLWorkerHelper.getInstance().parseXHtml(writer, document, is);
document.close();
file.close();
log.info("Creating file end");
Is there any simple approach to achieve this, with minimal and optimized code ?
Because I've to generate thousands of pdf in one go, So the performance should not affect.
Please let me know, if anyone achieved this through latest version.
Edit : Also how to set particular paper type in this like A6, A3, A4 etc.
Hope you are not mad, because I don't have reputation to write simple comments... so I'll post a full answer instead. I parse HTML for my work, and I read SO sometimes. There is a lot on the subject regarding UTF-8 here. Most software systems support the "greater than char #256" (UTF-8) codes - for instance the Indian Rupee Symbol. However, most of the time the programmer has to include a specific request for such a desired behavior, explicitly.
In HTML, for instance - adding this line usually helps:
String UTF8MetaTag = "<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />";
Anyway, not having used HTMLToPDF - I might not be the right guy to post answers to your questions - but, because I have dealt with UTF-8 foreign language characters for three years, I know that setting a software setting to handle the 65,000 or so chars is usually VERY EASY, BUT ALSO ALWAYS VERY MANDATORY.
Here is an SO post about using HTMLToPDF and UTF-8 to handle Japanese Kanji characters. Most likely, it should handle all UTF-8, but that is not a guarantee.
HTML2PDF support for japanese language(utf8) is not working
Here are a few posts about it using HTML2PDF in PHP:
Converting html 2 pdf (php) using hebrew returns "???"
Having æøå chars in HTML2PDF charset
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.
Color Picker Field dropdown:
Should also need to be provided the functionality to add custom colors when clicking on the "More Colors" just like in MS Paint. Any out of the box solutions are also welcome.As far as i have checked in SenchaGXT am unable to find the correct implementation for this.
I was able to create this functionality using few edits of my own to the native components.I used a split button and attached a color menu to it and made it like a color picker.
SplitButton colorPicker = new SplitButton();
final ColorMenu colorMenu = new ColorMenu();
colorMenu.getPalette().addValueChangeHandler(new ValueChangeHandler<String>(){
public void onValueChange(ValueChangeEvent<String> event){
String color = event.getValue();
System.out.println("Color value is "+color);
StyleInjector.inject(".CustomColor1 > div > div { background-color: "+color+" !important; border-color: #c4c5c5 !important;} ");
colorMenu.hide();
}
});
colorPicker.setMenu(colorMenu);
colorPicker.setHeight(20);
colorPicker.setWidth(150);
StyleInjector.inject(".CustomColor1 > div {background:none !important; background-image:none !important; background-color: #FFFFFF !important; border-color: #c4c5c5 !important; border-width: 1px !important;} ");
colorPicker.setStyleName("CustomColor1");
and I have got the desired output like this.
So ,I have achieved what i wanted.
Happy coding!
I am customizing a label and placed the name of the label in the one cell of a grid and an asterisk(image) in the next cell.
<ui:image field="requiredImage" src="images/required_indicator.gif"/>
<ui:style type="com.equillore.mcmexternal.client.ui.IndicatorLabel.Style">
#sprite
.requiredAsterisk
{
gwt-image: 'requiredImage';
width: 7px;
height: 14px;
}
.labRequired
{
color:#B22222;
font-size:14;
font-style:normal;
font-weight:bold;
font-family: serif;
letter-spacing: 0.07em;
}
</ui:style>
<g:Grid >
<g:row>
<g:customCell>
<g:Label ui:field="label" addStyleNames="{style.labRequired}"/>
</g:customCell>
<g:customCell>
<g:Label addStyleNames="{style.requiredAsterisk}"/>
</g:customCell>
</g:row>
</g:Grid>
when I run this the asterisk image is however displayed in front of the label(labRequired) as well just after it. So it is displayed twice.
why is this happening and how can I get rid of the 'extra' astersik image?
Kind regards
<ui:image field="requiredImage" src="images/required_indicator.gif"/>
This line is actually inserting the image in the UIBinder. Remove it.
Instead add it as a managed resource in the client bundle.
https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#Image_Sprites
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