I have a frontend built with html/typescript that features a table of variable length containing action buttons in one of the columns. I am looking to create a Cypress test that will click on the first button of the first row, carry out a specific task, and then continue to click on the first button of each subsequent row to perform the same task.
Here is an initial preview of the table with the leftmost button that needs to be clicked for each row:
https://i.stack.imgur.com/U9D3k.png
Upon clicking the leftmost button for a row, a dialog box appears where the user must input values into two text fields before clicking OK:
https://i.stack.imgur.com/HljnX.png
In the actual application, the user can repeat this process for as many rows as needed.
The code snippet for the confirmation dialog looks like this:
<p-dialog class="e2e-mark--confirm-dialog" header="Publish Report" [modal]="true"
[(visible)]="showPublishReportDialog" (onHide)="cancelPublishReport()" [style]="{width: '30vw'}"><div class="detail-row">
<div class="detail-property-container">
<span class="selector-item-type detail-label">
Notes: *
</span>
<input id="notes" pInputText maxlength="50" formControlName="notes" [(ngModel)]="publishReportNotes"
[style]="{width: '20vw'}" [attr.data-cy]="'publishReportNotesText'">
</div>
<div class="detail-property-container">
<span class="selector-item-type detail-label">
Comments: *
</span>
<input id="comments" pInputText maxlength="50" formControlName="comments" [(ngModel)]="publishReportComments"
[style]="{width: '20vw'}" [attr.data-cy]="'publishReportCommentsText'">
</div>
<span *ngIf="publishDraftInLaps" class="selector-item-type detail-label">
This will also create a draft PCD in LAPS Planning & Scheduling - which will take a few minutes.
</span>
</div>
<hr />
<p-footer>
<button pButton label="Cancel" (click)="cancelManageWeaponSystemsDialog()"></button>
<button pButton label="OK" (click)="publishReport(false)"
[disabled]="publishReportForm.invalid" [attr.data-cy]="'publishReportButton'"></button>
</p-footer>
</form>
</p-dialog>
Additionally, here is a segment of code from my test.cy.ts file:
The objective is to iterate through the rows of the table and execute the same functionality by clicking on the left button, filling in the dialog, and clicking OK for each row:
cy.get('tbody > tr')
.each(($row, $rowIndex) => {
cy.log('rowIndex: ' + $rowIndex);
let cell = $row.find('td:nth-child(2)');
cy.log('publishin the ' + cell.text().trim() + ' file');
let actionButtons = $row.find('td:nth-child(1)');
let publishButton = actionButtons.children().first();
publishButton.click();
cy.setInputText('[data-cy="publishReportNotesText"]','Report Notes for ' + cell.text().trim());
cy.setInputText('[data-cy="publishReportCommentsText"]','Report Comments for ' + cell.text().trim());
cy.get('[data-cy="publishReportButton"]').click();
});
While this flow works smoothly for the first row processed, it encounters issues with the second row:
The dialog does not appear for the second row, preventing any inputs into the confirmation dialog:
'cy.type()' fails due to targeting a disabled element.
Any advice or suggestions would be greatly appreciated. Thank you.