CODEWITHSUNDEEP
protractor
Prudhvi Gv
Prudhvi Gv

Reputation: 1

How to select specific data in dynamic table using protractor?

I am trying to automate some scenarios using protractor where we need to verify whether the data is updating in dynamic table.

Please find below

HTML Code: enter image description here

Table in page: enter image description here

Upvotes: 0

Views: 219

Answers (2)

ChadESmith42
ChadESmith42

Reputation: 53

I'm assuming you're using Angular2+, yes?

In your HTML Template, you are probably using an *ngFor directive to populate the table dynamically. Add an index to the *ngFor (it's best practices for updating the DOM) in order to add a dynamic id to each element:

    <tr *ngFor="let user of user; index as u" id="user-{{u + 1}}">
        <td id="userName-{{u + 1}}">
            {{user.firstName}} {{user.userName}}<br />
            {{user.userName}}
        </td>
        <td id="userRoles-{{ u + 1 }}">
            <span id="role-{{u + 1}}-{{ r + 1 }}" *ngFor="let role of user.roles; index as r">
                {{ role.toUpperCase() + ', '}}
            </span>
        </td>
        <!- Omitted code -->
    </tr>

In your Page Object:

// Get first user on the table
get firstUser() {
    return element(by.id('user-1');
}

// Get a specific user by id
public getUser(index: number) {
    return element(by.id(`user-${index}`);
}

// Get all of the attributes for a single user by id
get userAttributes(index: number) {
    return element.all(by.id(`user-${index}`);
}

I am not a fan of xpath selectors. Yes, they are faster. But in code that is dynamic or changes frequently, they are the most fragile of selectors. There is no reason your dynamic data cannot have a dynamic ID that clearly identifies each portion of the code you need.

Good luck!

Upvotes: 0

V.Varshney
V.Varshney

Reputation: 151

It can be done by verifying that element is present in the DOM with the added Group ID or Group Name.

For Group ID:

element(by.xpath("*//table//tbody//tr//td[1]//p[text()='Amanda Test Group']")).isDisplayed()

For Group name:

element(by.xpath("*//table//tbody//tr//td[2]//p[text()='Amanda Group']")).isDisplayed()

Upvotes: 2

Related Questions