3

I am testing web apps for different screen sizes. Now i want to know is there a method by which this process can be automated or I need to do this manually for every screen size.

  • 2
    How are your programming skills? It seems to be a task of looping over a list of screen sizes, resizing window, and taking a screenshot. All trivial for any decent programmers. – Peter M. Oct 10 '17 at 14:24
  • What exactly are you testing? It would be easy to automate the process of taking the screenshots but I would think you would need to manually look at the screenshots to check they have sized correctly or whatever it is you're testing – K-8 Oct 11 '17 at 0:31
3

There are multiple ways to get a screenshot depending on whether you need a full page screenshot, whether the page requires some inputs to get the expected state and which device you are trying to simulate.

For instance changing the size of the window is not enough to simulate a mobile device since you'll also have to consider the pixel ratio and in some cases the user agent.

It can be as simple as launching the browser with a command line with Chrome:

chrome --headless --disable-gpu --screenshot --window-size=1280,1696 https://www.chromestatus.com/

or more advanced with a high-level API library like puppeteer which provides control over Chrome:

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];

(async() => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://www.google.com', {waitUntil: 'networkidle'});
  const screenshot = await page.screenshot({ fullPage: false });
  browser.close();
  fs.writeFileSync('./results/screenshot.png', screenshot);
})();

or more conventional with an automation library like Selenium available in multiple coding languages:

from selenium import webdriver

options = webdriver.ChromeOptions()
options.add_experimental_option("mobileEmulation", { \
    'deviceMetrics': { 'width': 360, 'height': 640, 'pixelRatio': 3.0 },
    'userAgent': "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19"
})
driver = webdriver.Chrome(chrome_options=options)
driver.get('http://stackoverflow.com/')
driver.get_screenshot_as_file('./results/screenshot.png') 
0

If you're comfortable with Selenium WebDriver you can write a snippet that will do this for you with some tweaking. Try checking this link out:

http://learn-automation.com/how-to-capture-screenshot-in-selenium-webdriver/

0

You can also do this using webdriver.io by setting different view port sizes in config file. You can define various widths and orientation for responsive tests.

You can refer to the code snippet here: http://webdriver.io/guide/services/visual-regression.html

0

Automatically taking website screenshots on multiple screen-sizes is easy to do with the free Kantu Chromium browser. I did a quick test, see the screenshot. The macro is essentially a sequence of SIZE x,y and SCREENSHOT file name statements, plus some WAIT statements in-between. In the lower half of the screenshot you see thumbnails of the output, five screenshots of different browser sizes.

As a bonus, if you need the screenshots for visual testing, you can use the FIND command to automatically assert/verify that things are displayed as expected.

enter image description here

This was done with the free version of the Kantu Visual Web Automation app which uses Chromium inside and is Windows only, not to be confused with the open-source selenium-ide-style chrome Kantu extension.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.