How to save mobile screenshot using Headless Google Chrome with Selenium

Question

from selenium import webdriver
options = webdriver.ChromeOptions()
options.add_argument('--headless')
options.add_argument('--disable-gpu')
mobile_emulation = {
                "deviceMetrics": {"width": 360, "height": 640, "pixelRatio": 3.0},
                "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1"}
options.add_experimental_option("mobileEmulation", mobile_emulation)
driver = webdriver.Chrome(options=options)
driver.get('https://stackoverflow.com/')
driver.save_screenshot('test.png')

Hello, The Image being taken by selenium is cut with page scroll (up/down & right/left) bars appearing, is there any way of taking screenshot of mobile view using selenium ?

EDIT:1

pastebin html test

for browser I adjust the width

required_width = driver_selected.execute_script('return document.body.parentNode.scrollWidth')

for mobile

required_width = driver_selected.get_window_size().get('width') # Keep same

finally on both

required_height = driver_selected.execute_script('return document.body.parentNode.scrollHeight')
driver_selected.set_window_size(required_width, required_height)
driver_selected.find_element_by_tag_name('body').screenshot(png_file)

Answer 1

If you want to take a full-screen screenshot of the webpage, you can use this.

The description of the problem you are experiencing isn't clear, so I'm assuming you want to hide the scroll bars and prevent them from appearing on the screenshot Selenium produces.

"""Take a full-page screenshot of the browser"""

# Save the original window size so we can restore it later
original = self.driver.get_window_size()
# Format the original in a tuple object we can use later
original = (original['width'], original['height'],)

# Get the height that's needed in order to fully render the page
newheight = int(self.driver.execute_script("""
return Math.max(
    document.body.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.clientHeight,
    document.documentElement.scrollHeight,
    document.documentElement.offsetHeight
);
"""))

# Set the new height
# Most responsive webpages handle width flawlessly, so you can use a constant width
# You can also set it dynamically if you wish
self.driver.set_window_size(1000, newheight)

# Hide the main scrollbar using some css tricks
# You can also inject a
# <style>* {overflow: hidden}</style>
# to hide all scrollbars if you want 
self.driver.execute_script("""
document.body.parentElement.style.overflow = "hidden";
""")

# b64ss = self.driver.get_screenshot_as_base64()
# print(b64ss)
# The screenshot must be saved to a file because base64 has
# size restrictions that usually cause an incomplete screenshot

self.driver.save_screenshot('mobile_fullpage_screenshot.png')

# Restore the original window sizes
self.driver.set_window_size(*original)

Answer 2

That should work

from selenium import webdriver


def full_screenshot(driver, save_path):
    original_size = driver.get_window_size()
    required_width = driver.execute_script('return document.body.parentNode.scrollWidth')
    required_height = driver.execute_script('return document.body.parentNode.scrollHeight')
    driver.set_window_size(required_width, required_height)
    driver.save_screenshot(save_path)
    driver.set_window_size(original_size['width'], original_size['height'])


options = webdriver.ChromeOptions()
options.add_argument('--headless')
options.add_argument('--disable-gpu')
mobile_emulation = {
    "deviceMetrics": {"width": 360, "height": 640, "pixelRatio": 3.0},
    "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1"
}
options.add_experimental_option("mobileEmulation", mobile_emulation)
driver = webdriver.Chrome(options=options)
driver.set_window_size(360, 640)  # Set the window size to match the mobile viewport dimensions
driver.get('https://stackoverflow.com/')

full_screenshot(driver, 'test.png')
driver.quit()

The full_screenshot function adjusts the window size to match the page's dimensions, takes a screenshot, and then restores the original window size. This should help you capture a screenshot of the entire page without scroll bars.