XPATH Query for Angular 10 Application

Issue

I’ve finished building a simple web application using Angular 10 for the front end. Now I’m in the process of writing a test script using pytest and Selenium web driver. I’m having trouble finding a reliable XPATH to check for the presence of text on the ‘Star’ page of my web app. Included below is a pic of what the app looks like.

The test is relatively straightforward: navigate to the ‘Star’ page and check for the presence of a particular star (namely Sol) in the table. That’s it. I can’t seem to find a valid XPATH to the text, however. I’ve been in Developer Tools trying different XPATH queries, but none of them work…for anything. Buttons, text, etc.

I’ve also included the HTML code for the page in question: show-star.component.html

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary float-right m-2" 
data-bs-toggle="modal" data-bs-target="#exampleModal"
(click)="addClick()"
data-backdrop="static" data-keyboard="false"
>
    Add Star
  </button>
  
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">{{ModalTitle}}</h5>
          <button type="button" class="btn-close" 
          data-bs-dismiss="modal" aria-label="Close"
          (click)="closeClick()" >
        </button>
        </div>
        <div class="modal-body">
            <app-add-edit-star [star]="star" *ngIf="ActivateAddEditStarComp"> 
            </app-add-edit-star>
        </div>
      </div>
    </div>
  </div>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Star ID</th>
            <th>Star Name</th>
            <th>Options</th>
        </tr> 
    </thead>
    <tbody>
        <tr *ngFor="let dataItem of StarList">
            <td>{{dataItem.StarID}}</td>
            <td>{{dataItem.StarName}}</td>
            <td>
                <button type="button" class="btn btn-light mr-1"
                data-bs-toggle="modal" data-bs-target="#exampleModal"
                (click)="editClick(dataItem)"
                data-backdrop="static" data-keyboard="false">
                    Edit
                </button>
                <button type="button" class="btn btn-light mr-1"
                (click)="deleteClick(dataItem)">
                    Delete
                </button>
            </td>
        </tr>
    </tbody>
</table>

I’d think it would be something as simple as //div[contains(text(),’Sol’)] but nothing seems to work.
What exactly am I doing wrong here?

Edit 1:
The XPATH //td[contains(text(),’Sol’)] doesn’t match any selector in Dev Tools

Edit 2: here is a snip of the code in Dev Tools

Solution

Are you sure it’s wrapped in a div?

"//td[contains(text(),'Sol')]"

Answered By – ljlozano

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0