Trouble getting the screenshot of any element after zooming in

Question

I'm trying to take a screenshot of a desired portion from a webpage using python in combination with selenium. When I execute my script, I do get a screenshot but that is not what I intended to let the script grab.

I wish to grab the portion shown in Desired one below instead of Current output. To get the screenshot exactly how it is shown in the Desired one, the script has to click on that + button right next to that image to make it wider in order for the dots on the gallery to be visible.

However, the current approach takes only the screenshot of the partial portion of that image. Moreover, it grabs unwanted portion as well.

Webpage link

I've tried with:

import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

link = 'https://www1.ticketmaster.com/celine-dion-courage-world-tour/event/0600567BFDB0AB48'

def start_script():
    options = webdriver.ChromeOptions()
    options.add_argument("--start-maximized")
    driver = webdriver.Chrome(options=options)
    return driver

def get_links(url):
    driver = start_script()
    driver.get(url)
    try:
        button = WebDriverWait(driver,20).until(EC.visibility_of_element_located((By.CSS_SELECTOR,"#landingPricingMessage button.pricing-landing__modal-btn")))
    except Exception: button = ""
    if button: button.click()

    try:
        zoom = WebDriverWait(driver,10).until(EC.presence_of_element_located((By.CSS_SELECTOR,"button[class='zoomer__control--zoomin'] > svg[class='zoomin']")))
    except Exception: zoom = ""

    if zoom:
        for _ in range(3):
            zoom.click()
            time.sleep(2)
    try:
        element = WebDriverWait(driver,10).until(EC.visibility_of_element_located((By.CSS_SELECTOR,"svg[data-component='svg'][class='map__svg']")))
    except Exception: element = ""

    if element:
        element.screenshot('gallery.png')
        driver.quit()
        return 0

    else:
        driver.quit()
        return get_links(url)


if __name__ == '__main__':
    get_links(link)

I even tried like this but the output is still the same:

def get_links(url):
    driver = start_script()
    driver.get(url)
    try:
        elem = WebDriverWait(driver,5).until(EC.visibility_of_element_located((By.XPATH,"//h1[contains(.,'Pardon the Interruption')]"))).text
    except Exception: elem = ""

    if elem:
        driver.quit()
        return get_links(url)
    else:
        element = WebDriverWait(driver,10).until(EC.visibility_of_element_located((By.CSS_SELECTOR,"svg[data-component='svg'][class='map__svg']")))
        location = element.location
        size = element.size
        png = driver.get_screenshot_as_png()
        im = Image.open(BytesIO(png))
        left = location['x']
        top = location['y']
        right = location['x'] + size['width']
        bottom = location['y'] + size['height']
        im = im.crop((left, top, right, bottom))
        im.save('screenshot.png')
        driver.quit()
        return 0

Current output

Desired one

In the desired output image I've marked an area which should be kicked out as it is not the part of that image.

How can I get only the screenshot of any element even after zooming in?

Note: I used proxies for the script to work as there is a bot protection mechanism active in there. I'm only after the logic to get the desired output.

Answer 1

The map is contained inside <div id="map-container">. If you take a screenshot of this element it will capture the zoomed map

element = WebDriverWait(driver,10).until(EC.visibility_of_element_located((By.ID, 'map-container')))
element.screenshot('gallery.png')