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.

I wouldn't be surprised if Ticketmaster have specifically tuned their site to prevent scraping techniques, but in any case the element you're looking for has the id `quick-picks-container` so you could maybe try selecting that element and screenshotting it? — Dillanm, Sep 30 '19 at 11:01
Did you check this SO answer : https://stackoverflow.com/questions/15018372/how-to-take-partial-screenshot-with-selenium-webdriver-in-python — KunduK, Sep 30 '19 at 11:41
The stadium file in a svg tag (class=map__svg). At least it's what I've got inspecting the element. There is a link here for that: https://stackoverflow.com/questions/44853989/extracting-svg-from-webpage-using-selenium-python — powerPixie, Sep 30 '19 at 12:38
Possible duplicate of [How to take partial screenshot with Selenium WebDriver in python?](https://stackoverflow.com/questions/15018372/how-to-take-partial-screenshot-with-selenium-webdriver-in-python) — Sers, Oct 01 '19 at 20:02

score 5 · Accepted Answer · answered Oct 07 '19 at 06:37

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')

score 2 · Answer 2 · answered Sep 30 '19 at 14:15

This is not an answer to your question, I was unable to get to the ticketmaster link, the web app was unable to determine my browser type and did not render the event.

If you want a screenshot of a dom element, you can call the screenshot method on the webelement object. Hope this helps.

from selenium.webdriver import Chrome

driver = Chrome()
driver.get('https://stackoverflow.com/questions/58166039/trouble-getting-a-screenshot-of-a-desired-portion-from-a-webpage')
question = driver.find_element_by_id('question-header')
question.screenshot('question.png')

Trouble getting the screenshot of any element after zooming in

2 Answers2