checking the website is responsive or not using selenium and groovy, grails and java

Posted by Unknown On 9:02 PM
Views:



checking the website is responsive or not using selenium and groovy, grails and java
Here i am providing the way to find the given website is responsive or not using selnium and grails. We can acheive this in multiple ways
1. Screenshot comparison : Using selenium webdriver go to the given website url and change the browser to different sizes and compare the screenshots.If both screenshots are same then the given website is not responsive.If both screenshots are different then given website is responsive. This method is not good because Lets assume if slideshows are present in given website while taking the screenshots of that website, the slideshow images present in the given website may change and we will get different screenshots so if we compare the screenshots we will get result as both screenshots are different and we may get response as the given site is responsive

 2. The document width : Using selenium webdriver go to the given website url and change the browser to mobile device size and execute the javascript to get document width. If width is less than mobile devices maximum width we can assume that the given website is responsive

3. Screenshot width : Using selenium webdriver go to the given website url and change the browser to mobile device size and take the screenshot and get the width of the screenshot image. If width is less than mobile devices maximum width we can assume that the given website is responsive. I tested multiple sites with this approach and got the expected result Steps to check given site is responsive or not

1. Add selenium dependencies in BuildConig.groovy
compile 'org.seleniumhq.selenium:selenium-support:2.15.0'
compile 'org.seleniumhq.selenium:selenium-htmlunit-driver:2.25.0'
runtime('org.seleniumhq.selenium:selenium-java:2.29.1'){
 excludes "selenium-htmlunit-driver"
}

2. Create firefoxprofile 
 DesiredCapabilities capabilities = new DesiredCapabilities("firefox", "3.6.", Platform.LINUX);
 FirefoxProfile profile = new FirefoxProfile();

3. Create Remote Web Driver by specifying selenium server url 
driver = new RemoteWebDriver(new java.net.URL("http://127.0.0.1:4444//wd/hub"), capabilities);

4. Set the window size to mobile device size 
driver.manage().window().setSize(new Dimension(320, 480))

5. Open the url 
 driver.get(urlString)

6. Method 1 : Take the Screenshot and get the width of the screenshot. RemoteDriver doesnt implement the TAkeScreenShot class. If the driver does have the Capabilities to take a screenshot.Then Augmenter will add the TakesScreenshot methods to the instance 
File screenShot = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
BufferedImage bufferedImage = ImageIO.read(screenShot);
int width = bufferedImage?.width

Method 2 : Execute the javascript and get the document width 
 JavascriptExecutor js = (JavascriptExecutor)driver;
 int width = js.executeScript("return \$(document).width()")

7. Compare the width with mobile device maximum width 
//Asuming mobile device width is 480
boolean isResponsive = (width <= 480)

8. run the selenium server 
 java -jar seleniumserver.jar
Getting all together in one groovy class called MobileUtils.groovy. Make sure that you have given valid url otherwise validate the given url and show the error message if the given url is invalid 
class MobileUtils {
 import org.openqa.selenium.Platform
 import org.openqa.selenium.WebDriver
 import org.openqa.selenium.firefox.FirefoxDriver
 import org.openqa.selenium.firefox.FirefoxProfile
 import org.openqa.selenium.remote.DesiredCapabilities
 import org.openqa.selenium.remote.RemoteWebDriver
 import org.openqa.selenium.remote.Augmenter
 import org.openqa.selenium.Dimension
 import org.openqa.selenium.TakesScreenshot
 import org.openqa.selenium.OutputType
 import org.openqa.selenium.io.TemporaryFilesystem
 import java.awt.image.BufferedImage
 import javax.imageio.ImageIO

 //by taking screenshot and comparing width
 boolean isResponsiveByJs(String url) {
  WebDriver driver = null
  boolean isResponsive = false
  try {
   DesiredCapabilities capabilities = 
   new DesiredCapabilities("firefox", "3.6.", Platform.LINUX);
   FirefoxProfile profile = new FirefoxProfile();
   capabilities.setCapability(FirefoxDriver.PROFILE, profile);
   driver = 
 new RemoteWebDriver(new java.net.URL("http://127.0.0.1:4444//wd/hub"), capabilities);
   driver = new Augmenter().augment(driver);
   driver.manage().window().setSize(new Dimension(320, 480))
   driver.get(url)
   JavascriptExecutor js = (JavascriptExecutor)driver;
            int width = js.executeScript("return \$(document).width()")
   isResponsive = (bufferedImage?.width <= 480);
  } finally {
      //delete the temporary files created by selenium firefox profile
   TemporaryFilesystem.getDefaultTmpFS().deleteTemporaryFiles()
   driver?.quit()
  }
  return isResponsive
    }
 
 // by executing javascript
 boolean isResponsiveByScreenshot(String url) {
  WebDriver driver = null
  boolean isResponsive = false
  try {
   DesiredCapabilities capabilities = 
   new DesiredCapabilities("firefox", "3.6.", Platform.LINUX);
   FirefoxProfile profile = new FirefoxProfile();
   capabilities.setCapability(FirefoxDriver.PROFILE, profile);
   driver = new RemoteWebDriver(new java.net.URL("http://127.0.0.1:4444//wd/hub"), capabilities);
   driver = new Augmenter().augment(driver);
   driver.manage().window().setSize(new Dimension(320, 480))
   driver.get(url)
   File screenShot = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
   BufferedImage bufferedImage = ImageIO.read(screenShot);
   int width = bufferedImage.width
   isResponsive = (bufferedImage?.width <= 480);
   
  } finally {
      //delete the temporary files created by selenium firefox profile
   TemporaryFilesystem.getDefaultTmpFS().deleteTemporaryFiles()
   driver?.quit()
  }
  return isResponsive
 }
}
If you have better idea than these methods please let me know in comments.

Categories:

Site search