How to highlight the area while taking Screen shot? - selenium

Is there any way to highlight the components in screen shot when a test case is passed or failed in for a particular test.
I am using below method to take screen shot.
private void writeScreenshotToFile(WebDriver driver, File screenshot) {
try {
FileOutputStream screenshotStream = new FileOutputStream(screenshot);
screenshotStream.write(((TakesScreenshot) driver).getScreenshotAs(OutputType.BYTES));
screenshotStream.close();
} catch (IOException unableToWriteScreenshot) {
System.err.println("Unable to write " + screenshot.getAbsolutePath());
unableToWriteScreenshot.printStackTrace();

Please keep in mind that there are many reasons that can cause failure, like timeout, Wedbriver exception, stale element, element not found, etc..
I can't see how anything from that list can be highlighted so it will make sense. What can you highlight if the element you were looking for is not there? Or what to highlight when timeout occurs? The whole page?
Regardless, if you want to highlight a specific element, have a look at this answer here.

Just to give you some hints and ideas.
The screen shot is a image which contains the component you know as a text like a list of result of some text. If you know the text value of the element and you know the error comes from expected result which does not match the page and NOT other underlying selenium exceptions; there is a java library which called Java OCR
that extract text from image. Now having the text found on the image, it will give you the text location; using java 2D api, you make some off set and market the surrounding area of the text location inside the image file.
Hope this can help.
Alan Mehio
London, UK

As Eugene stated, for some types of Exceptions it is not appropriate to highlight a screenshot (for example, if an element you expect to be on the page is not there). However, there are lots of situations where you may want to highlight an element, such as if the text of an element is not what you expect.
Rather than highlighting something in the actual screenshot, it is possible (using Javascript) to highlight the element on the page itself. You can then take a screenshot and the highlighting will be visible.
An explanation of how to do this can be found here: https://www.qaautomation.co.in/2018/11/highlight-element-in-screenshot-store-selenium.html.

Related

safari OSX voiceover not reading aria label for input

I'm trying to get voiceover to work on safari however, it seems when I tab through elements it doesnt read out the aria-label of the new input box in a certain scenario.
Scenario:
When tabbing onto the next element and the on blur of the current element does something to the dom then it will not read out the aria-label of the next element.
Here is an example
http://plnkr.co/edit/x0c67oIl0wlQEguBIQVZ?p=preview
Notice if you take out the onblur function below then it works fine.
<input id="test" onblur="blurer()" onfocus="focuser()"/>
In this case, the issue isn't the presence of a blurer, but rather the contents of your blurer and corresponding focuser functions. Together these two functions are toggling the hidden state of a nearbye element. This is interupting the announcement. There's a role announcement that also occurs. The full annoucement (when text is populated in the edit text control) should be:
"The edited text" contents selected/unselected, "your aria label", edit text.
The quoted portions are parts you control, the other portions are parts controlled by the OS/VoiceOver's interaction with it, calculated automatically by the state of the control and other aria values.
The announcement we're getting is simply
"The edited text"
So, it's not an issue with the aria-label specifically. But rather, you are causing the entire announcement of the element to be interrupted.
When your blur and focus functions trigger you muck with the VoiceOver's response (or the OS's communication of) these events. Not sure what about your functions is causing this. Regardless, a trick that helps in these circumstances is to add a setTimeout to your code. By separating your function and the actual focus/blur event, you can allow the accessibility APIs to do their thing, before mucking with styles and such on the page. Here is an example that makes your little code snippet work. Just replace the contents of your javascript file with this:
function blurer(){
window.setTimeout(function() {
document.getElementById('myDiv').style.display = 'none';//
}, 0);
}
function focuser(){
window.setTimeout(function() {
document.getElementById('myDiv').style.display = 'block';//
}, 0);
}
In general I like to avoid setTimeouts because they create race conditions. However, setTimeouts of 0 are acceptable, because there is no race condition. You're just decoupling the firing event and the execution of your code by pushing your code to the end of the queue. When hacking around VoiceOver, setTimeout(someFunction, 0) works quite well for a lot of cases.

SVG and selenium

Hej Guys
I an using google visualization api to draw stacked bar chart. Its all fine but now i want to test it with selenium but having a hard time finding the elements in the google chart.
For example i want to click on the chart element but everytime i try to find an element by xpath i get exception "OpenQA.Selenium.NoSuchElementException: The element could not be found"
I read that with selenium its tricky to click on the svg images.
Is there anybody who know a solution cuz i m kind of desprate and i havent find a suitable solution on the net by myself.
My chart looks like this:
http://i48.tinypic.com/21o4swx.png
What i am trying todo is:
webdriver.Navigate().GoToUrl("http://localhost:59777/Tests/TestsMainView");
IWebElement element = webdriver.FindElement(By.XPath("/html/body/div/div[2]/div[2]/iframe/html/body/div/svg/g[2]/g/g[2]/rect[5]"));
Actions myAction = new Actions(webdriver);
myAction.Click(element).Perform();
Thread.Sleep(9999);
Thanks :)
Here is some advice that may help you. First your second line of code is should be
WebElement element = webdriver.FindElement(By.xpath("//img[contains(#src,'http://i48.tinypic.com/21o4swx.png')]"))
You had "IWebElement" (this was probably just a typo in your question). I changed the way the element is found searching for matching element instead of starting at the top level and working down. This is a better practice to narrow down the element you are attempting to interact with so that changes to the code don't instantly break your test. Also unless you start an xpath expression off with "//" or "xpath=" selenium Webdriver will not recognize it so even if your path never changed selenium Webdriver wouldn't be able to find it.
If I understand what you are trying to do then you can also remove lines 3-5 and replace them with the following,
element.click();
This will have selenium Webdriver zoom in on the chart provided by your link. I hope this helps
I noticed xpath cannot select anything within an svg tag. I managed to find elements using className or tagName selectors instead or you could even try cssSelectors but I am not sure about that one. Note that you can still use xpath to access parents of a node inside an svg using:
By.xpath("..");
Hope that will help.

