Element screenshot in Selenium Python - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Selenium element screenshot code?

Consider the following Python Selenium code snippet that takes a screenshot of a web element. What will be the result after running this code?

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.by import By

browser = webdriver.Chrome()
browser.get('https://example.com')
element = browser.find_element(By.TAG_NAME, 'h1')
element.screenshot('header.png')
browser.quit()

A A file named 'header.png' is saved containing the screenshot of the first <h1> element on the page.

B The entire page screenshot is saved as 'header.png', ignoring the element locator.

C Raises a NoSuchElementException because 'h1' tag does not exist on example.com.

D SyntaxError due to incorrect method usage for taking element screenshot.

💡 Hint

Remember that element.screenshot() saves only the specific element's image, not the whole page.

The method element.screenshot(filename) saves a screenshot of only the located element. Since example.com has an

tag, the file 'header.png' will be created with that element's image.

❓ assertion

intermediate

Which assertion correctly verifies the element screenshot file exists after saving?

You have saved an element screenshot as 'logo.png'. Which assertion correctly checks that the file was created?

Selenium Python

import os

# Assume element.screenshot('logo.png') was called before

A assert os.path.isfile('logo.png') == False

B assert os.path.isfile('logo.png')

C assert os.path.isdir('logo.png')

D assert os.path.exists('logo.png') == False

💡 Hint

Check if the file exists and is a file, not a directory.

os.path.isfile() returns True if the path exists and is a file. This is the correct way to assert the screenshot file was created.

🔧 Debug

advanced

Why does this element screenshot code raise an error?

Identify the cause of the error in this Selenium Python code snippet:

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.by import By

browser = webdriver.Chrome()
browser.get('https://example.com')
element = browser.find_element(By.ID, 'nonexistent')
element.screenshot('nonexistent.png')
browser.quit()

A NoSuchElementException is raised because the element with ID 'nonexistent' does not exist.

B FileNotFoundError because 'nonexistent.png' path is invalid.

C TypeError because screenshot() requires a file object, not a string filename.

D TimeoutException because the page took too long to load.

💡 Hint

Check if the element locator matches any element on the page.

The code tries to find an element with ID 'nonexistent' which does not exist on example.com, causing NoSuchElementException before screenshot() is called.

❓ framework

advanced

Which Selenium WebDriver method is best to capture a screenshot of a specific element?

You want to capture only a single element's screenshot in Selenium Python. Which method should you use?

A driver.get_screenshot_as_file('element.png')

B driver.save_screenshot('element.png')

C element.screenshot('element.png')

D element.get_screenshot_as_base64()

💡 Hint

Only the element object has a screenshot method that saves just that element.

element.screenshot(filename) saves the screenshot of the element only. driver.save_screenshot() saves the whole page.

🧠 Conceptual

expert

What is a key limitation of element screenshot in Selenium WebDriver?

Which of the following is a known limitation when taking screenshots of elements using Selenium WebDriver?

A Element screenshots automatically scroll the page to the bottom before capturing.

B Element screenshots always include the entire page content regardless of element size.

C Element screenshots can only be saved in JPEG format, not PNG.

D Element screenshots may be blank if the element is not visible or outside the viewport.

💡 Hint

Think about what happens if the element is hidden or off-screen.

If the element is hidden or outside the visible area, the screenshot may be blank or incomplete because Selenium captures only visible pixels.

Practice

1. What does the element.screenshot('file.png') method do in Selenium Python?

easy

A. Captures a screenshot of only the specific web element.

B. Captures a screenshot of the entire browser window.

C. Saves the HTML source of the element to a file.

D. Highlights the element on the page without saving an image.

Solution

1. Step 1: Understand the method purpose

   The element.screenshot() method captures an image of the specific element, not the whole page.

2. Step 2: Compare with other screenshot methods

   driver.save_screenshot() captures the full page, but element.screenshot() targets only one element.

3. Final Answer:

   Captures a screenshot of only the specific web element. -> Option A

4. Quick Check:

   element.screenshot() = element image capture [OK]

Hint: Remember: element.screenshot saves only that element's image [OK]

