使用 python selenium 中的任何标准定位方法无法识别元素

Question

Below is a div section from my complete html page:

<div class="x-grid3-body" style="width: 998px;" id="ext-gen159">
 <div class="x-grid3-row x-grid3-row-first x-grid3-row-last" style="width:998px;">
  <table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="width:998px;">
   <tbody>
    <tr>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column0 x-grid3-cell-first " style="width: 40px;text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column0" unselectable="on">
       <input type="checkbox" style="display:block;float:left;margin:3px 3px 0px 0px" id="chkObjectAccountCheckbox" class="gridcheckbox" onclick="jscript">
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column1 " style="width: 0px;display: none; text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column1" unselectable="on">
       <span class="Grid-Panel-All">
       </span>
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column2 " style="width: 30px;text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column2" unselectable="on">&nbsp;
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column3 " style="width: 30px;text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column3" unselectable="on">
       <img src="images/icons/word_lock.gif" border="0" title="The object is locked by unm" style="display:block;float:left;margin:0px 3px 0px 0px" id="">
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column4 " style="width: 30px;text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column4" unselectable="on">&nbsp;
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column5 " style="width: 187px;text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column5" unselectable="on" style="cursor:pointer">
       <span class="Grid-Panel-All">runm
       </span>
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column6 " style="width: 187px;text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column6" unselectable="on" style="cursor:pointer">
       <span class="Grid-Panel-All">domain
       </span>
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column7 " style="width: 187px;text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column7" unselectable="on" style="cursor:pointer">
       <span class="Grid-Panel-All">PA-em-id-P
       </span>
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column8 " style="width: 187px;text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column8" unselectable="on" style="cursor:pointer">
       <span class="Grid-Panel-All">WDM-PA-
       </span>
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column9 " style="width: 141px;display: none; text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column9" unselectable="on" style="cursor:pointer">
       <span class="Grid-Panel-All">Roo
       </span>
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column10 " style="width: 141px;display: none; text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column10" unselectable="on" style="cursor:pointer">
       <span class="Grid-Panel-All">Operating System-domain-domain-domain-runm
       </span>
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column11 " style="width: 141px;display: none; text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column11" unselectable="on" style="cursor:pointer">
       <span class="Grid-Panel-All">PMC
       </span>
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column12 " style="width: 141px;display: none; text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column12" unselectable="on" style="cursor:pointer">
       <span class="Grid-Panel-All">unm
       </span>
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column13 " style="width: 141px;display: none; text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column13" unselectable="on" style="cursor:pointer">
       <span class="Grid-Panel-All">unm
       </span>
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column14 " style="width: 141px;display: none; text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column14" unselectable="on" style="cursor:pointer">
       <span class="Grid-Panel-All">
       </span>
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column15 " style="width: 141px;display: none; text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column15" unselectable="on" style="cursor:pointer">
       <span class="Grid-Panel-All">
       </span>
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column16 " style="width: 141px;display: none; text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column16" unselectable="on" style="cursor:pointer">
       <span class="Grid-Panel-All">
       </span>
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column17 " style="width: 141px;display: none; text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column17" unselectable="on" style="cursor:pointer">
       <span class="Grid-Panel-All">
       </span>
      </div>
     </td>
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column18 " style="width: 30px;text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column18" unselectable="on" style="cursor:pointer">
       <img src="images/icons/word_show.gif" border="0" title="Show word" style="display:block;float:left;margin:0px 3px 0px 0px" id="">
      </div>
     </td>
     ...
     ...
     ...
     <td class="x-grid3-col x-grid3-cell x-grid3-td-column28 x-grid3-cell-last " style="width: 0px;display: none; text-align: left;" tabindex="0">
      <div class="x-grid3-cell-inner x-grid3-col-column28" unselectable="on">
       <span class="Grid-Panel-All">
       </span>
      </div>
     </td>
    </tr>
   </tbody>
  </table>
 </div>
</div>

For the above snippet , Please have a look at the image below to get the idea of the structure of the div:

From the image above, the element circled in orange is the one I'm targeting to automate clicking, and the section from the whole html snippet above, just for that element is (I'm targeting either the img or div tag below to be identified/located):

 <td class="x-grid3-col x-grid3-cell x-grid3-td-column18 " style="width: 30px;text-align: left;" tabindex="0">
  <div class="x-grid3-cell-inner x-grid3-col-column18" unselectable="on" style="cursor:pointer">
   <img src="images/icons/word_show.gif" border="0" title="Show word" style="display:block;float:left;margin:0px 3px 0px 0px" id="">
  </div>
 </td>

