[FIXED] Screenshot html after clicking checkbox using selenium in python

Issue

I am trying to generate a screenshot of this url which is a chart of a stock prices: https://chartink.com/stocks/iex.html using selenium in python.

However, before exporting my screenshot, I want to change some default settings on the chart which involve clicking the Bollinger Band checkbox by going to Maximize Indicators -> Upper Overlays -> Bollinger Band.

I am not sure if my code to click checkbox is correct as I have no knowledge of HTML.

Can someone pls inspect the url and suggested corrected code?

Below is my complete code which throws the error:

ElementNotInteractableException           Traceback (most recent call last)
Cell In[42], line 37
     34 bollinger_band_checkbox = upper_overlays_form.find_element(By.ID, "BBm")
     36 # Click the "Bollinger Band" checkbox
---> 37 bollinger_band_checkbox.click()

ElementNotInteractableException: Message: element not interactable
  (Session info: headless chrome=119.0.6045.160)

Code

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
import os
import pandas as pd

# Replace this with the actual path to chromedriver.exe on your machine
chrome_driver_path = r'C:\Users\Administrator\chromedriver-win64\chromedriver.exe'

# Folder to save screenshots
screenshot_folder = r'G:\My Drive\WeeklyCharts_RSI_Midcap'

# Set up Chrome options for a headless browser
chrome_options = Options()
chrome_options.add_argument('--headless')  # Run Chrome in headless mode (no GUI)

# Create a new Chrome driver with options and specified executable path
chrome_service = Service(chrome_driver_path)
driver = webdriver.Chrome(service=chrome_service, options=chrome_options)

# Set the window size
driver.set_window_size(1980, 1080)

url = r'https://chartink.com/stocks/iex.html'

# Navigate to the URL
driver.get(url)
    
# Locate the "Upper Overlays" form by ID
upper_overlays_form = driver.find_element(By.ID, "newone2")

# Locate the "Bollinger Band" checkbox within the form
bollinger_band_checkbox = upper_overlays_form.find_element(By.ID, "BBm")

# Click the "Bollinger Band" checkbox
bollinger_band_checkbox.click()

# Capture screenshot
screenshot_name = 'IEX.png'
screenshot_path = os.path.join(screenshot_folder, screenshot_name)

# Take the screenshot
driver.save_screenshot(screenshot_path)

# Close the Chrome driver
driver.quit()

Solution

Okay, I've already browsed this page and I found the id="BBm" is a "lable", so you can't click it, you should click "input" in front of it which is right checkbox. so the part right code is:

url = r'https://chartink.com/stocks/iex.html'
driver.get(url)
driver.find_element(By.XPATH, '//a[text()="Upper Overlays"]').click()
driver.find_element(By.XPATH, '//input[@id="BB"]').click()
driver.find_element(By.XPATH, '//input[@id="innerb"]').click()
driver.switch_to.frame('//iframe[@id="ChartImage"]')
driver.find_element(By.XPATH, '//div[@id="saverbutton"]').click()
driver.quit()

Plus, please try to add waiting for element show.

Answered By - touero