Taking screen shot of specific element (python chromedriver selenium)

Question

A am having an issue taking a screenshot of a specific element, named "article" in my code bellow. The page loads, navigates to the first post and takes a screenshot. The screenshot is being taken, but it is not specifically of the element "article" I have specified. I have provided some testable code bellow.


from selenium.webdriver.support.ui import WebDriverWait

from selenium.webdriver.common.by import By

from selenium.webdriver.support import expected_conditions as EC

from selenium import webdriver



class bot:



    def __init__(self):

        self.driver = webdriver.Chrome("path here")



    def change_zoom(self, new_zoom):

        """

        :param new_zoom: zoom level as a percentage

        """

        change_js = """

        var selectBox = document.querySelector("settings-ui").shadowRoot.querySelector("#main").shadowRoot.querySelector("settings-basic-page").shadowRoot.querySelector("settings-appearance-page").shadowRoot.querySelector("#zoomLevel");



        var changeEvent = new Event("change");



        selectBox.value = arguments[0];

        selectBox.dispatchEvent(changeEvent);

        """



        self.driver.get("chrome://settings/")

        new_zoom = round(new_zoom / 100, 2)

        self.driver.execute_script(change_js, new_zoom)





    def nextPostPhoto(self):

        driver = self.driver

        driver.get("https://www.instagram.com/zuck/")

        element= WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//body//div[contains(@class,'_2z6nI')]//div//div//div[1]//div[1]//a[1]//div[1]//div[2]")))

        driver.execute_script("arguments[0].click()", element)

        article = driver.find_elements_by_xpath('//div[@role="dialog" or @id="react-root"]//article')[-1]

        screenshot_as_bytes = article.screenshot_as_png

        with open('article.png', 'wb') as f:

            f.write(screenshot_as_bytes)



if __name__ == "__main__":

    bot = bot()

    bot.change_zoom(80)

    bot.nextPostPhoto()

My current screenshot that is taken is of either a portion of the post+comments block or includes parts of the webpage that are not the post+comments block. I would like to take a screenshot of only "article".

score 0 · Accepted Answer · answered Apr 05 '20 at 18:33

The root cause is that you set the zoom level to 80% and selenium is not aware of that fact. If you create a screenshot (manually) from the page in question (in 80% zoom) then you can see that the target area size is about 747x481 pixels. If you check what the element thinks about itself (print(article.rect)) then you can see that selenium is not aware of the zoom change.

So the reason why your screenshot is offset is the zoom level. If is this a Selenium bug or not I can not tell. If you keep the zoom level on 100%, the screenshot will be created as normal.

Or you can create the screenshot from the screen, calculate the shifted dimensions and crop the desired area and save it. That would be basically

whole_screen_as_png = driver.get_screenshot_as_png() (save it to file or BytesIO)
then open the screenshot via pillow
then take the original dimensions of the element (article.rect)
calculate the zoom adjusted corners (this is the tricky part)
crop the desired area (you have several options) and save the final result

Taking screen shot of specific element (python chromedriver selenium)

1 Answers1

Linked