[FIXED] I can't click "Log In" button in Reddit Login Screen with Selenium

Issue

First i will explain with images what button im talking about:

before i send username and password and inspect section

after i send and inspect section

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

browser = webdriver.Chrome()
browser.get("https://reddit.com")
time.sleep(5)
LoginButton = browser.find_element(By.XPATH, '//*[@id="login-button"]')
LoginButton.click()
time.sleep(7)
UsernameInput = browser.find_element(By.XPATH, '//*[@id="login-username"]')
UsernameInput.click()
time.sleep(3)
UsernameInput.send_keys("asdasdasdasdasd") #random
time.sleep(3)
PasswordInput = browser.find_element(By.XPATH, '//*[@id="login-password"]')
PasswordInput.click()
time.sleep(3)
PasswordInput.send_keys("asdasdasdasda") #random
time.sleep(3)
AccountLoginButton = browser.find_element(By.XPATH, '//*[@id="login"]/faceplate-tabpanel/auth-flow-modal[1]/div[2]/faceplate-tracker/button/span/span').click()

# ChatGPT Solution
#wait = WebDriverWait(browser, 10)
#AccountLoginButton = wait.until(ec.presence_of_element_located((By.XPATH, '/html/body/shreddit-app/shreddit-overlay-display//shreddit-signup-drawer//shreddit-drawer/div/shreddit-async-loader/div/shreddit-slotter//shreddit-async-loader/auth-flow-login/faceplate-form/faceplate-tabpanel/auth-flow-modal[1]/div[2]/faceplate-tracker/button')))

# Other Failed Attempts
#AccountLoginButton = browser.find_element(By.XPATH, '/html/body/shreddit-app/shreddit-overlay-display//shreddit-signup-drawer//shreddit-drawer/div/shreddit-async-loader/div/shreddit-slotter//shreddit-async-loader/auth-flow-login/faceplate-form/faceplate-tabpanel/auth-flow-modal[1]/div[2]/faceplate-tracker/button').click()
#AccountLoginButton = browser.find_element_by_link_text("Login").click()
#AccountLoginButton = browser.find_element(By.LINK_TEXT, 'Log In').click()
#AccountLoginButton = browser.find_element(By.CSS_SELECTOR, '#login > faceplate-tabpanel > auth-flow-modal:nth-child(1) > div.w-100 > faceplate-tracker > button').click()
#AccountLoginButton.click()
time.sleep(1500)

Error Image

Error Text:

C:\Python311\python.exe C:\Users\enesk\OneDrive\Desktop\Reddit\Reddit-Selenium-Scrape.py 
Traceback (most recent call last):
  File "C:\Users\enesk\OneDrive\Desktop\Reddit\Reddit-Selenium-Scrape.py", line 23, in <module>
    AccountLoginButton = browser.find_element(By.XPATH, '//*[@id="login"]/faceplate-tabpanel/auth-flow-modal[1]/div[2]/faceplate-tracker/button/span/span').click()
                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Python311\Lib\site-packages\selenium\webdriver\remote\webdriver.py", line 738, in find_element
    return self.execute(Command.FIND_ELEMENT, {"using": by, "value": value})["value"]
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Python311\Lib\site-packages\selenium\webdriver\remote\webdriver.py", line 344, in execute
    self.error_handler.check_response(response)
  File "C:\Python311\Lib\site-packages\selenium\webdriver\remote\errorhandler.py", line 229, in check_response
    raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//*[@id="login"]/faceplate-tabpanel/auth-flow-modal[1]/div[2]/faceplate-tracker/button/span/span"}
  (Session info: chrome=120.0.6099.71); For documentation on this error, please visit: https://www.selenium.dev/documentation/webdriver/troubleshooting/errors#no-such-element-exception
Stacktrace:
    GetHandleVerifier [0x00007FF6880D4D02+56194]
    (No symbol) [0x00007FF6880404B2]
    (No symbol) [0x00007FF687EE76AA]
    (No symbol) [0x00007FF687F316D0]
    (No symbol) [0x00007FF687F317EC]
    (No symbol) [0x00007FF687F74D77]
    (No symbol) [0x00007FF687F55EBF]
    (No symbol) [0x00007FF687F72786]
    (No symbol) [0x00007FF687F55C23]
    (No symbol) [0x00007FF687F24A45]
    (No symbol) [0x00007FF687F25AD4]
    GetHandleVerifier [0x00007FF68844D5BB+3695675]
    GetHandleVerifier [0x00007FF6884A6197+4059159]
    GetHandleVerifier [0x00007FF68849DF63+4025827]
    GetHandleVerifier [0x00007FF68816F029+687785]
    (No symbol) [0x00007FF68804B508]
    (No symbol) [0x00007FF688047564]
    (No symbol) [0x00007FF6880476E9]
    (No symbol) [0x00007FF688038094]
    BaseThreadInitThunk [0x00007FF8D44B257D+29]
    RtlUserThreadStart [0x00007FF8D668AA58+40]


Process finished with exit code 1

I tried many find_element type and still not fixed and crazy think is i can acces every other button but except this one. Am i need to click this button manually or need to use another library?

Solution

In the given scenario, encountering an issue arises from the fact that the target element for inspection resides within a shadow DOM, thereby rendering the direct derivation of its XPath unfeasible. To address this challenge, it is recommended to employ JavaScript techniques for traversing and interacting with elements enclosed within a shadow DOM structure.

To accomplish this task, you can inspect the target element by copying the JavaScript path in the following manner.

If you wish to validate the JavaScript path, you can paste the copied JavaScript path into the console and press 'Enter.' This action will enable you to observe the element you intend to interact with, ensuring its accurate identification.

To achieve this particular goal, you can use the following code:

js = driver
Download = js.execute_script("return Paste the JS path after return")

If you intend to click on the element, you can employ the following JavaScript:

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

Answered By - Michael James