We Keep Coding

Selenium: Capture DOM Elements Image

I have an API to capture the image of a particular element in DOM and return them. For that, I have a list of WebElements which needs to be captured into a single webpage. For that same, I have found the solution here which works fine if an element is visible on the screen (no need to scroll down to see it).
driver.get(urltoconnect);
WebElement ele = getElement();
// Get entire page screenshot
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
BufferedImage fullImg = ImageIO.read(screenshot);
// Get the location of element on the page
Point point = ele.getLocation();
// Get width and height of the element
int eleWidth = ele.getSize().getWidth();
int eleHeight = ele.getSize().getHeight();
// Crop the entire page screenshot to get only element screenshot
BufferedImage eleScreenshot= fullImg.getSubimage(point.getX(), point.getY(), eleWidth, eleHeight);
ImageIO.write(eleScreenshot, "png", screenshot);
// Copy the element screenshot to disk
File screenshotLocation = new File("C:\\images\\GoogleLogo_screenshot.png");
FileUtils.copyFile(screenshot, screenshotLocation);
But the cases where I need to scroll down to see element results in java.awt.image.RasterFormatException: (y + height) is outside of Raster. So I have added this.
What I have tried
//All Results in java.awt.image.RasterFormatException: (y + height) is outside of Raster
//scroll the page until the mentioned element is visible on the current page.
js.executeScript("arguments[0].scrollIntoView();",element);
//This will scroll down the page by 450 pixel vertical
js.executeScript("window.scrollBy(0,450)");
//AShot
Screenshot fpScreenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(400)).takeScreenshot(driver);
ImageIO.write(fpScreenshot.getImage(),"png",new File("image.png"));
Question is how can I capture the Image of particular elements where some elements need to be scrolled. Please note that I have multiple elements with there By.id, By.name, By.xpath for multiple sources so I can't set fullImg.getSubimage(x,y,w,h) by y+100 or something as this might work for one webpage but not for others. Any Help will be appreciated.
System.setProperty("webdriver.chrome.driver", "F:\\chromedriver");
WebDriver driver = new ChromeDriver();
driver.get("https://www.testing-whiz.com/demoscripts/basic-element.html");
WebElement ele = getElement();
// Get entire page screenshot
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
BufferedImage fullImg = ImageIO.read(screenshot);
// Get the location of element on the page
Point point = ele.getLocation();
// Get width and height of the element
int eleWidth = ele.getSize().getWidth();
int eleHeight = ele.getSize().getHeight();
// Crop the entire page screenshot to get only element screenshot
try {
BufferedImage eleScreenshot= fullImg.getSubimage(point.getX(), point.getY(), eleWidth, eleHeight);
ImageIO.write(eleScreenshot, "png", screenshot);
}catch (Exception e) {
js.executeScript("window.scrollBy(0,450)");
//point.getY() = 732 //From console y = 492.8000183105469 after scroll https://stackoverflow.com/a/38767558/10961238
//raster.getHeight() = 613
BufferedImage eleScreenshot= fullImg.getSubimage(point.getX(), point.getY(), eleWidth, eleHeight);
ImageIO.write(eleScreenshot, "png", screenshot);
}
// Copy the element screenshot to disk
File screenshotLocation = new File("F:\\Images\\1.png");
FileUtils.copyFile(screenshot, screenshotLocation);
Backend: Spring Boot (Java 11)
Frontend: Angular

WebElement extends TakesScreenshot, which means you can use getScreenshotAs on the WebElement directly. You can
public void takeElementScreenshot(WebElement element) {
driver.executeScript("arguments[0].scrollIntoView();", element);
File screenshot = ele.getScreenshotAs(OutputType.FILE);
//...
}
You can check if the element is in viewport before scrolling, but I don't think it's necessary, just scroll every time

Photoshop JavaScript: options to open a PDF as smart object

