Selenium click trouble (Python)
<p>I am using Selenium (<code>ChromeDriver</code>) to automate a <a href="https://www.chess.com/play/computer" rel="nofollow">chess site</a> but I am having trouble clicking on a piece and moving it. I have tried <code>click()</code> and <code>ActionChains</code> but nothing is working. Here is my code:</p>

<pre><code>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

T = r"C:\Users\HP\Downloads\chromedriver.exe"
options = webdriver.ChromeOptions()
options.add_argument("--start-maximized")
Driver = webdriver.Chrome(T, chrome_options=options)
Driver.get("https://www.chess.com/play/computer")
Driver.find_element_by_xpath('//*[@id="boardMessage"]/a').click()
Piece = WebDriverWait(Driver,10).until(EC.element_to_be_clickable((By.XPATH,'//*[@id="chessboard_boardarea"]/img[22]')))
Piece.click()
</code></pre>

<p>When I run the script nothing happens but the white pawn should be highlighted in yellow. Can someone explain why <code>.click()</code> or <code>ActionChains</code> is not working? How can I make it work?</p>

<p>P.S. If solution requires JavaScript help, please write it in more detail because I don't know JavaScript at all.</p>

<p>This is somewhat complicated. The chess pieces are <code>IMG</code>s that can be clicked but empty chess squares are not represented by an element. You will have to determine a coordinate system and use <a href="http://selenium-python.readthedocs.io/api.html#selenium.webdriver.common.action_chains.ActionChains.move_to_element_with_offset" rel="nofollow"><code>move_to_element_with_offset(to_element, xoffset, yoffset)</code></a> based off the board represented by <code>&lt;div id="chessboard_boardarea" ...&gt;</code> and the board labels A-H and 1-8. For <code>move_to_element_with_offset()</code>, the offsets are relative to the top-left corner of the element. So in this case, (0,0) is the top left corner of the chessboard.</p>

<p>The code below should click the white pawn at A2 and then click A3 which moves it. The board is 640px x 640px. Each square is 80px. The code is clicking in the middle of the square so:</p>

<ul>
<li>A8 would be 40,40</li>
<li>A1 is 40,600</li>
<li>H8 is 600,40</li>
<li>H1 is 600,600</li>
</ul>

<p></p>

<pre><code>board = Driver.find_element_by_id("chessboard_boardarea")
action_chains = ActionChains(Driver)
action_chains.move_to_element_with_offset(board, 40, 520).click().perform() # A2
action_chains.move_to_element_with_offset(board, 40, 440).click().perform() # A3
</code></pre>

<p>You can determine what piece is represented by an element (<code>IMG</code> tag) by looking at the filename in the <code>src</code> attribute. For example, <code>src="//images.chesscomfiles.com/chess-themes/pieces/neo/80/bn.png"</code> has the filename <code>bn.png</code> and is the black knight. Each image filename will be two letters. The first letter is the piece color which is either 'b' for black or 'w' for white. The second letter is the piece name, 'p' pawn, 'r' rook, 'n' knight, 'b' bishop, 'q' queen, and 'k' king. So, <code>bn.png</code> is 'b' for black and 'n' for knight... the black knight.</p>

<p>You can determine where pieces are by using the <code>transform: translate(160px, 160px);</code> portion of the style attribute of the <code>IMG</code> tags representing the different pieces. For example, <code>transform: translate(160px, 160px);</code> this element is at 160,160 which is C6 (the coords are the top-left of the square and each square is 80px).</p>

python selenium selenium-webdriver