Posts

Page scrolling using Selenium

Scrolling a webpage is required in automation when the application requires scrolling down or up to display additional information e.g. most of the e-commerce sites display only 10-20 products at a time and then load more products as the user scrolls down. In this tutorial we'll take example of flipkart website and automate the scrolling of webpage in order to fetch more results. In automation first we will launch filpkart.com, write a search term and then scroll down to fetch more results corresponding to that search term. Automating page scrolling will make use of "scrollBy" method of javascript. For executing the javascript method we will use Javascript executor. The scrollBy method takes two parameters one each for horizontal and vertical scroll in terms of pixels. JavascriptExecutor js = (JavascriptExecutor)driver; js.executeScript("scrollBy(0, 2500)"); Following test script automates flipkart's scroll down functionality to test display

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); /*