Unable to locate html table element Selenium java

Question

I have a html table which displays all existing keywords. Users can search keywords and searched keywords results also display in the same html table.For an example,

This is the table before search.

<div id="keyword-grid" class="grid-view">
<div class="summary">Displaying 1-4 of 4 results.</div>
<table class="items table table-striped">
<thead>
<tr>
<th id="keyword-grid_c0"><a class="sort-link" href="/index.php/keyword/Admin?Keyword_sort=name">Name<span class="caret"></span></a></th><th id="keyword-grid_c1"><a class="sort-link" href="/index.php/keyword/Admin?Keyword_sort=behaviour">Behaviour<span class="caret"></span></a></th><th id="keyword-grid_c2"><a class="sort-link" href="/index.php/keyword/Admin?Keyword_sort=status">Status<span class="caret"></span></a></th><th id="keyword-grid_c3"><a class="sort-link" href="/index.php/keyword/Admin?Keyword_sort=createdAt">Created At<span class="caret"></span></a></th><th id="keyword-grid_c4"><a class="sort-link" href="/index.php/keyword/Admin?Keyword_sort=createdBy">Created By<span class="caret"></span></a></th><th class="button-column" id="keyword-grid_c5">&nbsp;</th></tr>
</thead>
<tbody>
<tr class="odd">
<td>Oppo</td><td>Manual</td><td><span class="badge badge-success">Active</span></td><td>2018-01-23 11:50:45</td><td>Production Test</td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/index.php/keyword/View/55"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/index.php/keyword/update/55"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/index.php/keyword/delete/55"><i class="icon-trash"></i></a></td></tr>
<tr class="even">
<td>Android Headlines</td><td>Manual</td><td><span class="badge badge-success">Active</span></td><td>2018-01-23 11:50:34</td><td>Production Test</td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/index.php/keyword/View/54"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/index.php/keyword/update/54"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/index.php/keyword/delete/54"><i class="icon-trash"></i></a></td></tr>
<tr class="odd">
<td>Android</td><td>Manual</td><td><span class="badge badge-success">Active</span></td><td>2018-01-23 11:50:12</td><td>Production Test</td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/index.php/keyword/View/53"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/index.php/keyword/update/53"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/index.php/keyword/delete/53"><i class="icon-trash"></i></a></td></tr>
<tr class="even">
<td>test</td><td>Manual</td><td><span class="badge badge-important">Deleted</span></td><td>2018-01-23 07:37:53</td><td>Production Test</td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/index.php/keyword/View/52"><i class="icon-eye-open"></i></a>  </td></tr>
</tbody>
</table>
<div class="keys" style="display:none" title="/index.php/Keyword/Admin"><span>55</span><span>54</span><span>53</span><span>52</span></div>
</div>

And this the table with search results

<div id="keyword-grid" class="grid-view">
<div class="summary">Displaying 1-2 of 2 results.</div>
<table class="items table table-striped">
<thead>
<tr>
<th id="keyword-grid_c0"><a class="sort-link" href="/index.php/keyword/Admin?Keyword%5BfromDate%5D=&amp;Keyword%5BtoDate%5D=&amp;Keyword%5Bstatus%5D=&amp;Keyword%5Bbehaviour%5D=&amp;Keyword%5Bname%5D=android&amp;ajax=keyword-grid&amp;Keyword_sort=name">Name<span class="caret"></span></a></th><th id="keyword-grid_c1"><a class="sort-link" href="/index.php/keyword/Admin?Keyword%5BfromDate%5D=&amp;Keyword%5BtoDate%5D=&amp;Keyword%5Bstatus%5D=&amp;Keyword%5Bbehaviour%5D=&amp;Keyword%5Bname%5D=android&amp;ajax=keyword-grid&amp;Keyword_sort=behaviour">Behaviour<span class="caret"></span></a></th><th id="keyword-grid_c2"><a class="sort-link" href="/index.php/keyword/Admin?Keyword%5BfromDate%5D=&amp;Keyword%5BtoDate%5D=&amp;Keyword%5Bstatus%5D=&amp;Keyword%5Bbehaviour%5D=&amp;Keyword%5Bname%5D=android&amp;ajax=keyword-grid&amp;Keyword_sort=status">Status<span class="caret"></span></a></th><th id="keyword-grid_c3"><a class="sort-link" href="/index.php/keyword/Admin?Keyword%5BfromDate%5D=&amp;Keyword%5BtoDate%5D=&amp;Keyword%5Bstatus%5D=&amp;Keyword%5Bbehaviour%5D=&amp;Keyword%5Bname%5D=android&amp;ajax=keyword-grid&amp;Keyword_sort=createdAt">Created At<span class="caret"></span></a></th><th id="keyword-grid_c4"><a class="sort-link" href="/index.php/keyword/Admin?Keyword%5BfromDate%5D=&amp;Keyword%5BtoDate%5D=&amp;Keyword%5Bstatus%5D=&amp;Keyword%5Bbehaviour%5D=&amp;Keyword%5Bname%5D=android&amp;ajax=keyword-grid&amp;Keyword_sort=createdBy">Created By<span class="caret"></span></a></th><th class="button-column" id="keyword-grid_c5">&nbsp;</th></tr>
</thead>
<tbody>
<tr class="odd">
<td>Android Headlines</td><td>Manual</td><td><span class="badge badge-success">Active</span></td><td>2018-01-23 11:50:34</td><td>Production Test</td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/index.php/keyword/View/54"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/index.php/keyword/update/54"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/index.php/keyword/delete/54"><i class="icon-trash"></i></a></td></tr>
<tr class="even">
<td>Android</td><td>Manual</td><td><span class="badge badge-success">Active</span></td><td>2018-01-23 11:50:12</td><td>Production Test</td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/index.php/keyword/View/53"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/index.php/keyword/update/53"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/index.php/keyword/delete/53"><i class="icon-trash"></i></a></td></tr>
</tbody>
</table>
<div class="keys" style="display:none" title="/index.php/Keyword/Admin?Keyword%5BfromDate%5D=&amp;Keyword%5BtoDate%5D=&amp;Keyword%5Bstatus%5D=&amp;Keyword%5Bbehaviour%5D=&amp;Keyword%5Bname%5D=android&amp;ajax=keyword-grid"><span>54</span><span>53</span></div>
</div>

I tried to print the first search result using below code,

System.out.print(driver1.findElement(By.xpath("//*[@id=\"keyword-grid\"]/table/tbody/tr[1]")).getText());

But instead of showing the first search result "android headlines" it shows the "Oppo" which was the first record of the all existing keywords.

How can I get the value of first search result?

Answer 1

In modern world quite a big part of functionality is implemented on a client side. This means there is a javascript loaded with your page and when you submit some request (in your example - apply search to the table) the page is not getting reloaded actually. There could be a separate request generated by one piece of Javascript to the server to return data in JSON (in the most of the cases) format that is later to be parsed by another piece of Javascript and used for building new table with filtered data.

Since page is not reloaded, selenium searches for elements in current DOM. However it usually takes some time for the client to send request, get data, parse them and build new DOM. This is why you should either introduce explicit delays (which is not always reliable) or find the way how to distinguish filtered results from not filtered ones using xPath or other type of locators.