Testing web app or site automatically on different screen resolutions

There is time when you need to perform testing web app or site automatically on different screen resolutions. Today there are many online solutions that provide easy way of testing you site on different resolutions. It’s simple done using iframe with custom dimensions. But what if you need to test your site on couple of hundred different resolutions 🙂 ?

There is no better way to do that than using a automated test. Framework of choice for that is Selenium . It have numerous combination of programming language for creating tests with Selenium and web drivers.

Web drivers are responsible for communicating with certain browser. In this example I am using Java (NetBeans IDE) language and FireFox driver.

Step 1

First step is to create test Java project and import selenium_server jar to it.

Step 2

Create TestCase1 class with this content :

private WebDriver driver;
private String url;

Those fields are for storing “browser” object and url.

Preparing environment :

    
@Before
public void setUp() {
	// test url
	this.url = "http://www.google.com/";
	
	// ChromeDriver
	//System.setProperty("webdriver.chrome.driver", PATH_TO_CHROMEDRIVER);
	//driver = new ChromeDriver();
	
	driver = new FirefoxDriver();
	
	driver.get(this.url);
}
    

We are using FireFox for testing, you can use other driver i.e. chrome. Just uncomment that part and add path to google driver exe.

Finally there is test method :

    
@Test
public void testResolution() {
	driver.navigate().to(this.url);
	
	String[] resulutions = {
		"1366x768",
		"1920x1080"
		// add resolution
	};
	
	for (String resulution : resulutions) {
		String[] parts = resulution.split("x");
		
		// Screen resolution
		Dimension screenRes = new Dimension(Integer.parseInt(parts[0]),Integer.parseInt(parts[1]));
			
		// Set browser resolution
		driver.manage().window().setSize(screenRes);
			
		// little pause
		try {
			Thread.sleep(1000);
		} catch (InterruptedException ex) {
			//Logger.getLogger(TestClass.class.getName()).log(Level.SEVERE, null, ex);
		}
			
		driver.navigate().refresh();
		
		// little pause
		try {
			Thread.sleep(1000);
		} catch (InterruptedException ex) {
			//Logger.getLogger(TestClass.class.getName()).log(Level.SEVERE, null, ex);
		}
			
		this.takeScreenShot(resulution);
	}
	
}
    

And utilty method for taking screen shot of browser.

    

private void takeScreenShot(String fileName) {
        File screenShot = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
        try {
            FileUtils.copyFile(screenShot, new File(fileName + ".png"));
        } catch (IOException ioe) {
            throw new RuntimeException(ioe.getMessage(), ioe);
        }
}
    

Download class source : TestCase1.java

Step 3

After that just fire up test: right click on TestCase1.java and go to Test File or (Ctrl + F6). Result screen shots of site will be inside of project folder root. Named as <resolution>.png .

Notice that browser header dimension is different when browser is maximized and in custom windows dimension.