How to click on Toolbar Item with selenium?

Web page contain a button with some text for example "Test". This button actually is a toolbar element. ( class ="tbButton" id="id",text="Test") and redirects to a certain table when press on it.
When try to use the following click methods
selenium.click("id");
selenium.doubleClick("id");
selenium.click("//*[text()='Test'and contains(#class, 'tbButton')] ");
the button does not react
Could enybody show an alternative methods that is able to resolve a problem
It's hard to know exactly what the problem is without knowing more about the actual contents of the page you are testing. Is there an example of the toolbar online somewhere?
With modern interfaces, locating elements with Selenium is not always an exact science. Here are a few suggestions:
With modern interfaces you often find that the DOM is being manipulated, so it is possible that the identifier you are using is no longer valid by the time you get to your click(). Use Firebug to check that you have the correct element.
Often it helps to click on the parent of the element, such as a div or the parent table cell. Again, use FireBug, to try some other elements near your toolbar button. Alternatively, Firebug sometimes reveals that the element contains other elements. You might have more luck changing the target to a contained element instead.
Sometimes you have to play around with some of the alternative actions. For instance, some controls respond to a mouseDown() followed by a mouseUp(), but not to a click(). Again you can often get hints from looking at the source with Firebug.

How would you verify that a certain css element on a page is a certain image with selenium

I have a page that I want to check with selenium that uses a certain background image for one element. I want to ensure that this image still exists on the page connected to the element. How would I do this with selenium. If this changes anything I am using browsermob.com to do the testing once I get it running through selenium ide.
Well aside from the suggested things on the almos duplicate issue... You could check if the property of your body element is set to the image.
By if getAttribute returns a valid value or not. Like:
new Wait()
{
public boolean until()
{
return selenium.getAttribute("ElementLocator")
+ "#class").equals("active");
}
}.wait("The menu item did not get active.",
defaultTimeOutValue);
This will wait for the attribute #class to have the value "active".
Or simply use an If statement after you are sure that the page got loaded.
Hope this helps,
Cheers,
Gergely.

Dojox.grid.DataGrid - in a widget - only renders on visible tab

I am using a Widget that contains a DataGrid object. The Widget works fine when included in the first tab (this is the visible tab), but not when I use the same code on a second tab.
The code is the same I have done several checks to make sure there are no other problems - and non Grid code is rendering fine - only the grid that has a problem. I have tried setting the height and width manually and this just results in a large grey rectangle on the second tab.
Do I need to tell the Grid to refresh in some way - or is it a property for the TabContainer?
Help - this is driving me mad!
Yeah, that's a big problem with the grid. If you use it declaritively in a tab container, it won't render properly on the non-visible tabs. It needs to calculate height/width (even though you specify them)...as you have seen.
The way I got around it was to create the grids programatically on tab select. I posted about my solution on the dojo forums. My code sample is over on github. It's a bit too large to post here methinks. Let me know if you want it, and i'll edit my answer.
There's also a discussion on nabble with a different solution.
"resize" works like a charm! Been looking for this for a long time (didn't know what I had to search for), thanks.
I use this routine to dynamically determine if the tab has more than one datagrid, as I may not know the ID of one single grid, maybe someone else might use that, too:
dojo.query('div#container div[id^="gridNode_"]').forEach(function(node, index, arr) {
dijit.byId(node.id).resize();
});
This will check the div with id="container" (skip that part if you want to search the whole DOM) for divs with an id starting with "gridNode_" and apply "resize" to those widgets.
An alternate approach is to resize the grid upon tab element selection. Sample code
dojo.connect(dijit.byId('my_tab_container'), "selectChild", function(child){
// if second tab (could be any...) selected
if(child.id == 'mySecondTabId'){
var myGrid = dijit.byId('myGridInsideTabId');
if(myGrid != null) myGrid.resize();
}
});