[Duplicate Test-Ids] Same test-ids are used in multiple elements

[Ryun1]

This issue makes it difficult to interact with the elements.

1. demos-wallet-button: There are 2 demos-wallet-button test-ids

2. confirm-modal-button

[Thomas-Upfield]

Jan needs to contact the DQuadrant team.

[Thomas-Upfield]

@IntersectMBO/govtool-test DQuad can you please add more details. Please get in contact with @JanJaroszczak.

[NabinKawan]

Here, multiple elements share the same test-ids for both 'demos-wallet-button' and 'confirm-modal-button', causing confusion in identifying the correct element to interact with during testing. Additionally, the element intended for interaction is obscured by another element.

This issue is addressed through the following Cypress commands:

cy.getBySel("demos-wallet-button").eq(1).click({ force: true });
cy.getBySel("confirm-modal-button").first().click({ force: true });

In these commands, 'force: true' is employed to forcefully click the intended element within the list.

[JanJaroszczak]

I might have overlooked something, but when i look at the code i see only once test ids like 'demos-wallet-button' and 'confirm-modal-button'. @NabinKawan, I'll contact you on Slack - it will be easier to discuss it there.

[JanJaroszczak]

We've discussed it with @NabinKawan. I know where's the issue - solving in progress.

[pmbinapps]

Current data-test-id in test branch for above ids:
govtool % egrep -R 'data-testid.*confirm-modal-button' * govtool/frontend/src/components/organisms/StatusModal.tsx: data-testid={"confirm-modal-button"} govtool % egrep -R 'data-testid.*demos-wallet-button' * %

No other data-test-id occurred.
Ready to merge to stage.

All usage:
% grep -R demos-wallet-button * tests/govtool-frontend/cypress/e2e/actions/commonActions.ts: cy.getBySel("demos-wallet-button").eq(1).click({ force: true }); tests/govtool-frontend/cypress/e2e/actions/commonActions.ts: cy.getBySel("demos-wallet-button").eq(1).click({ force: true }); tests/govtool-frontend/cypress/e2e/actions/commonActions.ts: // cy.getBySel("demos-wallet-button").click(); tests/govtool-frontend/cypress/e2e/actions/commonActions.ts: cy.getBySel("demos-wallet-button").eq(1).click({ force: true }); % grep -R confirm-modal-button * govtool/frontend/src/components/organisms/StatusModal.tsx: data-testid={"confirm-modal-button"} govtool/frontend/src/stories/modals/StatusWithLink.stories.tsx: await userEvent.click(modalCanvas.getByTestId("confirm-modal-button")); govtool/frontend/src/stories/modals/StatusModal.stories.tsx: await userEvent.click(modalCanvas.getByTestId("confirm-modal-button")); tests/govtool-frontend/cypress/e2e/2_user_story_delegate_to_drep.cy.ts: cy.getBySel("confirm-modal-button").first().click({ force: true }); tests/govtool-frontend/cypress/e2e/6_user_story_miscellaneous.cy.ts: cy.getBySel("confirm-modal-button").first().click({ force: true }); tests/govtool-frontend/cypress/e2e/actions/delegateActions.ts: cy.getBySel("confirm-modal-button").first().click({ force: true }); tests/govtool-frontend/cypress/e2e/actions/dRepActions.ts: cy.getBySel("confirm-modal-button").first().click({ force: true }); tests/govtool-frontend/cypress/e2e/actions/dRepActions.ts: cy.getBySel("confirm-modal-button").first().click({ force: true }); tests/govtool-frontend/cypress/e2e/actions/commonActions.ts: cy.getBySel("confirm-modal-button").first().click({ force: true }); // accept the info about sancho net}; tests/govtool-frontend/cypress/e2e/actions/commonActions.ts: cy.getBySel("confirm-modal-button").first().click({ force: true }); // accept the info about sancho net tests/govtool-frontend/cypress/e2e/actions/commonActions.ts: cy.getBySel("confirm-modal-button").first().click({ force: true }); // accept the info about sancho net};