Cannot locate button with changing ID in Selenium

Question

I am working on a project where I have to locate a button. I have used XPath for that, but the button's id changes on every refresh, so I am facing a problem with that. Below is a HTML excerpt. Let me know how I can identify that button so that it will not cause an error even if the id changes

<tr>
  <td/>
  <td>
    <div id="LoginButton" style="float: left;">
      <table style="width: auto;" id="ext-comp-1032" class="x-btn x-btn-noicon x-btn-over x-btn-focus" cellspacing="0">
        <tbody class="x-btn-small x-btn-icon-small-left">
          <tr>
            <td class="x-btn-tl">
              <i>&nbsp;</i>
            </td>
            <td class="x-btn-tc"/>
            <td class="x-btn-tr">
              <i>&nbsp;</i>
            </td>
          </tr>
          <tr>
            <td class="x-btn-ml">
              <i>&nbsp;</i>
            </td>
            <td class="x-btn-mc">
              <em class="" unselectable="on">
                <button class=" x-btn-text" id="ext-gen12" type="button">Login</button>
              </em>
            </td>
            <td class="x-btn-mr">
              <i>&nbsp;</i>
            </td>
          </tr>
          <tr>
            <td class="x-btn-bl">
              <i>&nbsp;</i>
            </td>
            <td class="x-btn-bc"/>
            <td class="x-btn-br">
              <i>&nbsp;</i>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </td>
</tr>

Answer 1

If you always have 2 of them (like ext-gen11 and ext-gen12 in your sample), this will work too:

//button[text()="Login"][1] for ext-gen11
//button[text()="Login"][2] for ext-gen12

But depending on other (more reliable) elements, might be a better idea.
As suggested earlier:

//div[@id="LoginButton"]/../../../button[text()="Login"] for ext-gen11
//div[@id="LoginButton"]//button[text()="Login"] for ext-gen12

Answer 2

If there is an element above the button that is uniquely identifiable you could search only in that scope, assuming that the button is the only button in that scope. You could also try to partially match the button id (not sure if the entire thing changes, or just part of it) or match the button's class if it does not change. If there is no way to identify a unique parent or ancestor (I wouldn't know since you didn't provide the entire html), you could first find the <div id="LoginButton"> and then go back up from there 3 levels and then find the button under that. That XPath would look like this:

//div[@id="LoginButton"]/../../../button

Answer 3

If you're already using XPath for this, can you start your XPath earlier on, for example, from the table that it appears as though this is in.

Answer 4

You can try getting all button values into an array and then select whichever you need. In Selenium API we have getAllButtons() method through which we can get all button's ids. Store this into an array as

String allbuttonIds [] = selenium.getAllButtons();

And then access the button whichever you want by index.

Answer 5

Try to use more than one identification value. This should work.

Or record the script using IDE and see what it picks up. Use the value IDE picks up. This also works.

But be careful. If you are running your script in IE and the IDE has picked up the CSS path, then you may get some problem.