How to select visible element using XPath or CSS?

Question

I want to select the apply button in the following code. There are two buttons and only one button is visible.

//input[@value='Apply' and @id='btn' and @name='btn' and not(ancestor::td[contains(@style,'display:none')])]

I have written above XPath to select the visible one but in web driver it says unable to access the element. (browser - IE8)

<table class="ColumnTable" cellspacing="0">
   <tbody>
      <tr>
         <td>
            <div id="dashboard~120" class="Section" style="" headeron="" minimized="false" rendered="false">
               <table class="SectionT" cellspacing="0" cellpadding="0">
                  <tbody>
                     <tr>
                        <td style=" display:none;">
                           <div id="dashboard~Contents" style="">
                              <table style="width:100%">
                                 <tbody>
                                    <tr height="100%">
                                       <td class="EItem" valign="TOP" align="CENTER" colspan="2" style="">
                                          <div id="EmbedViewd" reloadinline="">
                                             <div id="NavDone" style="display:;">
                                                <div id="Result" result="Prompt">
                                                   <table class="ViewTable" cellspacing="0">
                                                      <tbody>
                                                         <tr>
                                                            <td>
                                                               <div id="newLayout">
                                                                  <form style="margin: 0;" method="post" action="javascript:void(null);">
                                                                     <div style="">
                                                                        <table class="PromptView" style="">
                                                                           <tbody>
                                                                              <tr>
                                                                                 <td class="ButtonsCell">
                                                                                    <input id="btn" class="button" type="button" tabindex="0" value="Apply" name="btn" style="background-color: rgb(240, 240, 240);">
                                                                                 </td>
                                                                              </tr>
                                                                           </tbody>
                                                                        </table>
                                                                     </div>
                                                                  </form>
                                                               </div>
                                                            </td>
                                                         </tr>
                                                      </tbody>
                                                   </table>
                                                </div>
                                             </div>
                                          </div>
                                       </td>
                                    </tr>
                                 </tbody>
                              </table>
                           </div>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </td>
      </tr>
      <tr>
         <td>
            <div id="dashboard~121" class="Section" style="" headeron="true" minimized="false" rendered="false">
               <table class="SectionT" cellspacing="0" cellpadding="0">
                  <tbody>
                     <tr>
                        <td>
                           <div id="dashboard~Contents" style="">
                              <table class="SectionTD" style="width:100%; border-top:none;">
                                 <tbody>
                                    <tr height="100%">
                                       <td class="EItem" valign="TOP" align="CENTER" colspan="2" style="">
                                          <div id="EmbedViewd" reloadinline="">
                                             <div id="NavDone" style="display:;">
                                                <div id="Result" result="Prompt">
                                                   <table class="ViewTable" cellspacing="0">
                                                      <tbody>
                                                         <tr>
                                                            <td>
                                                               <div id="newLayout">
                                                                  <form style="margin: 0;" method="post" action="javascript:void(null);">
                                                                     <div style="">
                                                                        <table class="PromptView" style="">
                                                                           <tbody>
                                                                              <tr>
                                                                                 <td class="ButtonsCell">
                                                                                    <input id="btn" class="button" type="button" tabindex="0" value="Apply" name="btn" style="background-color: rgb(240, 240, 240);">
                                                                                 </td>
                                                                              </tr>
                                                                           </tbody>
                                                                        </table>
                                                                     </div>
                                                                  </form>
                                                               </div>
                                                            </td>
                                                         </tr>
                                                      </tbody>
                                                   </table>
                                                </div>
                                             </div>
                                          </div>
                                       </td>
                                    </tr>
                                 </tbody>
                              </table>
                           </div>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </td>
      </tr>
   </tbody>
</table>

My question is there anyway other work around for this issue. I think there are plenty of ways to write the above xpath am i right?

Answer 1

You could try the following in case this is a Selenium issue:

//input[@value='Apply'][@id='btn'][@name='btn']  
       [not(ancestor::td[contains(@style,'display:none')])]

It's the same expression with the same result, but as mentioned here Xpath does not work with Selenium it's possible that Selenium has an issue with evaluating and in XPath.

Another issue I just want to mention is that you shoudn't use the same id for multiple elements, id s should be unique. Otherwise your HTML is not valid. When you change the ids to unique values, it'd be possible to reduce the XPath match conditions.

Answer 2

I am a bit confused about your question.

If you are trying to select the button in order to modify its style through CSS, just create the appropriate entry in your CSS file and an ID for the HTML element (the button you need).

Example in W3: Select HTML element by ID

Answer 3

Selecting an element using xpath:

Selecting the first element:

//div[@id='dashboard~120']descendant::input[@id='btn'].Click;

Selecting the second element:

//div[@id='dashboard~121']descendant::input[@id='btn'].Click;