I'm trying to open a PDF file as a smart object layer in Photoshop (CS5). Croped to the trimbox.
It works when using openDialog() and open().
But in case the property asSmartObject is true the PDFOpenOptions.cropPage = CropToType.TRIMBOX will be ignored.
There have to be options to open as smart object, like the PDFOpenOptions.
But I can't find them, did you?
My page should be croped to the trimbox with a minimum height/width of 400 px. Open the PDF as rendered pic won't work, because PDFOpenOptions.height ist deprecated for CS5 (and newer).
I don't want to render with a higher resolution, the PDF could be a small business card or a huge poster. Opening a file should be fast. This is why I choosed "open as smart object".
var openPDF = File.openDialog (undefined, undefined, false);
var openPDFoptions = new PDFOpenOptions;
openPDFoptions.antiAlias = true;
openPDFoptions.bitsPerChannel = BitsPerChannelType.EIGHT;
openPDFoptions.cropPage = CropToType.TRIMBOX;
openPDFoptions.mode = OpenDocumentMode.RGB;
openPDFoptions.name = "unnamed";
openPDFoptions.page = 1;
openPDFoptions.resolution = 72;
openPDFoptions.suppressWarnings = true;
openPDFoptions.usePageNumber = true;
app.open (openPDF, openPDFoptions, false)

How to open target="_blank" full screen?

I am trying to open new page with full screen. Below size is the my screen resolution. Still I have to click on re-sizable button on the browser to expand it to full screen.
How do I open it fill screen without clicking on re-sizeble?
Helper.Redirect("resource.aspx", "_blank",
"menubar=0,scrollbars=1,width=1366,height=768,top=10")
Method
Public Shared Sub Redirect(url As String, target As String, windowFeatures As String)
Dim context As HttpContext = HttpContext.Current
If ([String].IsNullOrEmpty(target) OrElse target.Equals("_self", StringComparison.OrdinalIgnoreCase)) AndAlso [String].IsNullOrEmpty(windowFeatures) Then
context.Response.Redirect(url)
Else
Dim page As Page = DirectCast(context.Handler, Page)
If page Is Nothing Then
Throw New InvalidOperationException("Cannot redirect to new window outside Page context.")
End If
url = page.ResolveClientUrl(url)
Dim script As String
If Not [String].IsNullOrEmpty(windowFeatures) Then
script = "window.open(""{0}"", ""{1}"", ""{2}"");"
Else
script = "window.open(""{0}"", ""{1}"");"
End If
script = [String].Format(script, url, target, windowFeatures)
ScriptManager.RegisterStartupScript(page, GetType(Page), "Redirect", script, True)
End If
End Sub
I tried 'fullscreen=yes, scrollbars=yes,location=yes,resizable=yes' parameters. It did not work.

Try:
window.open('newWin.html','NewWindow','fullscreen=yes');
Source:
Here

I had this same problem is simples just change this
Dim script As String
If Not [String].IsNullOrEmpty(windowFeatures) Then
script = "window.open(""{0}"", ""{1}"", ""{2}"");"
Else
script = "window.open(""{0}"", ""{1}"");"
End If
For this:
if (!String.IsNullOrEmpty(windowFeatures))
{
script = #"var w = window.open(""{0}"", ""{1}"", ""{2}""); w.moveTo(0,0); w.resizeTo(screen.width,screen.height-40);";
}
else
{
script = #"var w = window.open(""{0}"", ""{1}""); w.moveTo(0,0); w.resizeTo(screen.width,screen.height-40);";
if you want to is just put the property resizeto and moveTo

How to find when reportviewer is loaded using reportviewer api

I have created a single page for all my reports and I am loading different versions of those reports (line, pie, chart, graph, etc) with a toolbar I made. All is working well there, except on the non-table type charts (line,pie,bar,etc). When those get rendered, I found that the text in the legends and series become blurry and through some research here and other places found that they are converted to images, which are then getting resized on me though a css class that is auto generated.
Firstly, what i'm trying to do:
I want to remove this class from the image that is generated at the time it is loaded. If i turn off async rendering on my report
AsyncRendering="false"
Along with this bit of jquery (targeting the div that contains the reportviewer):
$(document).ready(function () {
$('#reportDiv img').removeAttr('class');
});
Then the result is as expected. The image is not scaled and all is well. The problem, however, is that some of these reports may be quite large, resulting in the user not having any visual feedback of whether or not something is happening. I would like to continue using async rendering, so I started to look at the reportviewer javascript api.
Sys.Application.add_load(function () {
var reportViewer = $find("ctl00_mainContentPlaceHolder_ReportViewer1");
reportViewer.add_propertyChanged(viewerPropertyChanged);
});
function viewerPropertyChanged(sender, e) {
var viewer = $find("ctl00_mainContentPlaceHolder_ReportViewer1");
if (e.get_propertyName() === "isLoading") {
var button = document.getElementById("ctl00_mainContentPlaceHolder_ctlReportParamModuleId1_btnRunReport");
button.disabled = viewer.get_isLoading();
}
else {
if ($find("ctl00_mainContentPlaceHolder_ReportViewer1").get_reportAreaContent() == Microsoft.Reporting.WebFormsClient.ReportAreaContent.ReportPage) {
alert("here");
}
}
}
The first portion (isLoading) works as expected disabling the button. However immediately upon load I get
Object doesn't support property or method 'get_reportAreaContent'
Am I missing something obvious? These are the links from msdn that I used for reference:
reportviewer isLoading
reportviewer ReportAreaContentType

Bar graphs, Line graphs, pie charts, etc. are rendered as images. The images get re-sized based on the size of the report viewer control. Instead of using AsyncRendering="false", I created this javascript workaround and it has solved my problem.
var app = Sys.Application;
app.add_init(ApplicationInit);
function ApplicationInit(sender) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (!prm.get_isInAsyncPostBack()) {
prm.add_endRequest(EndRequest)
}
}
function EndRequest(sender, args) {
var reportViewerControlId = "ReportViewer1";
if (sender._postBackControlClientIDs[0].indexOf(reportViewerControlId) >= 0) {
var reportViewerControlContainer = "reportViewerContainer"; // Id of <DIV>
var renderedReportImage = $("#" + reportViewerControlContainer + " img");
renderedReportImage.removeAttr("style").removeAttr("class");
var styleAttr = renderedReportImage.attr("style");
var classAttr = renderedReportImage.attr("class");
if (typeof styleAttr === 'undefined') {
console.log("Successfully removed the style attribute from the rendered report image!");
}
if (typeof classAttr === 'undefined') {
console.log("Successfully removed the class attribute from the rendered report image!");
}
}
}
Basically, I am listening to the endRequest of the PageRequestManager for my ReportViewerControl's ID, then simply removing the style and class attributes from the image to display it unmodified.

