onflow / kitty-items

Data tags, specifically "data-cy" is used to search and identify web components for cypress testing. This is a better practice when selecting elements - see: https://docs.cypress.io/guides/references/best-practices#Selecting-Elements.

We added data-cy tags to the repos in our control, but we could also add it to the external repositories that we 'pull' web components from. An example scenario is below, where we search for components from FCL wallet without using the data-cy tags.

kitty-items/cypress/e2e/emulator.cy.js

Line 44 in 0325c2d

    
           // FCL wallet runs in iframe, and we can currently only access the elements by searching for its contents, rather

      // FCL wallet runs in iframe, and we can currently only access the elements by searching for its contents, rather
      // than labelling elements like data-cy=... Adding data tags would require changes in FCL
      getIframeBody().contains("Create New Account").click();
      getIframeBody().contains("button", "Create").click();
      getIframeBody().contains("Account Created").should("exist");

Eventually, it would be nice to modify web components like the above to contain data-cy tags. This means that we go into repos like 'fcl-dev-wallet' and update the source code there. For the example above, the source could would be:
https://github.com/onflow/fcl-dev-wallet/blob/1602ca26289f51908220320255092f6962335933/components/AccountsList.tsx

Add Cypress tags to FCL repos