如何使用带有 Selenium 的 Headless Google Chrome 保存手机屏幕截图

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)