Selenium find button with Inspect element [duplicate] - selenium

Question

I'm trying to play QWOP using Selenium on Chrome but I keep getting the following error:
selenium.common.exceptions.NoSuchElementException:
Message: no such element: Unable to locate element
{"method":"id","selector":"window1"
(Session info: chrome=63.0.3239.108
(Driver info: chromedriver=2.34.522913
(36222509aa6e819815938cbf2709b4849735537c), platform=Linux 4.10.0-42-generic x86_64)
while using the following code:
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
import time
browser = webdriver.Chrome()
browser.set_window_size(640, 480)
browser.get('http://www.foddy.net/Athletics.html?webgl=true')
browser.implicitly_wait(10)
canvas = browser.find_element_by_id("window1")
canvas.click()
while (True):
action = ActionChains(browser)
action.move_to_element(canvas).perform()
canvas.click()
canvas.send_keys("q")
The same code works perfectly on Firefox, but because I want to use chrome's capability to run an webgl game in headless mode I can't really switch to Firefox.
Any workarounds to get this working?

Answer 1

NoSuchElementException
selenium.common.exceptions.NoSuchElementException popularly known as NoSuchElementException is defined as :
exception selenium.common.exceptions.NoSuchElementException(msg=None, screen=None, stacktrace=None)
NoSuchElementException is basically thrown in 2 cases as follows :
When using :
webdriver.find_element_by_*("expression")
//example : my_element = driver.find_element_by_xpath("xpath_expression")
When using :
element.find_element_by_*("expression")
//example : my_element = element.find_element_by_*("expression")
As per the API Docs just like any other selenium.common.exceptions, NoSuchElementException should contain the following parameters :
msg, screen, stacktrace
raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":".//*[#id='create-portal-popup']/div[4]/div[1]/button[3]"}
(Session info: chrome=61.0.3163.100)
(Driver info: chromedriver=2.32.498550 (9dec58e66c31bcc53a9ce3c7226f0c1c5810906a),platform=Windows NT 10.0.10240 x86_64)
Reason
The reason for NoSuchElementException can be either of the following :
The Locator Strategy you have adopted doesn't identifies any element in the HTML DOM.
The Locator Strategy you have adopted is unable to identify the element as it is not within the browser's Viewport.
The Locator Strategy you have adopted identifies the element but is invisible due to presence of the attribute style="display: none;".
The Locator Strategy you have adopted doesn't uniquely identifies the desired element in the HTML DOM and currently finds some other hidden / invisible element.
The WebElement you are trying to locate is within an <iframe> tag.
The WebDriver instance is looking out for the WebElement even before the element is present/visibile within the HTML DOM.
Solution
The solution to address NoSuchElementException can be either of the following :
Adopt a Locator Strategy which uniquely identifies the desired WebElement. You can take help of the Developer Tools (Ctrl+Shift+I or F12) and use Element Inspector.
Here you will find a detailed discussion on how to inspect element in selenium3.6 as firebug is not an option any more for FF 56?
Use execute_script() method to scroll the element in to view as follows :
elem = driver.find_element_by_xpath("element_xpath")
driver.execute_script("arguments[0].scrollIntoView();", elem)
Here you will find a detailed discussion on Scrolling to top of the page in Python using Selenium
Incase element is having the attribute style="display: none;", remove the attribute through executeScript() method as follows :
elem = driver.find_element_by_xpath("element_xpath")
driver.execute_script("arguments[0].removeAttribute('style')", elem)
elem.send_keys("text_to_send")
To check if the element is within an <iframe> traverse up the HTML to locate the respective <iframe> tag and switchTo() the desired iframe through either of the following methods :
driver.switch_to.frame("iframe_name")
driver.switch_to.frame("iframe_id")
driver.switch_to.frame(1) // 1 represents frame index
Here you can find a detailed discussion on How can I select a html element no matter what frame it is in in selenium?.
If the element is not present/visible in the HTML DOM immediately, induce WebDriverWait with expected_conditions set to proper method as follows :
To wait for presence_of_element_located :
element = WebDriverWait(driver, 20).until(expected_conditions.presence_of_element_located((By.XPATH, "element_xpath']")))
To wait for visibility_of_element_located :
element = WebDriverWait(driver, 20).until(expected_conditions.visibility_of_element_located((By.CSS_SELECTOR, "element_css")
To wait for element_to_be_clickable :
element = WebDriverWait(driver, 20).until(expected_conditions.element_to_be_clickable((By.LINK_TEXT, "element_link_text")))
This Usecase
You are seeing NoSuchElementException because the id locator doesn't identifies the canvas uniquely. To identify the canvas and click() on it you have to wait for the canvas to be clickable and to achieve that you can use the following code block :
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//canvas[#id='window1']"))).click()
Reference
You can find Selenium's java client based relevant discussion in:
NoSuchElementException, Selenium unable to locate element