Common Mistakes:

• Confusing element screenshot with full page screenshot
• Thinking it saves HTML instead of image
• Using driver.screenshot instead of element.screenshot

2. Which of the following is the correct syntax to save a screenshot of a web element stored in variable button as 'button.png'?

easy

A. driver.screenshot('button.png')

B. button.save_screenshot('button.png')

C. button.screenshot('button.png')

D. button.capture('button.png')

Solution

1. Step 1: Identify the correct method for element screenshot

   The method to save an element's screenshot is element.screenshot(filename).

2. Step 2: Check the variable and filename usage

   Since the element is stored in button, calling button.screenshot('button.png') is correct syntax.

3. Final Answer:

   button.screenshot('button.png') -> Option C

4. Quick Check:

   element.screenshot(filename) = correct syntax [OK]

Hint: Use element.screenshot('file.png') exactly to save element image [OK]

Common Mistakes:

• Using driver.screenshot() for element instead of element.screenshot()
• Using non-existent methods like save_screenshot on element
• Wrong method name like capture()

3. What will happen if you run this code snippet?

element = driver.find_element(By.ID, 'logo')
element.screenshot('logo.png')
print('Screenshot saved')

medium

A. Saves a screenshot of the whole page and prints confirmation.

B. Saves a screenshot of the element with ID 'logo' and prints confirmation.

C. Throws an error because screenshot method is not valid for elements.

D. Prints 'Screenshot saved' but does not save any image.

Solution

1. Step 1: Locate element and call screenshot

   The code finds the element with ID 'logo' and calls element.screenshot('logo.png'), which saves the element's image.

2. Step 2: Confirm output message

   After saving, it prints 'Screenshot saved' confirming the action.

3. Final Answer:

   Saves a screenshot of the element with ID 'logo' and prints confirmation. -> Option B

4. Quick Check:

   element.screenshot() saves image + print confirms [OK]

Hint: element.screenshot saves image; print confirms success [OK]

Common Mistakes:

• Assuming screenshot method is invalid for elements
• Thinking it saves full page instead of element
• Ignoring the print statement output

4. You wrote this code but no screenshot file is created. What is the likely error?

element = driver.find_element(By.CLASS_NAME, 'submit-btn')
element.screenshot()

medium

A. File path is invalid but filename is provided.

B. Incorrect locator type used for find_element.

C. screenshot() method does not exist for elements.

D. Missing filename argument in screenshot() method.

Solution

1. Step 1: Check screenshot method usage

   The screenshot() method requires a filename argument to save the image.

2. Step 2: Identify missing filename

   Since no filename is given, no file is created, causing the issue.

3. Final Answer:

   Missing filename argument in screenshot() method. -> Option D

4. Quick Check:

   screenshot() needs filename to save file [OK]

Hint: Always provide filename in element.screenshot('file.png') [OK]

Common Mistakes:

• Calling screenshot() without filename argument
• Assuming locator type is wrong without checking
• Thinking screenshot() method is invalid for elements

5. You want to verify visually that a specific button is rendered correctly on different browsers by saving its screenshot. Which approach is best to automate this using Selenium Python?

hard

A. Locate the button element and use element.screenshot('button.png') to save its image for comparison.

B. Use driver.save_screenshot('button.png') to capture the whole page and crop manually later.

C. Extract the button's HTML and compare it as text across browsers.

D. Use JavaScript to highlight the button but do not save any image.

Solution

1. Step 1: Identify the goal - visual verification of a button

   To check how the button looks, capturing its image directly is best.

2. Step 2: Choose the method that captures only the button

   element.screenshot() saves the button's image exactly, making comparison easy and automated.

3. Final Answer:

   Locate the button element and use element.screenshot('button.png') to save its image for comparison. -> Option A

4. Quick Check:

   element.screenshot() = best for visual element checks [OK]

Hint: Use element.screenshot() for focused visual testing [OK]

Common Mistakes:

• Capturing full page screenshot and cropping manually
• Comparing HTML text instead of visual appearance
• Not saving any image for visual verification