Site icon Vinsguru

Selenium WebDriver – How To Automate Responsive Design Testing

Overview:

In IoT era, where everything is integrated, It is almost impossible to find someone without a mobile device! Any user with an internet connection could potentially be a customer of your application. So, It is your job to ensure that they have a best user experience on your website.

Responsive web design makes your application look good on all the devices!

In the good old days we used to identify the functional test cases which are being executed in every cycle (smoke/regression tests) or data-driven test cases for automation. We used to avoid any UI related test cases as much as possible considering the difficulties in automating that. Now, in the fast paced application development and continuous production deployment, We can not avoid this any longer!

There are many commercial tools for this type of testing if your organization is ready to pay for it! If you are like me, looking for some open source solution, then I would like to show you, how I do the responsive web design testing using Ocular library.

Sample Application:

I am going to consider the few pages of the famous Netflix application for the responsive web design testing.

      

 

 

        

Baseline Images:

In order to do the responsive web design testing, we need to have the baseline images. If you do not have, It is fine. Ocular library, during the very first run, takes the screenshots and stores them in appropriate folders. So that, when you run next time, It uses those baselines to compare and gives the results.

We need to maintain the baselines for various dimensions/devices we are interested in as shown here.

Page Objects:

I create few page objects as shown here.

abstract class BasePage {

    protected final WebDriver driver;

    public BasePage(WebDriver driver) {
        this.driver = driver;
        PageFactory.initElements(driver, this);
    }

    public OcularResult compare() {
        return Ocular.snapshot()
                        .from(this)
                      .sample()
                           .using(driver)
                      .compare();
    }

}
@Snap("HomePage.png")
public class HomePage extends BasePage {

    @FindBy(css = "button.btn-large")
    private WebElement joinFreeForAMonth;

    public HomePage(WebDriver driver) {
        super(driver);
    }

    public SeeThePlans clickOnJoinButton() {
        this.joinFreeForAMonth.click();
        return new SeeThePlans(driver);
    }
}
@Snap("SeeThePlans.png")
public class SeeThePlans extends BasePage {

    @FindBy(css = "button.nf-btn-primary")
    private WebElement seeThePlansBtn;

    public SeeThePlans(WebDriver driver) {
        super(driver);
    }

    public PlanList clickToSeeThePlans() {
        this.seeThePlansBtn.click();
        return new PlanList(driver);
    }

}
@Snap("PlanList.png")
public class PlanList extends BasePage {

    public PlanList(WebDriver driver) {
        super(driver);
    }

}
public class ResponsiveDesignTest {
    
    WebDriver driver;

    @Test
    public void test() throws InterruptedException {
        
        HomePage home = new HomePage(driver);
        
        //verify home page
        Assert.assertTrue(home.compare().isEqualsImages());
        
        SeeThePlans seeThePlans = home.clickOnJoinButton();

        //verify 'Choose your Plan' message page
        Assert.assertTrue(seeThePlans.compare().isEqualsImages());
        
        PlanList planList = seeThePlans.clickToSeeThePlans();

        //verify Plans List page
        Assert.assertTrue(planList.compare().isEqualsImages());
    }
 

    @BeforeTest
    @Parameters({ "dimension"})
    public void beforeTest(String dimension) {
    
         //Ocular config - Ocular should look for the baseline image depends on the dimension or device
        Path snapShotPath = Paths.get("./src/test/resources/", dimension);
        Ocular.config()
                .snapshotPath(snapShotPath)
                .resultPath(Paths.get("./src/test/resources/result"));
    
        //Launch Browser with the dimension or use appium driver to test on mobile devices
        driver = new ChromeDriver();
        driver.get("https://www.netflix.com");
        
        int width = Integer.parseInt(dimension.split("x")[0]);
        int height = Integer.parseInt(dimension.split("x")[1]);
        
        driver.manage().window().setSize(new Dimension(width, height));
    }

    @AfterTest
    public void afterTest() {
        driver.quit();
    }

}

Summary:

Automating Responsive Web Application is important as the most of the users access the application through mobile devices only & it will keep growing in the future. I hope the above page objects design helped you to understand how we could we design this type of testing in our current automation framework.

 

Happy Testing & Subscribe 🙂

 

 

Share This:

Exit mobile version