Data Test IDs

data-test-ids.md

A data-testid attribute should be included for every testable element. Testable elements are defined as elements which the user interacts with or which has dynamically changing content.

Usage

• <MyComp data-testid={...}>

Format

{namespace}.{nav item}.{page component}.[distinguisher]

• Namespace

  • active product from the ProductMenu

  • mg for Mailgun, ir for InboxReady, portal for settings/shared components

• Navigation item

  • What the user clicked to arrive at the tested content

  • In most cases, refers to the left side menu, potentially with child option: - dashboard - sendingDomains - inboxPlacementSeedLists

  • May also refer to ProfileMenu options: - profileMenuAccountSettingsPlan&Billing - profileMenuEmailSettingsDomainMonitoring

• Page component

  • Prefixed with the feature name plus a container type suffix

  • Type of containers content exists within:

    • Card - non-interactive display element
    • Panel - Like a card, but with a header and interactive UX elements
    • Tab - if the content requires clicking on a tab to reveal
    • Table/TableRow - content displayed within a table or the specific row of a table
    • Details - Typically, when a table row shows expanded content

  • 

• Distinguisher

  • Optional when only the page component needs to be selected

  • Uniquely identifies the selectable content within the feature group

  • When interactable, identifies control type: select, button, input, etc.

  • Graph When refering to infographics: lineGraph, barGraph, or pieGraph

• Examples

  • mg.dashboard.deliveredStatCard.percentage
  • mg.dashboard.deliveredStatCard.count
  • mg.dashboard.deliveredStatCard.total
  • mg.sendingIps.ipAddressesTable.search
  • mg.sendingIps.ipAddressesTableRow.address
  • mg.receiving.testYourRoutePanel.testButton
  • ir.verificationsVerify.verifyAddressesInBulkTab.remaining
  • ir.verificationsVerify.verifyAddressesInBulkTab.slider
  • ir.verificationsVerify.verifyAddressesInBulkTab.estimationInput
  • ir.verificationsVerify.verifiedListsTable.actionsButton
  • ir.verificationsVerify.verifiedListsDetails.summaryPieGraph
  • ir.verificationsVerify.verifiedListsDetails.riskHigh

<libraryName.featurePart.componentName.componentIdentifier>

Thinking even further, we might not even need featurePart since we really shouldn't have multiple components named the same within the same lib.