onflow / kitty-items

Kitty Items: CryptoKitties Sample App

Home Page:https://kitty-items.onflow.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add Cypress tags to FCL repos

codingone21 opened this issue · comments

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.

// 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