angular protractor drag and drop test

Question

I am trying to test a drag and drop feature in my angular app, but it's not working.

my test

it('should plan a sprint', async () => {
    let backlog = await browser.driver.findElement(by.id("backlog"));
    let sprint = await browser.driver.findElement(by.id("sprint"));

    let backlogRows = await backlog.findElements(by.tagName("tr"));
    for(let i = 2; i < 5; i++)
    {
        console.log(backlogRows[i]);
        await browser.actions().dragAndDrop(backlogRows[i], sprint).mouseUp().perform();
    }

});

In my html I have two tables the backlog table contains 5 rows excluding the header at the time the test runs. I am trying to drag and drop rows from my backlog table to my sprint table

my html

<div>
<div class="d-flex justify-content-around mt-5 mb-5" *ngIf="sprint | async">
    <div class="w-10">
        <main-button (click)="navigateToAllSprints()" [label]="'Sprints'"></main-button>
    </div>
    <div class="d-flex flex-column w-50">
        <mat-slide-toggle
            [(ngModel)]="isCurrentSprint" 
            (change)="handleCurrentSprint($event.source.checked)">
                {{ isCurrentSprint ? "Close Sprint" : "Set as current sprint" }}
        </mat-slide-toggle>
        <span class="text-danger mt-3 text-center">{{ activeSprintErrorMessage }}</span>
    </div>
    <div class="w-10">
        <main-button (click)="navigateToAllSprintDetails()" [label]="'Edit Details'"></main-button>
    </div>
</div>
<div cdkDropListGroup
    class="d-flex justify-content-around">
    <div class="w-40" *ngIf="backlogDataSource?.userstories">
        <h2>Backlog</h2>
        <table 
            mat-table [dataSource]="backlogDataSource" 
            cdkDropList
            [cdkDropListData]="backlogDataSource.userstories | async"
            (cdkDropListDropped)="drop('backlog', $event)"
            cdkDropListSortingDisabled = "false"
            class="w-100"
            id="backlog">
            <!-- Assignee Column -->
            <ng-container matColumnDef="assignee">
                <th mat-header-cell *matHeaderCellDef class="w-10"> <h2>Assignee</h2> </th>
                <td mat-cell *matCellDef="let userstory"> <p>{{userstory.assignee}}</p> </td>
            </ng-container>

            <!-- Name Column -->
            <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef class="w-25"> <h2>Name</h2> </th>
                <td mat-cell *matCellDef="let userstory"> <p class="truncate">{{userstory.name}}</p> </td>
            </ng-container>
        
            <tr class="mat-row" *matNoDataRow>
                <td class="mat-cell text-center" colspan="5">No userstories found in the backlog</td>
            </tr>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr 
                mat-row 
                *matRowDef="let userstory; columns: displayedColumns;"
                routerLink="/project/{{projectId}}/userstory/{{userstory.id}}/details"
                cdkDrag 
                [cdkDragData]=userstory>
            </tr>
        </table>
    </div>
    <div class="w-40" *ngIf="sprintDataSource?.userstories">
        <h2>{{ (sprint | async)?.name }}</h2>
        <table 
            mat-table [dataSource]="sprintDataSource" 
            cdkDropList
            [cdkDropListData]="sprintDataSource.userstories | async"
            (cdkDropListDropped)="drop(sprintName, $event)"
            cdkDropListSortingDisabled = "false"
            class="w-100"
            id="sprint">
            <!-- Assignee Column -->
            <ng-container matColumnDef="assignee">
                <th mat-header-cell *matHeaderCellDef class="w-10"> <h2>Assignee</h2> </th>
                <td mat-cell *matCellDef="let userstory"> <p>{{userstory.assignee}}</p> </td>
            </ng-container>

            <!-- Name Column -->
            <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef class="w-25"> <h2>Name</h2> </th>
                <td mat-cell *matCellDef="let userstory"> <p class="truncate">{{userstory.name}}</p> </td>
            </ng-container>
        
            <tr class="mat-row" *matNoDataRow>
                <td class="mat-cell text-center" colspan="5">No userstories found in this sprint</td>
            </tr>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr 
                mat-row 
                *matRowDef="let userstory; columns: displayedColumns;"
                routerLink="/project/{{projectId}}/userstory/{{userstory.id}}/details"
                cdkDrag 
                [cdkDragData]=userstory>
            </tr>
        </table>
    </div>
</div>

I already tried

await browser.driver.actions().dragAndDrop(backlogRows[i], sprint).mouseUp().perform();

but it also does not work.What am I doing wrong and how do I get the drag and drop in protractor to work?

what's wrong with other solutions available on stackoverflow? — Sergey Pleshakov, Jun 22 '21 at 17:32
I'm also not sure why you use `browser.driver.findElement` syntax if regular protractor syntax is `element(by.id("backlog"))`. And you don't need to `await` it — Sergey Pleshakov, Jun 22 '21 at 17:33
element(by.id("backlog")) does not work. It has something to do with protractor not able to handle the way angular loads components — Jiren, Jun 22 '21 at 20:49
@SergeyPleshakov the other solutions available don't work for me — Jiren, Jun 22 '21 at 21:01
I'm pretty sure your problem is not in drag and drop. Th method I described in the link works for me on angular pages as well as non angular pages, so why would it not work for you — Sergey Pleshakov, Jun 23 '21 at 13:05
If I were I would start by making sure you don't need to waitForAngularEnabled in your code. Another problem that's common is make sure you resolve promises properly — Sergey Pleshakov, Jun 23 '21 at 13:06

angular protractor drag and drop test

0 Answers0