Develop Reference

Capture full webpage screenshot in selenium that has sticky header

I want to capture a full page screenshot of a webpage that has a sticky header.
Say for example https://www.flipkart.com/ site has the sticky header. I am using Ashot and it took the screenshot like the one below. https://www.flipkart.com/
You can see the header is appearing between the image
It would be really helpful if I could find any ideas on how to achieve

Try with shutterbug https://github.com/assertthat/selenium-shutterbug
There is a lot of options that you can use to crop the page.
First solution
Try with ignore-parts of the screen like 10px from top. You have to play with the tuneup.
Second solution is to edit CSS of the header element, the idea is to change his position to 'relative' so it will not be on top when scrolling.
This is how I did it.
Disable on-top header:
((JavascriptExecutor) driver).executeScript("$('.common-header').css('position', 'relative');");
BufferedImage img = Shutterbug.shootPage(driver, ScrollStrategy.BOTH_DIRECTIONS, 100, true)
.getImage();

Use ShutterBug to Take fullpage screenshot
Shutterbug.shootPage(driver,ScrollStrategy.WHOLE_PAGE,500).withName("FullPageScreenshot").save("/Users/machinename/Desktop/Screen2");
Required jars:
java-semver-0.7.0.jar , selenium-shutterbug-0.9.3.jar