But when I want to find the element using standard selenium locating methods from the documentation( https://selenium-python.readthedocs.io/locating-elements.html ), nothing works. Also I checked, the issue is for only the elements defined in this div section(for which the whole html code is at the beginning of the description):

Rest of the part of the html page outside of that works pretty fine using those standard methods.

My problematic code snippet is:

def copy_pwd(self):

        time.sleep(60)
        #img_link = self.chrome_driver.find_element_by_xpath('//div[@id="ext-gen159"]/div/table/tbody/tr/td[19]/div/img')
        img_link = self.chrome_driver.find_element_by_class_name('x-grid3-cell-inner.x-grid3-col-column18')
        img_link.click()

When I use find_element_by_xpath, error is:

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//div[@id="ext-gen159"]/div/table/tbody/tr/td[19]/div/img"}
  (Session info: chrome=85.0.4183.102)

Changing the xpath from //div[@id="ext-gen159"]/div/table/tbody/tr/td[19]/div/img to //*[@id="ext-gen159"]/div/table/tbody/tr/td[19]/div/img , also gives same exception as above.

When I use find_element_by_class_name, error is:

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector","selector":".x-grid3-cell-inner.x-grid3-col-column18"}
  (Session info: chrome=85.0.4183.102)

There is no name , id , link_text defined for the element in question, so couldn't use the respective location methods to test.

NOTE: I've already gone through articles where it says instead of time.sleep(60) use webdriverwait and I hence used this instead and tested as well:

def copy_pwd(self):

        #time.sleep(60)
        find_elem = WebDriverWait(self.chrome_driver, 60).until(EC.element_to_be_clickable((By.XPATH, '//div[@id="ext-gen159"]/div/table/tbody/tr/td[19]/div/img')))
        if find_elem:
            #img_link = self.chrome_driver.find_element_by_xpath('//div[@id="ext-gen159"]/div/table/tbody/tr/td[19]/div/img')
            img_link = self.chrome_driver.find_element_by_class_name('x-grid3-cell-inner.x-grid3-col-column18')
            img_link.click()

But in this case WebDriverWait gives me timeout exception:

find_elem = WebDriverWait(self.chrome_driver, 60).until(EC.element_to_be_clickable((By.XPATH, '//div[@id="ext-gen159"]/div/table/tbody/tr/td[19]/div/img')))
  File "C:\Users\user\AppData\Roaming\Python\Python38\site-packages\selenium\webdriver\support\wait.py", line 80, in until
raise TimeoutException(message, screen, stacktrace)
selenium.common.exceptions.TimeoutException: Message:

Later I investigated and found when the element is not identifiable, at all, using the XPATH or CLASS that I used, timeout exception by the WebDriverWait is also justifiable. Also I did the test with several other wait methods in place of EC.element_to_be_clickable like EC.visibility_of_element_located and EC.presence_of_element_located but nothing works.

1. What am I doing wrong, and why am I not able to make it work ?
2. Is it possible that this section is intentionally obfuscated by the html designer, to refrain any automated script from browser automation ?
3. Is my use of XPATH or class_name for find element wrong ?
4. How can I make use of find element by CSS_selector in that case ?

Please help.

My driver is google-chrome and version is 85.0.4183.102.

Answer 1

Try this xpath:

def copy_pwd(self):

        #time.sleep(60)
        find_elem = WebDriverWait(self.chrome_driver, 60).until(EC.presence_of_element_located((By.XPATH, '//img[@src="images/icons/word_show.gif"]')))
        find_elem.click()

Answer 2

This will search all divs class which contains 'x-grid3-col-column18' text. After find divs get one under level img elements.

find_elems = WebDriverWait(self.chrome_driver, 60).until(EC.visibility_of_all_elements_located((By.XPATH, "//div[contains(@class,'x-grid3-col-column18')]/img")))
find_elems[0].click()

This will search first div class which contains 'x-grid3-col-column18' text. After find divs' child img elements which title is 'Show word'.

find_elem = WebDriverWait(self.chrome_driver, 60).until(EC.visibility_of_element_located((By.XPATH, "//div[contains(@class,'x-grid3-col-column18')]//img[@title='Show word']")))
find_elem.click()

For more detailed examples check this link: https://towardsdatascience.com/xpath-for-python-89f4423415e0