Protractor: Iterate through table <td> and click the link by TEXT

Question

Requirement : link is present inside table >td>p>a.

I want to click on link by TEXT (something like contains(Text))

Tried: by.CssContainsText("a","Text") . I did not work, as multiple entry with same text is present

Basically I would like to know "HOW TO ITERATE THROUGH TABLE AND CLICK BY VISIBLE TEXT". Check if passed text is present, if so click that particular link

<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-datepicker-multi ui-datepicker-multi-2" style="display: block; width: 34em;">
<div class="ui-datepicker-group ui-datepicker-group-first">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-left">
<table class="ui-datepicker-calendar">
   <thead>
   <tbody>
      <tr>
      <tr>
      <tr>
      <tr>
      <tr>
         <td class=" ui-datepicker-unselectable ui-state-disabled ">
         <td class="ui-datepicker-days-cell-over ui-datepicker-current-day ui-datepicker-today" data-year="2018" fare-date="1537813800000" data-month="8" data-event="click" data-handler="selectDay">
         <td data-year="2018" fare-date="1537900200000" data-month="8" data-event="click" data-handler="selectDay">
            <a class="ui-state-default" href="#">26</a>
            <span class="calendarPrice">3795</span>
         </td>
         <td class=" " data-year="2018" fare-date="1537986600000" data-month="8" data-event="click" data-handler="selectDay">
         <td class=" " data-year="2018" fare-date="1538073000000" data-month="8" data-event="click" data-handler="selectDay">
         <td class=" ui-datepicker-week-end " data-year="2018" fare-date="1538159400000" data-month="8" data-event="click" data-handler="selectDay">
         <td class=" ui-datepicker-week-end " data-year="2018" fare-date="1538245800000" data-month="8" data-event="click" data-handler="selectDay">
      </tr>
   </tbody>
</table>

Answer 1

You only seem to have one 'a' in the sample table included in your query currently:

<a class="ui-state-default" href="#">26</a>

If it helps (and if you have multiple a tags in your DOM), you can try using:

ArrayList aList = driver.findElements(By.tagName("a"));

which will give you a 'list' of elements with the 'a' tag, and then use a foreach() to iterate through each element and add a 'getText()' to each.

Hope that helps. Happy coding!

Answer 2

You may click a link inside a table without iteration as below:

element(by.cssContainingText('table[class="ui-datepicker-calendar"] tr td a',"text").click()

This will find unique link with given text inside the table row cell where table having an specific class.

One important point the space between table, tr and td signifies that it can be descendent element on any level.It helps in scenarios where DOM hirarchy is not fixed and may change at runtime so solution becomes flexible however by giving the class of table , we made it bit unique as well, to maintain the balance.

Ultimately any good locator, consists of both contradicting properties - Flexibility and uniqueness.