The application I am testing recently updated it Angular 4, and now there are certian elements I can not match via text. Here is a small HTML snipit of the applicaition:
<!----><div _ngcontent-c14="" class="form-group row">
<label _ngcontent-c14="" class="col-2 col-form-label" for="example-text-input">Lift Pump Relay</label>
<div _ngcontent-c14="" class="col-10">
<div _ngcontent-c14="" ngbdropdown="" class="dropdown">
<button _ngcontent-c14="" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" ngbdropdowntoggle="" aria-expanded="false">Selected: Off</button>
<div _ngcontent-c14="" class="dropdown-menu">
<!----><button _ngcontent-c14="" class="dropdown-item"> On
</button><button _ngcontent-c14="" class="dropdown-item"> Off
</button><button _ngcontent-c14="" class="dropdown-item"> Toggle
</button>
</div>
</div>
</div>
</div>
<div _ngcontent-c14="">
<!---->
<!---->
<!---->
</div>
<!---->
<!---->
<!----><div _ngcontent-c14="" class="wi-actuator-control-buttons">
<button _ngcontent-c14="" class="btn btn-secondary">
<i _ngcontent-c14="" class="fa fa-times"></i> Exit
</button>
<!----><button _ngcontent-c14="" class="btn btn-secondary">
<i _ngcontent-c14="" class="fa fa-gears"></i> Start
</button>
<!---->
</div>
</div>
I am able to access the On/off/Toggle buttons using text like so:
//button[contains(text(), 'On')] //using the on button in this example
but for some reason this does not work with the Start and Exit buttons like so:
//button[contains(text(), 'Exit')] //using Exit for this example
This is the case in many place around the app, and it appears to be related to that "i" element that's nested inside the button. (for example the Exit button has <i _ngcontent-c14="" class="fa fa-times"></i> nested within) When that "i" element is present in the button I can't seem to match the element via text.
Does anyone know why this is happening.
(Please do not tell me to simply use CSS or Jquery (unless that's literally the only option). that's not what this question is asking)