Posts

Take screenshots for failed test

While doing manual testing we always have the machine in front of us to check what happened when the test case failed. In automation we rely on the assertion message that we print in case of failure. In addition to that we can also have screenshot of the browser in case of failure due to assertion or unavailability of any web element.  The code to take the screenshot make use of getScreenshotAs method of TakesScreenshot interface. Following code will take screenshot of the webpage opened by webDriver instance.  File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);  FileUtils.copyFile(scrFile, new File("D:\\testScreenShot.jpg"));  Now in order to take screenshot in case of test failure we will use AfterMethod annotation of TestNG. In the AfterMethod annotation we will use ITestResult interface's getStatus() method that returns the test result and in case of failure we can use the above commands to take screenshot. Code snippet to take screensh

TestNG Listeners

http://examples.javacodegeeks.com/enterprise-java/testng/testng-listeners-example/ http://www.toolsqa.com/selenium-webdriver/testng-listeners/ https://rationaleemotions.wordpress.com/2012/01/27/listen-to-what-i-have-to-say-about-testng-listeners/

JavaScript to fetch CSS from WebPage

CSS Solved a Big Problem HTML was NEVER intended to contain tags for formatting a document. HTML was intended to  define the content  of a document, like: <h1>This is a heading</h1> <p>This is a paragraph.</p> When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. In HTML 4.0, all formatting could (and should!) be removed from the HTML document, and stored in a separate CSS file. Ex – <!DOCTYPE html> <html> <head> <style> p {     text-align: center;     color: red; } </style> </head> <body> <p>Every paragraph will be affected by the style.</p> <p id="para1">Me too!</p> <p>And me!</p> </body> </

Image analysis and comparison

Resemble.js analyses and compares images with HTML5 canvas and JavaScript. Resemble.js can be used for any image analysis and comparison requirement you might have in the browser. However, it has been designed and built for use by the PhantomJS powered visual regression library PhantomCSS. PhantomCSS needs to be able to ignore antialiasing as this would cause differences between screenshots derived from different machines. Resemble.js uses the HTML5 File API to parse image data, and canvas for rendering image diffs. Get it npm install resemblejs bower install resemblejs Example Retrieve basic analysis on image. var api = resemble(fileData).onComplete( function ( data ){ console .log (data); /* { red: 255, green: 255, blue: 255, brightness: 255 } */ }); Use resemble to compare two images. var diff = resemble(file).compareTo(file2).ignoreColors().onComplete( function ( data ){ console .log (data); /*

What is xPath

Image
XPath  is a language that describes a way to locate and process items in Extensible Markup Language ( XML ) documents by using an addressing syntax based on a path through the document’s  logical structure or hierarchy . XPath in used in Selenium  to uniquely identify an element on a Webpage as element locator just like the way we use PostCode and House address in real world to locate Home Address. What is Firebug Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. The whole content of this page is taken from the https://getfirebug.com/html. Why it is Useful to Selenium Automation Tester 1) View source live :  Firefox has a “View Source” window, but it doesn’t show you what the HTML source really looks like once it has been transformed by JavaScript. Firebug’s HTML tab shows you what the HTML looks like  right now . 2) See changes hi