About this question
I am testing web apps for different screen sizes. Now I want to know if there is a method by which this process can be automated or I need to do this manually for every screen size?
I am testing web apps for different screen sizes. Now I want to know if there is a method by which this process can be automated or I need to do this manually for every screen size?
Log in to share your answer and help other learners.
Log in to answerBest Answer · By JanBask Cyber Security Expert
Answered on Feb 15, 2022
There are multiple ways to get automated screenshots 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')Free tutorials and interview questions from industry experts — learn the skill, then get ready to prove it.
Step-by-step Cyber Security guides from industry experts
Common Cyber Security interview questions, answered
Guides, tips and career advice on Cyber Security from JanBask experts.
Cyber Security Prepare with 100 Cyber Security Interview Questions & Answers
Boost your interview confidence learn answers to 101 common cybersecurity questions, from basics to advanced techniques.
Cyber Security AI in Cybersecurity: The Double-Edged Sword
Explore how AI is reshaping cybersecurity as a double-edged sword. Learn how attackers use AI for sophisticated threats and how…
Cyber Security Exploring the Advantages and Disadvantages of Ethical Hacking
Discover the key advantages and disadvantages of ethical hacking from enhancing security and regulatory compliance to potential…
Cyber Security Top Cyber Security Projects Ideas to Consider in 2025
Explore 19 practical cybersecurity project ideas for 2025, from AI threat detection to honeypots. Build skills, boost your…