This may help you.
Removing or changing the style property of the sticky header using JAVASCRIPT and taking the scrollable screenshot is not suggested as it is considered as standard way of testing and producing screenprint.
One best way is to use the JS and find the full page height viewport height, sticky header height and scroll and take the screenshot.
You can use the below code.
public void scrollTheStickyHeaderPage(){
/** This function scrolls and takes screenshot **/
JavascriptExecutor js = (JavascriptExecutor) driver;
int fullPageHeight = Integer.parseInt(js.executeScript
("return document.documentElement.ScrollHeight").toString());
int viewportHeight = Integer.parseInt(js.executeScript("return Math.max
(document.documentElement.clientHeight, window.innerHeight || 0)").toString());
int headerHeight = Integer.parseInt(js.executeScript("return Math.max
(document.getElementsByTagName('/**element**/')[0].clientHeight,
document.getElementsByTagName('/**element**/')[0].offsetHeight,
document.getElementsByTagName('/**element**/')[0].scrollHeight || 0)").toString());
int numofScrolls = (fullPageHeight/viewportHeight);
/** call your screenshot function **/
for(int i=1; i<=numofScrolls; i++){
js.executeScript("window.scrollBy(0,"+(viewportHeight-headerHeight)+")");
/** call your screenshot function **/
}
}

I have solved this issue by adding the below-mentioned CSS code in the inspect editor to the header sticky element. You can see the result on this page https://icrmsoftware.com/project/corporate-business-consulting-business-html-template
margin-top: -200px !important

How to use the browser's (chrome/firefox) HTML/CSS/JS rendering engine to produce PDF?

There are nice projects that generate pdf from html/css/js files
http://wkhtmltopdf.org/ (open source)
https://code.google.com/p/flying-saucer/ (open source)
http://cssbox.sourceforge.net/ (not necessarily straight pdf generation)
http://phantomjs.org/ (open source allows for pdf output)
http://www.princexml.com/ (comercial but hands down the best one out there)
https://thepdfapi.com/ a chrome modification to spit pdf from html from
I want to programatically control chrome or firefox browser (because they both are cross platform) to make them load a web page, run the scripts and style the page and generate a pdf file for printing.
But how do I start by controlling the browser in an automated way so that I can do something like
render-to-pdf file-to-render.html out.pdf
I can easily make this job manually by browsing the page and then printing it to pdf and I get an accurate, 100% spec compliant rendered html/css/js page on a pdf file. Even the url headers can be omitted in the pdf through configuration options in the browser. But again, how do I start in trying to automate this process?
I want to automate in the server side, the opening of the browser, navigating to a page, and generating the pdf using the browser rendered page.
I have done a lot of research I just don't know how to make the right question. I want to programatically control the browser, maybe like selenium does but to the point where I export a webpage as PDF (hence using the rendering capabilities of the browser to produce good pdfs)

I'm not an expert but PhamtomJS seems to be the right tool for the job. I'm not sure though about what headless browser it uses underneath (I guess it is chrome/chromium)
var page = require('webpage').create();
page.open('http://github.com/', function() {
var s = page.evaluate(function() {
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
var width = Math.max( body.scrollWidth, body.offsetWidth,
html.clientWidth, html.scrollWidth, html.offsetWidth );
return {width: width, height: height}
});
console.log(JSON.stringify(s));
// so it fit ins a single page
page.paperSize = {
width: "1980px",
height: s.height + "px",
margin: {
top: '50px',
left: '20px'
}
};
page.render('github.pdf');
phantom.exit();
});
Hope it helps.

Firefox has an API method for that: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/saveAsPDF
browser.tabs.saveAsPDF({})
.then((status) => {
console.log('PDF file status: ' + status);
});
However, it seems to be available only for Browser Extensions, not to be invoked from a web page.
I'm still looking for a public API for that...

Is an XSS attack possible when a script is displayed in an HTML textarea?

I have an HTML textarea in my UI (for a Java-based web app) where a user can enter any value. Once it is saved, it is displayed in the textarea (which is disabled) in the browser.
If a user enters any script as free text in the textarea, will it be executed as a script (even if the value is shown in the textarea, and not not as label/text)?

That depends on how you set the value of the textarea. In the HTML code, the content of the textarea is the text inside the element.
I've created a JSFiddle to demonstrate various ways to change the content of a textarea
<div><textarea id="e1"></textarea></div>
<div><textarea id="e2"></textarea></div>
<div id="e3"/>
var dangerous = '<scri' + 'pt>alert("Danger!");</scri' + 'pt>';
document.getElementById('e1').value = dangerous;
document.getElementById('e2').innerHTML = dangerous;
dangerous = '</textarea>' + dangerous;
var content = '<textarea>' + dangerous + '</textarea>';
document.getElementById('e3').innerHTML = content;
console.log('Done.');
This creates two textarea elements with a script inside (save) and an empty one.
In the last test, I close the textarea in the input and then append the script.
Interestingly enough, setting innerHTML is safe to use in this case: It doesn't execute scripts inserted in this way.
So as long as you do it in JavaScript, you're pretty safe. But usually, you render the DOM of the page on the server and then you must make sure you properly escape the content of the textarea because:
String unfilteredInput = "</textarea><script>alert(\"Danger!\");</script>";
out.write("<textarea>");
out.write(content);
out.write("</textarea>");
will execute the script.
Note: I also tried to demonstrate document.write() but that's not allowed in a JSFiddle. I'm pretty sure that document.write() is vulnerable to the same attack.

How to use javas built-in javascript engine to run script on a web-page?

I want to show lyrics for songs in my player. I used to use lyricsplugin.com because it had a lot of English and Russian lyrics, but recently they've changed their web-site from being a static page to an ajax-powered page. Searching lyrics follows this pattern:
http://www.lyricsplugin.com/winamp03/plugin/?artist=Linkin%20Park&title=Numb
It shows an empty page and this in body onload:
javascript:getContent('Linkin%20Park', 'Numb', '1281528101', '5e22e4e3979026a9af59ee16ff82fe1f')
while getContent looks like this:
function getContent(artist, title, time, check) {
xmlHttp = GetXmlHttpObject();
if(xmlHttp == null)
{
return;
}
var url = "content.php?artist=" + artist + "&title=" + title + "&time=" + time + "&check=" + check;
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
stateChanged() then puts response into corresponding div in the page.
So I guess I can download the page and build a DOM tree since it is XHTML. How do I use the built in rhino engine to execute the javascript and preferably override the stateChanged() function? I don't seem to be able to call that content.php script directly.
No other resource has that many lyrics (especially Russian) except for lyrics.wikia.com, but they don't allow screen scraping.
UPDATE:
lyricsplugin seems to be using justsomelyrics.com and there is a google custom search box. How can I access it from java?

The simplest is the SWT Browser component. Simply call setURL(String) and it will display the web page. This gives you a full fledged browser with Javascript and everything.

Update SVG file using Ajax, by retrieving some information from a Java Servlet

I have written a Java Servlet that retrieves a SVG image. The content type for this servlet is CONTENT_TYPE = "image/svg+xml";
This certain servlet is being integrated in a bigger (ADF11g) application as an inlineframe. The code should look familiar, if you are accustomed with JSP:
<af:inlineFrame source="servlet?Filename=TestSVG1&width=1024&height=1024"
inlineStyle="width
:#{session.graphSVGWidth}px; height:#{session.graphSVGHeight}px; border: none">
</af:inlineFrame>
This SVG contains a dyanmic popup that allows the user to interact "with the picture", by sending information to the server via Ajax calls.
For example this a part of JavaScript that is being used by the SVG:
function loadXMLDocPOST(params) {
var xmlhttp = getXmlHttp();
xmlhttp.open("POST", 'servlet', true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
/* Do something here */
}
else {
//alert('xmlhttp.status_r2=' + xmlhttp.status);
}
}
xmlhttp.send(params);
}
function editAction(Filename, Name){
loadXMLDocPOST(...)
}
The Ajax call is successful, but the problem is that after I trigger some actions from the SVG, I want to update the picture contained in the inline frame (the /* Do something here */)
So, how do I rerender the SVG, from inside the SVG :) ? The problem is that innerHTML is not working in SVG. document.write() is not working either. So do you have any suggestions ?

you can use parent.XXX to access the global variables and functions of the HTML document which includes that svg.
in this way, svg can interact with its contained html document.
for example:
parent.document.write()
works in svg!