GWT IFrame Javascript error

I have a gwt module I'm trying to load into my host page. It's a pretty standard routine:
public class TimeFvHelper implements EntryPoint {
/**
* This is the entry point method.
*/
public void onModuleLoad() {
ChargeToTreePresenter presenter = new ChargeToTreePresenterImpl(new ChargeToTree());
RootPanel.get("divPicker").add((Widget)presenter.getView());
}
Usually it works fine with out problem. However when i open the webpage using IE9, first time I have no problem. However if I reload the page or back out then come back in i get the following error:
Unable to get value of the property 'location': object is null or undefined
This is in the nocache.js file generated during compilation, specifically in the maybeInjectFrame() method:
var frameInjected;
function maybeInjectFrame(){
if (!frameInjected) {
frameInjected = true;
var iframe = $doc.createElement($intern_36);
iframe.src = $intern_37;
iframe.id = $intern_1;
iframe.style.cssText = $intern_38;
iframe.tabIndex = -1;
$doc.body.appendChild(iframe);
$stats && $stats({moduleName:$intern_1, sessionId:$sessionId, subSystem:$intern_2, evtGroup:$intern_8, millis:(new Date).getTime(), type:$intern_39});
iframe.contentWindow.location.replace(base + initialHtml); // <-- Here
}
}
I've seen alot of posts in the last two days saying that IE9 has issues with iframes. Is that what's going on here? Any ideas of a workaround?
-Ian

Try using the xsiframe linker instead of the default std one.
It still uses an iframe for sandboxing (so that scripts loaded in the page have no impact on GWT's code) but do not change the iframe's location (it instead writes into the iframe); and it has many more features: http://code.google.com/p/google-web-toolkit/issues/list?can=1&q=xsiframe+status%3AFixed

I see the same problem, and I don't have a solution.
But here is the code including the values of the intern'ed strings.
function maybeInjectFrame(){
if (!frameInjected) {
frameInjected = true;
var iframe = $doc.createElement('iframe');
iframe.src = "javascript:''";
iframe.id = 'application';
iframe.style.cssText = 'position:absolute;width:0;height:0;border:none';
iframe.tabIndex = -1;
$doc.body.appendChild(iframe);
$stats && $stats({moduleName:'application', sessionId:$sessionId, subSystem:'startup', evtGroup:'moduleStartup', millis:(new Date).getTime(), type:'moduleRequested'});
iframe.contentWindow.location.replace(base + initialHtml);
}
}