From a4143cb8031e019d360d167cf45dd1fbb038b95b Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti573@gmail.com>
Date: Wed, 17 Jul 2019 18:16:12 -0400
Subject: [PATCH] feat: adds data attributes to simplify selectors for Cypress
 testing

---
 README.md                                     |  15 +++
 packages/appChrome/components/AppChrome.tsx   |  12 +-
 packages/appChrome/components/SidebarItem.tsx |   6 +
 .../appChrome/components/SidebarSection.tsx   |   2 +-
 .../appChrome/components/SidebarSubMenu.tsx   |   6 +-
 .../components/SidebarSubMenuItem.tsx         |   6 +-
 .../__snapshots__/AppChrome.test.tsx.snap     |   5 +-
 .../tests/__snapshots__/Sidebar.test.tsx.snap |  13 ++-
 packages/avatar/components/Avatar.tsx         |   1 +
 .../tests/__snapshots__/avatar.test.tsx.snap  |   2 +
 packages/badge/components/badge.tsx           |   6 +-
 packages/badge/components/badgeButton.tsx     |   2 +-
 .../tests/__snapshots__/badge.test.tsx.snap   |   7 ++
 .../__snapshots__/badgeButton.test.tsx.snap   |   7 ++
 packages/breadcrumb/components/Breadcrumb.tsx |   1 +
 .../__snapshots__/Breadcrumb.test.tsx.snap    |   4 +
 packages/button/components/DangerButton.tsx   |   6 +-
 .../components/DangerDropdownButton.tsx       |   6 +-
 packages/button/components/PrimaryButton.tsx  |   6 +-
 .../components/PrimaryDropdownButton.tsx      |   6 +-
 .../button/components/SecondaryButton.tsx     |   6 +-
 .../components/SecondaryDropdownButton.tsx    |   6 +-
 packages/button/components/StandardButton.tsx |   6 +-
 .../components/StandardDropdownButton.tsx     |   6 +-
 packages/button/components/SuccessButton.tsx  |   6 +-
 .../components/SuccessDropdownButton.tsx      |   6 +-
 packages/card/components/Card.tsx             |   2 +-
 .../tests/__snapshots__/Card.test.tsx.snap    |   3 +
 .../components/CheckboxInput.tsx              |  18 +++
 .../__snapshots__/CheckboxInput.test.tsx.snap |  31 +++++-
 packages/clickable/components/clickable.tsx   |  10 +-
 .../components/ConfigurationMap.tsx           |   7 +-
 .../components/ConfigurationMapHeading.tsx    |   1 +
 .../components/ConfigurationMapLabel.tsx      |   9 +-
 .../components/ConfigurationMapRow.tsx        |  42 +++----
 .../components/ConfigurationMapRowAction.tsx  |   5 +-
 .../components/ConfigurationMapSection.tsx    |   9 +-
 .../components/ConfigurationMapValue.tsx      |   9 +-
 packages/configurationmap/style.ts            |  19 ++++
 .../tests/ConfigurationMap.test.tsx           |  20 +---
 .../ConfigurationMap.test.tsx.snap            |  75 +++++++++++--
 .../tests/__snapshots__/HashMap.test.tsx.snap |  39 ++++++-
 packages/donutChart/components/DonutChart.tsx |   9 +-
 .../__snapshots__/DonutChart.test.tsx.snap    |   5 +
 .../dropdowMenu/components/DropdownMenu.tsx   |   1 +
 .../components/DropdownMenuItem.tsx           |   1 +
 .../__snapshots__/DropdownMenu.test.tsx.snap  |   1 +
 .../DropdownMenuItem.test.tsx.snap            |   5 +
 .../__snapshots__/Dropdownable.test.tsx.snap  |   4 +
 packages/icon/components/Icon.tsx             |   1 +
 .../tests/__snapshots__/Icon.test.tsx.snap    |   2 +
 packages/infobox/components/InfoBox.tsx       |  14 ++-
 .../tests/__snapshots__/InfoBox.test.tsx.snap |   5 +
 packages/list/components/BorderedList.tsx     |   5 +-
 packages/list/components/List.tsx             |   2 +-
 .../__snapshots__/BorderedList.test.tsx.snap  |   1 +
 .../tests/__snapshots__/List.test.tsx.snap    |   2 +
 packages/modal/components/DialogModal.tsx     |  13 ++-
 packages/modal/components/FullscreenModal.tsx |   3 +
 packages/modal/components/ModalBase.tsx       |  19 +++-
 packages/modal/components/ModalContents.tsx   |   9 +-
 .../tests/__snapshots__/Modal.test.tsx.snap   |  60 ++++++++++
 packages/pageheader/components/PageHeader.tsx |   6 +-
 .../__snapshots__/PageHeader.test.tsx.snap    |   6 +
 .../selectInput/components/SelectInput.tsx    |  24 +++-
 .../__snapshots__/SelectInput.test.tsx.snap   |   6 +-
 .../layout/container/components/Container.tsx |   4 +-
 .../__snapshots__/Container.test.tsx.snap     |   1 +
 .../layout/flexbox/components/Flex.tsx        |   1 +
 .../layout/flexbox/components/FlexItem.tsx    |   1 +
 .../tests/__snapshots__/Flex.test.tsx.snap    |   3 +
 .../__snapshots__/FlexItem.test.tsx.snap      |   3 +
 .../layout/gridList/components/GridList.tsx   |   1 +
 .../__snapshots__/GridList.test.tsx.snap      |   3 +
 .../modifiers/components/BorderedBox.tsx      |   1 +
 .../styleUtils/modifiers/components/Box.tsx   |  12 +-
 .../modifiers/components/SpacingBox.tsx       |   6 +-
 .../__snapshots__/BorderedBox.test.tsx.snap   |   2 +
 .../tests/__snapshots__/Box.test.tsx.snap     |   2 +
 .../__snapshots__/SpacingBox.test.tsx.snap    |   3 +
 .../typography/components/CaptionText.tsx     |   7 +-
 .../typography/components/DangerText.tsx      |   2 +-
 .../typography/components/HeadingText1.tsx    |   2 +-
 .../typography/components/HeadingText2.tsx    |   8 +-
 .../typography/components/HeadingText3.tsx    |   2 +-
 .../typography/components/InteractiveText.tsx |   1 +
 .../typography/components/MonospaceText.tsx   |   1 +
 .../typography/components/SmallText.tsx       |   7 +-
 .../typography/components/SuccessText.tsx     |   2 +-
 .../styleUtils/typography/components/Text.tsx |  20 +++-
 .../typography/components/WarningText.tsx     |   2 +-
 .../typographyComponents.test.tsx.snap        |  25 +++++
 packages/table/components/CheckboxTable.tsx   |   8 +-
 packages/table/components/Table.tsx           |  19 +++-
 .../__snapshots__/CheckboxTable.test.tsx.snap | 104 ++++++++++++++++--
 .../tests/__snapshots__/Table.test.tsx.snap   |  43 ++++++++
 packages/tabs/components/Tabs.tsx             |   6 +-
 .../tests/__snapshots__/Tabs.test.tsx.snap    |   1 +
 packages/textInput/components/TextInput.tsx   |  22 +++-
 .../__snapshots__/TextInput.test.tsx.snap     |  75 ++++++++++---
 .../TextInputWithIcon.test.tsx.snap           |  45 ++++++--
 packages/textarea/components/Textarea.tsx     |  28 ++++-
 packages/toaster/components/Toast.tsx         |  11 +-
 packages/toaster/components/Toaster.tsx       |   5 +-
 .../tests/__snapshots__/Toast.test.tsx.snap   |   3 +
 .../toggleInput/components/ToggleInput.tsx    |   7 +-
 .../ToggleInputList.test.tsx.snap             |  74 +++++++++++--
 packages/tooltip/components/Tooltip.tsx       |   1 +
 .../tooltip/components/TooltipContent.tsx     |   1 +
 .../tests/__snapshots__/Tooltip.test.tsx.snap |  15 +++
 packages/typeahead/components/Typeahead.tsx   |   4 +-
 .../__snapshots__/Typeahead.test.tsx.snap     |  71 ++++++++++--
 112 files changed, 1129 insertions(+), 194 deletions(-)

diff --git a/README.md b/README.md
index bbe9fc094..c349c48b9 100644
--- a/README.md
+++ b/README.md
@@ -93,6 +93,21 @@ describe('Badge', () => {
 });
 ```
 
+## Testing with Cypress
+To make it easier to select DOM nodes of our components, DOM nodes have a `data-cy` attribute.
+
+### `data-cy` value naming convention
+**Parent nodes:** The value of `data-cy` for component's parent node is the same as the component name, but camelCased. For example: The parent node for `<PrimaryButton>` will have `data-cy="primaryButton"`
+
+**Child nodes:** If a child node has a `data-cy` added, there will be a dash between the parent node's name and a string to describe the child node. For example: The footer element of a `<DialogModal>` will have `data-cy="fullscreenModal-footer"`
+
+**States and variants:** If a node has a special "state", `data-cy` will prepend a string describing that state after a dot.
+For example:
+* `<TextInput disabled>` will have `data-cy="textInput textInput.disabled"`
+* A `<TextInput>` with an error will have `data-cy="textInput textInput.error"`
+
+For more information on writing selectors, see the [Cypress guide](https://docs.cypress.io/guides/references/best-practices.html#Selecting-Elements).
+
 ## Commits
 
 You should follow [conventional commit](https://conventionalcommits.org/) formatting rules, as they provide a framework to write explicit messages that are easy to comprehend when looking through the project history and enable automatic change log generation.
diff --git a/packages/appChrome/components/AppChrome.tsx b/packages/appChrome/components/AppChrome.tsx
index 5ed0feb17..cff0ddab7 100644
--- a/packages/appChrome/components/AppChrome.tsx
+++ b/packages/appChrome/components/AppChrome.tsx
@@ -33,11 +33,17 @@ class AppChrome extends React.PureComponent<AppChromeProps, {}> {
             textSize("m"),
             flex({ direction: "column" })
           )}
+          data-cy="appChrome"
         >
-          <div className="headerBar">{headerBar}</div>
+          <div data-cy="headerBar">{headerBar}</div>
           <div className={cx(flex(), appWrapper)}>
-            <div className={flexItem("shrink")}>{sidebar}</div>
-            <main className={cx(flexItem("grow"), flush("left"), appWrapper)}>
+            <div className={flexItem("shrink")} data-cy="sidebar">
+              {sidebar}
+            </div>
+            <main
+              className={cx(flexItem("grow"), flush("left"), appWrapper)}
+              data-cy="main"
+            >
               {mainContent}
             </main>
           </div>
diff --git a/packages/appChrome/components/SidebarItem.tsx b/packages/appChrome/components/SidebarItem.tsx
index c36dd0d31..c0cefeaf8 100644
--- a/packages/appChrome/components/SidebarItem.tsx
+++ b/packages/appChrome/components/SidebarItem.tsx
@@ -14,6 +14,11 @@ export interface SidebarItemProps {
 class SidebarItemComponent extends React.PureComponent<SidebarItemProps, {}> {
   public render() {
     const { children, isActive, onClick } = this.props;
+    const dataCy = [
+      "sidebarItem",
+      ...(isActive ? ["sidebarItem.active"] : [])
+    ].join(" ");
+
     const Item = styled("li")`
       ${props => {
         return css`
@@ -40,6 +45,7 @@ class SidebarItemComponent extends React.PureComponent<SidebarItemProps, {}> {
         tabIndex={0}
         role="link"
         disableFocusOutline={true}
+        dataCy={dataCy}
       >
         <Item>{children}</Item>
       </Clickable>
diff --git a/packages/appChrome/components/SidebarSection.tsx b/packages/appChrome/components/SidebarSection.tsx
index 5aca55aa8..b5a17c873 100644
--- a/packages/appChrome/components/SidebarSection.tsx
+++ b/packages/appChrome/components/SidebarSection.tsx
@@ -51,7 +51,7 @@ class SidebarSection extends React.PureComponent<SidebarSectionProps, {}> {
     `;
 
     return (
-      <div>
+      <div data-cy="sidebarSection">
         {label && (
           <H3
             className={cx(
diff --git a/packages/appChrome/components/SidebarSubMenu.tsx b/packages/appChrome/components/SidebarSubMenu.tsx
index 349be6846..a7ce36fbd 100644
--- a/packages/appChrome/components/SidebarSubMenu.tsx
+++ b/packages/appChrome/components/SidebarSubMenu.tsx
@@ -52,9 +52,13 @@ export class SidebarSubMenuComponent extends React.PureComponent<
 
   public render() {
     const { children, label, isOpen, theme } = this.props;
+    const dataCy = [
+      "sidebarSubMenu",
+      ...(isOpen ? ["sidebarSubMenu.open"] : [])
+    ];
 
     return (
-      <li>
+      <li data-cy={dataCy}>
         <Expandable
           labelClassName={cx(
             appChromeInsetContent,
diff --git a/packages/appChrome/components/SidebarSubMenuItem.tsx b/packages/appChrome/components/SidebarSubMenuItem.tsx
index 56368e54f..56cf671c8 100644
--- a/packages/appChrome/components/SidebarSubMenuItem.tsx
+++ b/packages/appChrome/components/SidebarSubMenuItem.tsx
@@ -65,9 +65,13 @@ class SidebarSubMenuItem extends React.PureComponent<
         )]: isActive
       }
     );
+    const dataCy = [
+      "sidebarSubMenuItem",
+      ...(isActive ? ["sidebarSubMenuItem.active"] : [])
+    ].join(" ");
 
     return (
-      <Clickable action={onClick} tabIndex={0} role="link">
+      <Clickable action={onClick} tabIndex={0} role="link" dataCy={dataCy}>
         <div className={classNames}>
           <span className={subMenuItemText}>{children}</span>
         </div>
diff --git a/packages/appChrome/tests/__snapshots__/AppChrome.test.tsx.snap b/packages/appChrome/tests/__snapshots__/AppChrome.test.tsx.snap
index 435bc0f75..451968f94 100644
--- a/packages/appChrome/tests/__snapshots__/AppChrome.test.tsx.snap
+++ b/packages/appChrome/tests/__snapshots__/AppChrome.test.tsx.snap
@@ -84,9 +84,10 @@ exports[`AppChrome renders with the app chrome regions 1`] = `
 >
   <div
     className="emotion-3"
+    data-cy="appChrome"
   >
     <div
-      className="headerBar"
+      data-cy="headerBar"
     >
       <div>
         HeaderBar content goes here
@@ -97,6 +98,7 @@ exports[`AppChrome renders with the app chrome regions 1`] = `
     >
       <div
         className="emotion-0"
+        data-cy="sidebar"
       >
         <div>
           Sidebar content
@@ -104,6 +106,7 @@ exports[`AppChrome renders with the app chrome regions 1`] = `
       </div>
       <main
         className="emotion-1"
+        data-cy="main"
       >
         <div>
           Main app content goes here
diff --git a/packages/appChrome/tests/__snapshots__/Sidebar.test.tsx.snap b/packages/appChrome/tests/__snapshots__/Sidebar.test.tsx.snap
index b4fbf833a..41a96c986 100644
--- a/packages/appChrome/tests/__snapshots__/Sidebar.test.tsx.snap
+++ b/packages/appChrome/tests/__snapshots__/Sidebar.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Sidebar SidebarItem renders 1`] = `
 <Clickable
   action={[MockFunction]}
+  dataCy="sidebarItem"
   disableFocusOutline={true}
   role="link"
   tabIndex={0}
@@ -106,7 +107,9 @@ exports[`Sidebar SidebarSection renders 1`] = `
   padding-left: 0;
 }
 
-<div>
+<div
+  data-cy="sidebarSection"
+>
   <Styled(h3)
     className="emotion-0"
   >
@@ -131,7 +134,13 @@ exports[`Sidebar SidebarSubMenu renders 1`] = `
   padding-left: 0;
 }
 
-<li>
+<li
+  data-cy={
+    Array [
+      "sidebarSubMenu",
+    ]
+  }
+>
   <Expandable
     label={
       <div>
diff --git a/packages/avatar/components/Avatar.tsx b/packages/avatar/components/Avatar.tsx
index fa328a56b..c6d775adb 100644
--- a/packages/avatar/components/Avatar.tsx
+++ b/packages/avatar/components/Avatar.tsx
@@ -39,6 +39,7 @@ const Avatar: React.StatelessComponent<AvatarProps> = (props: AvatarProps) => {
       className={cx(avatarContainer, avatarSize(size))}
       role="img"
       aria-label={label}
+      data-cy="avatar"
     >
       {/*
           tslint:disable react-a11y-img-has-alt
diff --git a/packages/avatar/tests/__snapshots__/avatar.test.tsx.snap b/packages/avatar/tests/__snapshots__/avatar.test.tsx.snap
index eeb398800..8e34448c4 100644
--- a/packages/avatar/tests/__snapshots__/avatar.test.tsx.snap
+++ b/packages/avatar/tests/__snapshots__/avatar.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`Avatar renders default 1`] = `
 
 <div
   className="emotion-1"
+  data-cy="avatar"
   role="img"
 >
   <img
@@ -49,6 +50,7 @@ exports[`Avatar renders with a src, size, and label 1`] = `
 <div
   aria-label="Kubernetes"
   className="emotion-1"
+  data-cy="avatar"
   role="img"
 >
   <img
diff --git a/packages/badge/components/badge.tsx b/packages/badge/components/badge.tsx
index 935c01ae5..8c51b6fdd 100644
--- a/packages/badge/components/badge.tsx
+++ b/packages/badge/components/badge.tsx
@@ -20,7 +20,11 @@ export class Badge extends React.PureComponent<BadgeProps, {}> {
   public render() {
     const { appearance, children } = this.props;
 
-    return <span className={badge(appearance)}>{children}</span>;
+    return (
+      <span className={badge(appearance)} data-cy="badge">
+        {children}
+      </span>
+    );
   }
 }
 
diff --git a/packages/badge/components/badgeButton.tsx b/packages/badge/components/badgeButton.tsx
index 422e476ab..c86c252a3 100644
--- a/packages/badge/components/badgeButton.tsx
+++ b/packages/badge/components/badgeButton.tsx
@@ -40,7 +40,7 @@ export class BadgeButton extends React.PureComponent<BadgeButtonProps, {}> {
       ${badgeButton(appearance)};
     `;
     return (
-      <Clickable {...props}>
+      <Clickable {...props} dataCy="badgeButton">
         <span className={className}>{children}</span>
       </Clickable>
     );
diff --git a/packages/badge/tests/__snapshots__/badge.test.tsx.snap b/packages/badge/tests/__snapshots__/badge.test.tsx.snap
index 0fea3cd45..a2a805475 100644
--- a/packages/badge/tests/__snapshots__/badge.test.tsx.snap
+++ b/packages/badge/tests/__snapshots__/badge.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Badge accept jsx as children 1`] = `
 <span
   className="css-17jd12v"
+  data-cy="badge"
 >
   <span>
     string
@@ -13,6 +14,7 @@ exports[`Badge accept jsx as children 1`] = `
 exports[`Badge danger 1`] = `
 <span
   className="css-1g44s7u"
+  data-cy="badge"
 >
   danger
 </span>
@@ -21,6 +23,7 @@ exports[`Badge danger 1`] = `
 exports[`Badge default 1`] = `
 <span
   className="css-17jd12v"
+  data-cy="badge"
 >
   default
 </span>
@@ -29,6 +32,7 @@ exports[`Badge default 1`] = `
 exports[`Badge outline 1`] = `
 <span
   className="css-bvpqwa"
+  data-cy="badge"
 >
   outline
 </span>
@@ -37,6 +41,7 @@ exports[`Badge outline 1`] = `
 exports[`Badge primary 1`] = `
 <span
   className="css-11hyrb9"
+  data-cy="badge"
 >
   primary
 </span>
@@ -45,6 +50,7 @@ exports[`Badge primary 1`] = `
 exports[`Badge success 1`] = `
 <span
   className="css-y6ql0v"
+  data-cy="badge"
 >
   success
 </span>
@@ -53,6 +59,7 @@ exports[`Badge success 1`] = `
 exports[`Badge warning 1`] = `
 <span
   className="css-1fasnxp"
+  data-cy="badge"
 >
   warning
 </span>
diff --git a/packages/badge/tests/__snapshots__/badgeButton.test.tsx.snap b/packages/badge/tests/__snapshots__/badgeButton.test.tsx.snap
index b5e62862b..1389d7b8e 100644
--- a/packages/badge/tests/__snapshots__/badgeButton.test.tsx.snap
+++ b/packages/badge/tests/__snapshots__/badgeButton.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`BadgeButton accept jsx as children 1`] = `
 <span
   className="css-19iuzmr"
+  data-cy="badgeButton"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="button"
@@ -17,6 +18,7 @@ exports[`BadgeButton accept jsx as children 1`] = `
 exports[`BadgeButton danger 1`] = `
 <span
   className="css-1jlwe7l"
+  data-cy="badgeButton"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="button"
@@ -29,6 +31,7 @@ exports[`BadgeButton danger 1`] = `
 exports[`BadgeButton default 1`] = `
 <span
   className="css-19iuzmr"
+  data-cy="badgeButton"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="button"
@@ -41,6 +44,7 @@ exports[`BadgeButton default 1`] = `
 exports[`BadgeButton outline 1`] = `
 <span
   className="css-nrwsml"
+  data-cy="badgeButton"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="button"
@@ -53,6 +57,7 @@ exports[`BadgeButton outline 1`] = `
 exports[`BadgeButton primary 1`] = `
 <span
   className="css-5fnbh1"
+  data-cy="badgeButton"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="button"
@@ -65,6 +70,7 @@ exports[`BadgeButton primary 1`] = `
 exports[`BadgeButton success 1`] = `
 <span
   className="css-l1zuud"
+  data-cy="badgeButton"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="button"
@@ -77,6 +83,7 @@ exports[`BadgeButton success 1`] = `
 exports[`BadgeButton warning 1`] = `
 <span
   className="css-wldna8"
+  data-cy="badgeButton"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="button"
diff --git a/packages/breadcrumb/components/Breadcrumb.tsx b/packages/breadcrumb/components/Breadcrumb.tsx
index 9ad4b88e7..2716be438 100644
--- a/packages/breadcrumb/components/Breadcrumb.tsx
+++ b/packages/breadcrumb/components/Breadcrumb.tsx
@@ -37,6 +37,7 @@ class Breadcrumb extends React.PureComponent<BreadcrumbProps, {}> {
             className={cx(textWeight("medium"), textSize("l"), {
               [padding("left", "xs")]: i !== 0
             })}
+            data-cy="breadcrumb"
           >
             {crumb}
           </div>
diff --git a/packages/breadcrumb/tests/__snapshots__/Breadcrumb.test.tsx.snap b/packages/breadcrumb/tests/__snapshots__/Breadcrumb.test.tsx.snap
index a4e8d7d58..2b54c6039 100644
--- a/packages/breadcrumb/tests/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/packages/breadcrumb/tests/__snapshots__/Breadcrumb.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`Breadcrumb default 1`] = `
 >
   <div
     class="css-1ixtlzk"
+    data-cy="breadcrumb"
   >
     <span>
       One
@@ -13,10 +14,12 @@ exports[`Breadcrumb default 1`] = `
   </div>
   <div
     class="css-19hcarb"
+    data-cy="breadcrumb"
   >
     <svg
       aria-label="system-caret-right icon"
       class="css-zgvqkl"
+      data-cy="icon"
       height="16"
       preserveAspectRatio="xMinYMin meet"
       role="img"
@@ -30,6 +33,7 @@ exports[`Breadcrumb default 1`] = `
   </div>
   <div
     class="css-19hcarb"
+    data-cy="breadcrumb"
   >
     <span>
       Two
diff --git a/packages/button/components/DangerButton.tsx b/packages/button/components/DangerButton.tsx
index 6882b5bff..6d0a85e2e 100644
--- a/packages/button/components/DangerButton.tsx
+++ b/packages/button/components/DangerButton.tsx
@@ -6,7 +6,11 @@ import {
 } from "./ButtonBase";
 
 const DangerButton = (props: ButtonProps) => (
-  <ButtonBase appearance={ButtonAppearances.Danger} {...props} />
+  <ButtonBase
+    appearance={ButtonAppearances.Danger}
+    data-cy="dangerButton"
+    {...props}
+  />
 );
 
 export default DangerButton;
diff --git a/packages/button/components/DangerDropdownButton.tsx b/packages/button/components/DangerDropdownButton.tsx
index 8742f09ee..c732fa937 100644
--- a/packages/button/components/DangerDropdownButton.tsx
+++ b/packages/button/components/DangerDropdownButton.tsx
@@ -4,7 +4,11 @@ import { ButtonProps } from "./ButtonBase";
 import { SystemIcons } from "../../icons/dist/system-icons-enum";
 
 const DangerDropdownButton = (props: ButtonProps) => (
-  <DangerButton iconEnd={SystemIcons.TriangleDown} {...props} />
+  <DangerButton
+    iconEnd={SystemIcons.TriangleDown}
+    data-cy="dangerDropdownButton"
+    {...props}
+  />
 );
 
 export default DangerDropdownButton;
diff --git a/packages/button/components/PrimaryButton.tsx b/packages/button/components/PrimaryButton.tsx
index 4a9e5fa47..cce2ca1cb 100644
--- a/packages/button/components/PrimaryButton.tsx
+++ b/packages/button/components/PrimaryButton.tsx
@@ -6,7 +6,11 @@ import {
 } from "./ButtonBase";
 
 const PrimaryButton = (props: ButtonProps) => (
-  <ButtonBase appearance={ButtonAppearances.Primary} {...props} />
+  <ButtonBase
+    appearance={ButtonAppearances.Primary}
+    data-cy="primaryButton"
+    {...props}
+  />
 );
 
 export default PrimaryButton;
diff --git a/packages/button/components/PrimaryDropdownButton.tsx b/packages/button/components/PrimaryDropdownButton.tsx
index 3783f82ac..117e97943 100644
--- a/packages/button/components/PrimaryDropdownButton.tsx
+++ b/packages/button/components/PrimaryDropdownButton.tsx
@@ -4,7 +4,11 @@ import { ButtonProps } from "./ButtonBase";
 import { SystemIcons } from "../../icons/dist/system-icons-enum";
 
 const PrimaryDropdownButton = (props: ButtonProps) => (
-  <PrimaryButton iconEnd={SystemIcons.TriangleDown} {...props} />
+  <PrimaryButton
+    iconEnd={SystemIcons.TriangleDown}
+    data-cy="primaryDropdownButton"
+    {...props}
+  />
 );
 
 export default PrimaryDropdownButton;
diff --git a/packages/button/components/SecondaryButton.tsx b/packages/button/components/SecondaryButton.tsx
index 68e7792bd..ce4eb36a5 100644
--- a/packages/button/components/SecondaryButton.tsx
+++ b/packages/button/components/SecondaryButton.tsx
@@ -6,7 +6,11 @@ import {
 } from "./ButtonBase";
 
 const SecondaryButton = (props: ButtonProps) => (
-  <ButtonBase appearance={ButtonAppearances.Secondary} {...props} />
+  <ButtonBase
+    appearance={ButtonAppearances.Secondary}
+    data-cy="secondaryButton"
+    {...props}
+  />
 );
 
 export default SecondaryButton;
diff --git a/packages/button/components/SecondaryDropdownButton.tsx b/packages/button/components/SecondaryDropdownButton.tsx
index 3f78a5028..54d63c0cc 100644
--- a/packages/button/components/SecondaryDropdownButton.tsx
+++ b/packages/button/components/SecondaryDropdownButton.tsx
@@ -4,7 +4,11 @@ import { ButtonProps } from "./ButtonBase";
 import { SystemIcons } from "../../icons/dist/system-icons-enum";
 
 const SecondaryDropdownButton = (props: ButtonProps) => (
-  <SecondaryButton iconEnd={SystemIcons.TriangleDown} {...props} />
+  <SecondaryButton
+    iconEnd={SystemIcons.TriangleDown}
+    data-cy="secondaryDropdownButton"
+    {...props}
+  />
 );
 
 export default SecondaryDropdownButton;
diff --git a/packages/button/components/StandardButton.tsx b/packages/button/components/StandardButton.tsx
index 993abc8e1..e3186a602 100644
--- a/packages/button/components/StandardButton.tsx
+++ b/packages/button/components/StandardButton.tsx
@@ -6,7 +6,11 @@ import {
 } from "./ButtonBase";
 
 const StandardButton = (props: ButtonProps) => (
-  <ButtonBase appearance={ButtonAppearances.Standard} {...props} />
+  <ButtonBase
+    appearance={ButtonAppearances.Standard}
+    data-cy="standardButton"
+    {...props}
+  />
 );
 
 export default StandardButton;
diff --git a/packages/button/components/StandardDropdownButton.tsx b/packages/button/components/StandardDropdownButton.tsx
index bb683162c..386bf932e 100644
--- a/packages/button/components/StandardDropdownButton.tsx
+++ b/packages/button/components/StandardDropdownButton.tsx
@@ -4,7 +4,11 @@ import { ButtonProps } from "./ButtonBase";
 import { SystemIcons } from "../../icons/dist/system-icons-enum";
 
 const StandardDropdownButton = (props: ButtonProps) => (
-  <StandardButton iconEnd={SystemIcons.TriangleDown} {...props} />
+  <StandardButton
+    iconEnd={SystemIcons.TriangleDown}
+    data-cy="standardDropdownButton"
+    {...props}
+  />
 );
 
 export default StandardDropdownButton;
diff --git a/packages/button/components/SuccessButton.tsx b/packages/button/components/SuccessButton.tsx
index f54d9396c..ac3b4adcc 100644
--- a/packages/button/components/SuccessButton.tsx
+++ b/packages/button/components/SuccessButton.tsx
@@ -6,7 +6,11 @@ import {
 } from "./ButtonBase";
 
 const SuccessButton = (props: ButtonProps) => (
-  <ButtonBase appearance={ButtonAppearances.Success} {...props} />
+  <ButtonBase
+    appearance={ButtonAppearances.Success}
+    data-cy="successButton"
+    {...props}
+  />
 );
 
 export default SuccessButton;
diff --git a/packages/button/components/SuccessDropdownButton.tsx b/packages/button/components/SuccessDropdownButton.tsx
index e5bfa5a01..77f7e3d85 100644
--- a/packages/button/components/SuccessDropdownButton.tsx
+++ b/packages/button/components/SuccessDropdownButton.tsx
@@ -4,7 +4,11 @@ import { ButtonProps } from "./ButtonBase";
 import { SystemIcons } from "../../icons/dist/system-icons-enum";
 
 const SuccessDropdownButton = (props: ButtonProps) => (
-  <SuccessButton iconEnd={SystemIcons.TriangleDown} {...props} />
+  <SuccessButton
+    iconEnd={SystemIcons.TriangleDown}
+    data-cy="successDropdownButton"
+    {...props}
+  />
 );
 
 export default SuccessDropdownButton;
diff --git a/packages/card/components/Card.tsx b/packages/card/components/Card.tsx
index 201c960e5..402625d93 100644
--- a/packages/card/components/Card.tsx
+++ b/packages/card/components/Card.tsx
@@ -28,7 +28,7 @@ class Card extends React.PureComponent<CardProps, {}> {
       : null;
 
     return (
-      <div className={cx(style, aspectRatioStyle)}>
+      <div className={cx(style, aspectRatioStyle)} data-cy="card">
         <div className={padding("all", paddingSize)}>{children}</div>
       </div>
     );
diff --git a/packages/card/tests/__snapshots__/Card.test.tsx.snap b/packages/card/tests/__snapshots__/Card.test.tsx.snap
index 873a2c197..d2e3fc51e 100644
--- a/packages/card/tests/__snapshots__/Card.test.tsx.snap
+++ b/packages/card/tests/__snapshots__/Card.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Card default 1`] = `
 <div
   class="css-1txfjje"
+  data-cy="card"
 >
   <div
     class="css-2yjhih"
@@ -15,6 +16,7 @@ exports[`Card default 1`] = `
 exports[`Card with aspectRatio set 1`] = `
 <div
   class="css-1jys0p8"
+  data-cy="card"
 >
   <div
     class="css-2yjhih"
@@ -27,6 +29,7 @@ exports[`Card with aspectRatio set 1`] = `
 exports[`Card with paddingSize set 1`] = `
 <div
   class="css-1txfjje"
+  data-cy="card"
 >
   <div
     class="css-jl90x"
diff --git a/packages/checkboxInput/components/CheckboxInput.tsx b/packages/checkboxInput/components/CheckboxInput.tsx
index 53fcdd7af..2bebded58 100644
--- a/packages/checkboxInput/components/CheckboxInput.tsx
+++ b/packages/checkboxInput/components/CheckboxInput.tsx
@@ -63,6 +63,22 @@ class CheckboxInput extends React.PureComponent<
     delete other.onFocus;
     delete other.onBlur;
     const isIndeterminate = indeterminate && !checked;
+    const parentDataCy = [
+      "checkboxInput",
+      ...(checked ? ["checkboxInput.checked"] : []),
+      ...(isIndeterminate ? ["checkboxInput.indeterminate"] : []),
+      ...(appearance && appearance !== InputAppearance.Standard
+        ? [`checkboxInput.${appearance}`]
+        : [])
+    ].join(" ");
+    const inputDataCy = [
+      "checkboxInput-input",
+      ...(checked ? ["checkboxInput-input.checked"] : []),
+      ...(isIndeterminate ? ["checkboxInput-input.indeterminate"] : []),
+      ...(appearance && appearance !== InputAppearance.Standard
+        ? [`checkboxInput-input.${appearance}`]
+        : [])
+    ].join(" ");
 
     return (
       <ToggleInput
@@ -72,6 +88,7 @@ class CheckboxInput extends React.PureComponent<
         inputLabel={inputLabel}
         showInputLabel={showInputLabel}
         vertAlign={vertAlign}
+        dataCy={parentDataCy}
       >
         <div
           className={cx(toggleInput, checkbox, {
@@ -96,6 +113,7 @@ class CheckboxInput extends React.PureComponent<
             onFocus={this.handleFocus}
             onBlur={this.handleBlur}
             aria-checked={isIndeterminate ? "mixed" : checked}
+            data-cy={inputDataCy}
             {...other}
           />
           {/* tslint:enable */}
diff --git a/packages/checkboxInput/tests/__snapshots__/CheckboxInput.test.tsx.snap b/packages/checkboxInput/tests/__snapshots__/CheckboxInput.test.tsx.snap
index eb48148cd..003fdff33 100644
--- a/packages/checkboxInput/tests/__snapshots__/CheckboxInput.test.tsx.snap
+++ b/packages/checkboxInput/tests/__snapshots__/CheckboxInput.test.tsx.snap
@@ -78,12 +78,15 @@ exports[`CheckboxInput renders all appearances 1`] = `
 >
   <ToggleInput
     appearance="standard"
+    dataCy="checkboxInput"
     id="defaultId"
     inputLabel="Sample label"
     showInputLabel={true}
     vertAlign="center"
   >
-    <div>
+    <div
+      data-cy="checkboxInput"
+    >
       <label
         className="emotion-4"
         htmlFor="defaultId"
@@ -96,6 +99,7 @@ exports[`CheckboxInput renders all appearances 1`] = `
           >
             <input
               className="emotion-0"
+              data-cy="checkboxInput-input"
               id="defaultId"
               onBlur={[Function]}
               onFocus={[Function]}
@@ -195,12 +199,15 @@ exports[`CheckboxInput renders all appearances 2`] = `
 >
   <ToggleInput
     appearance="error"
+    dataCy="checkboxInput checkboxInput.error"
     id="defaultId"
     inputLabel="Sample label"
     showInputLabel={true}
     vertAlign="center"
   >
-    <div>
+    <div
+      data-cy="checkboxInput checkboxInput.error"
+    >
       <label
         className="emotion-4"
         htmlFor="defaultId"
@@ -213,6 +220,7 @@ exports[`CheckboxInput renders all appearances 2`] = `
           >
             <input
               className="emotion-0"
+              data-cy="checkboxInput-input checkboxInput-input.error"
               id="defaultId"
               onBlur={[Function]}
               onFocus={[Function]}
@@ -312,12 +320,15 @@ exports[`CheckboxInput renders all appearances 3`] = `
 >
   <ToggleInput
     appearance="success"
+    dataCy="checkboxInput checkboxInput.success"
     id="defaultId"
     inputLabel="Sample label"
     showInputLabel={true}
     vertAlign="center"
   >
-    <div>
+    <div
+      data-cy="checkboxInput checkboxInput.success"
+    >
       <label
         className="emotion-4"
         htmlFor="defaultId"
@@ -330,6 +341,7 @@ exports[`CheckboxInput renders all appearances 3`] = `
           >
             <input
               className="emotion-0"
+              data-cy="checkboxInput-input checkboxInput-input.success"
               id="defaultId"
               onBlur={[Function]}
               onFocus={[Function]}
@@ -456,12 +468,15 @@ exports[`CheckboxInput renders indeterminate 1`] = `
 >
   <ToggleInput
     appearance="standard"
+    dataCy="checkboxInput checkboxInput.indeterminate"
     id="indeterminateId"
     inputLabel="Sample Label"
     showInputLabel={true}
     vertAlign="center"
   >
-    <div>
+    <div
+      data-cy="checkboxInput checkboxInput.indeterminate"
+    >
       <label
         className="emotion-6"
         htmlFor="indeterminateId"
@@ -475,6 +490,7 @@ exports[`CheckboxInput renders indeterminate 1`] = `
             <input
               aria-checked="mixed"
               className="emotion-0"
+              data-cy="checkboxInput-input checkboxInput-input.indeterminate"
               id="indeterminateId"
               onBlur={[Function]}
               onFocus={[Function]}
@@ -492,6 +508,7 @@ exports[`CheckboxInput renders indeterminate 1`] = `
                 <svg
                   aria-label="system-minus icon"
                   className="emotion-1"
+                  data-cy="icon"
                   height={16}
                   preserveAspectRatio="xMinYMin meet"
                   role="img"
@@ -605,12 +622,15 @@ exports[`CheckboxInput renders with a hidden label 1`] = `
 >
   <ToggleInput
     appearance="standard"
+    dataCy="checkboxInput"
     id="hiddenLabel"
     inputLabel="Sample Label"
     showInputLabel={false}
     vertAlign="center"
   >
-    <div>
+    <div
+      data-cy="checkboxInput"
+    >
       <label
         className="emotion-4"
         htmlFor="hiddenLabel"
@@ -623,6 +643,7 @@ exports[`CheckboxInput renders with a hidden label 1`] = `
           >
             <input
               className="emotion-0"
+              data-cy="checkboxInput-input"
               id="hiddenLabel"
               onBlur={[Function]}
               onFocus={[Function]}
diff --git a/packages/clickable/components/clickable.tsx b/packages/clickable/components/clickable.tsx
index b9894a8ff..61ab791ed 100644
--- a/packages/clickable/components/clickable.tsx
+++ b/packages/clickable/components/clickable.tsx
@@ -23,6 +23,10 @@ export interface ClickableProps {
    * Whether or not to reset the :focus outline style
    */
   disableFocusOutline?: boolean;
+  /**
+   * human-readable selector used for writing tests
+   */
+  dataCy?: string;
 }
 
 export class Clickable extends React.PureComponent<ClickableProps, {}> {
@@ -43,7 +47,8 @@ export class Clickable extends React.PureComponent<ClickableProps, {}> {
       action,
       tabIndex,
       role,
-      disableFocusOutline
+      disableFocusOutline,
+      dataCy
     } = this.props;
     const { className = "" } = children.props;
 
@@ -52,7 +57,8 @@ export class Clickable extends React.PureComponent<ClickableProps, {}> {
       className: cx(className, pointer, { [outline]: disableFocusOutline }),
       role,
       tabIndex,
-      onKeyPress: this.handleKeyPress
+      onKeyPress: this.handleKeyPress,
+      ["data-cy"]: dataCy
     });
   }
 
diff --git a/packages/configurationmap/components/ConfigurationMap.tsx b/packages/configurationmap/components/ConfigurationMap.tsx
index 70a75fa73..8fd6c5d1e 100644
--- a/packages/configurationmap/components/ConfigurationMap.tsx
+++ b/packages/configurationmap/components/ConfigurationMap.tsx
@@ -1,6 +1,11 @@
+import * as React from "react";
 import { padding } from "../../shared/styles/styleUtils";
 import styled from "react-emotion";
 
-export default styled("div")`
+const ConfigurationMap = styled("div")`
   ${padding("bottom", "l")};
 `;
+
+export default ({ children }) => (
+  <ConfigurationMap data-cy="configurationMap">{children}</ConfigurationMap>
+);
diff --git a/packages/configurationmap/components/ConfigurationMapHeading.tsx b/packages/configurationmap/components/ConfigurationMapHeading.tsx
index 659458d5e..b458c5569 100644
--- a/packages/configurationmap/components/ConfigurationMapHeading.tsx
+++ b/packages/configurationmap/components/ConfigurationMapHeading.tsx
@@ -35,6 +35,7 @@ const ConfigurationMapHeading: React.StatelessComponent<
         padding("bottom", "xs"),
         border("bottom")
       )}
+      data-cy="configurationMapHeading"
     >
       {children}
     </Heading>
diff --git a/packages/configurationmap/components/ConfigurationMapLabel.tsx b/packages/configurationmap/components/ConfigurationMapLabel.tsx
index c2ad3e48a..3be37bd95 100644
--- a/packages/configurationmap/components/ConfigurationMapLabel.tsx
+++ b/packages/configurationmap/components/ConfigurationMapLabel.tsx
@@ -1,9 +1,16 @@
+import * as React from "react";
 import { textWeight, padding } from "../../shared/styles/styleUtils";
 import { configurationMapLabel } from "../style";
 import styled from "react-emotion";
 
-export default styled("dt")`
+const ConfigurationMapLabel = styled("dt")`
   ${configurationMapLabel};
   ${padding("right", "s")};
   ${textWeight("medium")};
 `;
+
+export default ({ children }) => (
+  <ConfigurationMapLabel data-cy="configurationMapLabel">
+    {children}
+  </ConfigurationMapLabel>
+);
diff --git a/packages/configurationmap/components/ConfigurationMapRow.tsx b/packages/configurationmap/components/ConfigurationMapRow.tsx
index 88eac792f..8250a9875 100644
--- a/packages/configurationmap/components/ConfigurationMapRow.tsx
+++ b/packages/configurationmap/components/ConfigurationMapRow.tsx
@@ -1,38 +1,26 @@
-import { configurationMapRow } from "../style";
-import { css } from "emotion";
+import * as React from "react";
+import { configurationMapRow, showActionOnHoverStyle } from "../style";
 import styled from "react-emotion";
-import {
-  flex,
-  padding,
-  border,
-  visuallyHidden,
-  undoVisuallyHidden
-} from "../../shared/styles/styleUtils";
-import { rowActionStaticClassname } from "./ConfigurationMapRowAction";
+import { flex, padding, border } from "../../shared/styles/styleUtils";
 
-interface ConfigurationMapRowActionProps {
+interface ConfigurationMapRowProps {
   children: React.ReactNode;
   onlyShowActionOnHover?: boolean;
 }
 
-const showActionOnHoverStyle = (props: ConfigurationMapRowActionProps) => {
-  if (props.onlyShowActionOnHover) {
-    return css`
-      .${rowActionStaticClassname} {
-        ${visuallyHidden};
-      }
-
-      &:hover .${rowActionStaticClassname} {
-        ${undoVisuallyHidden};
-      }
-    `;
-  }
-};
-
-export default styled("div")`
+const ConfigurationMapRow = styled("div")<ConfigurationMapRowProps>`
+  ${props => showActionOnHoverStyle(props.onlyShowActionOnHover)};
   ${configurationMapRow};
-  ${showActionOnHoverStyle};
   ${border("bottom")};
   ${flex()};
   ${padding("vert", "xs")};
 `;
+
+export default (props: ConfigurationMapRowProps) => (
+  <ConfigurationMapRow
+    onlyShowActionOnHover={props.onlyShowActionOnHover}
+    data-cy="configurationMapRow"
+  >
+    {props.children}
+  </ConfigurationMapRow>
+);
diff --git a/packages/configurationmap/components/ConfigurationMapRowAction.tsx b/packages/configurationmap/components/ConfigurationMapRowAction.tsx
index 99184da13..95e32d76d 100644
--- a/packages/configurationmap/components/ConfigurationMapRowAction.tsx
+++ b/packages/configurationmap/components/ConfigurationMapRowAction.tsx
@@ -22,7 +22,10 @@ const ConfigurationMapRowAction: React.StatelessComponent<
   const { onClick, children } = props;
 
   return (
-    <span className={cx(rowActionStaticClassname, flexItem("shrink"))}>
+    <span
+      className={cx(rowActionStaticClassname, flexItem("shrink"))}
+      data-cy="configrationMapRowAction"
+    >
       <SecondaryButton onClick={onClick}>{children}</SecondaryButton>
     </span>
   );
diff --git a/packages/configurationmap/components/ConfigurationMapSection.tsx b/packages/configurationmap/components/ConfigurationMapSection.tsx
index e129bcf47..8bc9b729a 100644
--- a/packages/configurationmap/components/ConfigurationMapSection.tsx
+++ b/packages/configurationmap/components/ConfigurationMapSection.tsx
@@ -1,8 +1,15 @@
+import * as React from "react";
 import { padding } from "../../shared/styles/styleUtils";
 import styled from "react-emotion";
 import { dlReset } from "../../shared/styles/styleUtils/resets/definitionListReset";
 
-export default styled("dl")`
+const ConfigurationMapSection = styled("dl")`
   ${dlReset};
   ${padding("bottom", "l")};
 `;
+
+export default ({ children }) => (
+  <ConfigurationMapSection data-cy="configurationMapSection">
+    {children}
+  </ConfigurationMapSection>
+);
diff --git a/packages/configurationmap/components/ConfigurationMapValue.tsx b/packages/configurationmap/components/ConfigurationMapValue.tsx
index 9163668c1..47d0d434e 100644
--- a/packages/configurationmap/components/ConfigurationMapValue.tsx
+++ b/packages/configurationmap/components/ConfigurationMapValue.tsx
@@ -1,8 +1,15 @@
+import * as React from "react";
 import { flexItem } from "../../shared/styles/styleUtils";
 import styled from "react-emotion";
 import { ddReset } from "../../shared/styles/styleUtils/resets/definitionListReset";
 
-export default styled("dd")`
+const ConfigurationMapValue = styled("dd")`
   ${ddReset};
   ${flexItem("grow")};
 `;
+
+export default ({ children }) => (
+  <ConfigurationMapValue data-cy="configurationMapValue">
+    {children}
+  </ConfigurationMapValue>
+);
diff --git a/packages/configurationmap/style.ts b/packages/configurationmap/style.ts
index 06d67d9c6..e14fde072 100644
--- a/packages/configurationmap/style.ts
+++ b/packages/configurationmap/style.ts
@@ -1,4 +1,9 @@
 import { css } from "emotion";
+import { rowActionStaticClassname } from "./components/ConfigurationMapRowAction";
+import {
+  visuallyHidden,
+  undoVisuallyHidden
+} from "../shared/styles/styleUtils";
 
 export const configurationMapRow = css`
   &:last-of-type {
@@ -19,3 +24,17 @@ export const configurationMapLabel = css`
     word-wrap: break-word;
   }
 `;
+
+export const showActionOnHoverStyle = (onlyShowActionOnHover?: boolean) => {
+  if (onlyShowActionOnHover) {
+    return css`
+      .${rowActionStaticClassname} {
+        ${visuallyHidden};
+      }
+
+      &:hover .${rowActionStaticClassname} {
+        ${undoVisuallyHidden};
+      }
+    `;
+  }
+};
diff --git a/packages/configurationmap/tests/ConfigurationMap.test.tsx b/packages/configurationmap/tests/ConfigurationMap.test.tsx
index 8ae1ae3fd..413086453 100644
--- a/packages/configurationmap/tests/ConfigurationMap.test.tsx
+++ b/packages/configurationmap/tests/ConfigurationMap.test.tsx
@@ -122,35 +122,25 @@ describe("ConfigurationMap", () => {
     ).toMatchSnapshot();
   });
   it("calls onClick when action is clicked", () => {
-    const onClickCallback = jest.fn();
     const rowActionCallback = jest.fn();
     const component = mount(
       <ConfigurationMap>
         <ConfigurationMapSection>
-          <ConfigurationMapRow
-            onlyShowActionOnHover={true}
-            onClick={onClickCallback}
-          >
+          <ConfigurationMapRow onlyShowActionOnHover={true}>
             <ConfigurationMapLabel>Name</ConfigurationMapLabel>
             <ConfigurationMapValue>Jane Doe</ConfigurationMapValue>
             <ConfigurationMapRowAction onClick={rowActionCallback}>
               Action
             </ConfigurationMapRowAction>
           </ConfigurationMapRow>
-          <ConfigurationMapRow
-            onlyShowActionOnHover={true}
-            onClick={onClickCallback}
-          >
+          <ConfigurationMapRow onlyShowActionOnHover={true}>
             <ConfigurationMapLabel>Role</ConfigurationMapLabel>
             <ConfigurationMapValue>UX Designer</ConfigurationMapValue>
             <ConfigurationMapRowAction onClick={rowActionCallback}>
               Action
             </ConfigurationMapRowAction>
           </ConfigurationMapRow>
-          <ConfigurationMapRow
-            onlyShowActionOnHover={true}
-            onClick={onClickCallback}
-          >
+          <ConfigurationMapRow onlyShowActionOnHover={true}>
             <ConfigurationMapLabel>City</ConfigurationMapLabel>
             <ConfigurationMapValue>San Francisco</ConfigurationMapValue>
             <ConfigurationMapRowAction onClick={rowActionCallback}>
@@ -162,8 +152,8 @@ describe("ConfigurationMap", () => {
     );
     const button = component.find("button").first();
 
-    expect(onClickCallback).not.toHaveBeenCalled();
+    expect(rowActionCallback).not.toHaveBeenCalled();
     button.simulate("click");
-    expect(onClickCallback).toHaveBeenCalled();
+    expect(rowActionCallback).toHaveBeenCalled();
   });
 });
diff --git a/packages/configurationmap/tests/__snapshots__/ConfigurationMap.test.tsx.snap b/packages/configurationmap/tests/__snapshots__/ConfigurationMap.test.tsx.snap
index 68ce8e304..d8d40572c 100644
--- a/packages/configurationmap/tests/__snapshots__/ConfigurationMap.test.tsx.snap
+++ b/packages/configurationmap/tests/__snapshots__/ConfigurationMap.test.tsx.snap
@@ -3,48 +3,59 @@
 exports[`ConfigurationMap renders default 1`] = `
 <div
   class="css-1fnaylc"
+  data-cy="configurationMap"
 >
   <dl
     class="css-1mqjlka"
+    data-cy="configurationMapSection"
   >
     <div
-      class="css-13rkv0z"
+      class="css-yktv50"
+      data-cy="configurationMapRow"
     >
       <dt
         class="css-1bnt6tn"
+        data-cy="configurationMapLabel"
       >
         Name
       </dt>
       <dd
         class="css-1pld8at"
+        data-cy="configurationMapValue"
       >
         Jane Doe
       </dd>
     </div>
     <div
-      class="css-13rkv0z"
+      class="css-yktv50"
+      data-cy="configurationMapRow"
     >
       <dt
         class="css-1bnt6tn"
+        data-cy="configurationMapLabel"
       >
         Role
       </dt>
       <dd
         class="css-1pld8at"
+        data-cy="configurationMapValue"
       >
         UX Designer
       </dd>
     </div>
     <div
-      class="css-13rkv0z"
+      class="css-yktv50"
+      data-cy="configurationMapRow"
     >
       <dt
         class="css-1bnt6tn"
+        data-cy="configurationMapLabel"
       >
         City
       </dt>
       <dd
         class="css-1pld8at"
+        data-cy="configurationMapValue"
       >
         San Francisco
       </dd>
@@ -56,28 +67,35 @@ exports[`ConfigurationMap renders default 1`] = `
 exports[`ConfigurationMap renders with actions 1`] = `
 <div
   class="css-1fnaylc"
+  data-cy="configurationMap"
 >
   <dl
     class="css-1mqjlka"
+    data-cy="configurationMapSection"
   >
     <div
-      class="css-dcg1uu"
+      class="css-1f2226p"
+      data-cy="configurationMapRow"
     >
       <dt
         class="css-1bnt6tn"
+        data-cy="configurationMapLabel"
       >
         Name
       </dt>
       <dd
         class="css-1pld8at"
+        data-cy="configurationMapValue"
       >
         Jane Doe
       </dd>
       <span
         class="static_configurationMapRowAction css-48ylac"
+        data-cy="configrationMapRowAction"
       >
         <button
           class="css-1vveheu"
+          data-cy="secondaryButton"
           tabindex="0"
         >
           <span
@@ -89,23 +107,28 @@ exports[`ConfigurationMap renders with actions 1`] = `
       </span>
     </div>
     <div
-      class="css-dcg1uu"
+      class="css-1f2226p"
+      data-cy="configurationMapRow"
     >
       <dt
         class="css-1bnt6tn"
+        data-cy="configurationMapLabel"
       >
         Role
       </dt>
       <dd
         class="css-1pld8at"
+        data-cy="configurationMapValue"
       >
         UX Designer
       </dd>
       <span
         class="static_configurationMapRowAction css-48ylac"
+        data-cy="configrationMapRowAction"
       >
         <button
           class="css-1vveheu"
+          data-cy="secondaryButton"
           tabindex="0"
         >
           <span
@@ -117,23 +140,28 @@ exports[`ConfigurationMap renders with actions 1`] = `
       </span>
     </div>
     <div
-      class="css-dcg1uu"
+      class="css-1f2226p"
+      data-cy="configurationMapRow"
     >
       <dt
         class="css-1bnt6tn"
+        data-cy="configurationMapLabel"
       >
         City
       </dt>
       <dd
         class="css-1pld8at"
+        data-cy="configurationMapValue"
       >
         San Francisco
       </dd>
       <span
         class="static_configurationMapRowAction css-48ylac"
+        data-cy="configrationMapRowAction"
       >
         <button
           class="css-1vveheu"
+          data-cy="secondaryButton"
           tabindex="0"
         >
           <span
@@ -151,48 +179,59 @@ exports[`ConfigurationMap renders with actions 1`] = `
 exports[`ConfigurationMap renders with default value 1`] = `
 <div
   class="css-1fnaylc"
+  data-cy="configurationMap"
 >
   <dl
     class="css-1mqjlka"
+    data-cy="configurationMapSection"
   >
     <div
-      class="css-13rkv0z"
+      class="css-yktv50"
+      data-cy="configurationMapRow"
     >
       <dt
         class="css-1bnt6tn"
+        data-cy="configurationMapLabel"
       >
         Name
       </dt>
       <dd
         class="css-1pld8at"
+        data-cy="configurationMapValue"
       >
         Jane Doe
       </dd>
     </div>
     <div
-      class="css-13rkv0z"
+      class="css-yktv50"
+      data-cy="configurationMapRow"
     >
       <dt
         class="css-1bnt6tn"
+        data-cy="configurationMapLabel"
       >
         Role
       </dt>
       <dd
         class="css-1pld8at"
+        data-cy="configurationMapValue"
       >
         —
       </dd>
     </div>
     <div
-      class="css-13rkv0z"
+      class="css-yktv50"
+      data-cy="configurationMapRow"
     >
       <dt
         class="css-1bnt6tn"
+        data-cy="configurationMapLabel"
       >
         City
       </dt>
       <dd
         class="css-1pld8at"
+        data-cy="configurationMapValue"
       >
         —
       </dd>
@@ -204,53 +243,65 @@ exports[`ConfigurationMap renders with default value 1`] = `
 exports[`ConfigurationMap renders with headline 1`] = `
 <div
   class="css-1fnaylc"
+  data-cy="configurationMap"
 >
   <dl
     class="css-1mqjlka"
+    data-cy="configurationMapSection"
   >
     <h1
       class="css-14una7e"
+      data-cy="configurationMapHeading"
     >
       Jane Doe Info
     </h1>
     <div
-      class="css-13rkv0z"
+      class="css-yktv50"
+      data-cy="configurationMapRow"
     >
       <dt
         class="css-1bnt6tn"
+        data-cy="configurationMapLabel"
       >
         Name
       </dt>
       <dd
         class="css-1pld8at"
+        data-cy="configurationMapValue"
       >
         Jane Doe
       </dd>
     </div>
     <div
-      class="css-13rkv0z"
+      class="css-yktv50"
+      data-cy="configurationMapRow"
     >
       <dt
         class="css-1bnt6tn"
+        data-cy="configurationMapLabel"
       >
         Role
       </dt>
       <dd
         class="css-1pld8at"
+        data-cy="configurationMapValue"
       >
         UX Designer
       </dd>
     </div>
     <div
-      class="css-13rkv0z"
+      class="css-yktv50"
+      data-cy="configurationMapRow"
     >
       <dt
         class="css-1bnt6tn"
+        data-cy="configurationMapLabel"
       >
         City
       </dt>
       <dd
         class="css-1pld8at"
+        data-cy="configurationMapValue"
       >
         San Francisco
       </dd>
diff --git a/packages/configurationmap/tests/__snapshots__/HashMap.test.tsx.snap b/packages/configurationmap/tests/__snapshots__/HashMap.test.tsx.snap
index 2082ecdd0..83a51e54b 100644
--- a/packages/configurationmap/tests/__snapshots__/HashMap.test.tsx.snap
+++ b/packages/configurationmap/tests/__snapshots__/HashMap.test.tsx.snap
@@ -3,17 +3,21 @@
 exports[`HashMap renders array value 1`] = `
 <dl
   class="css-1mqjlka"
+  data-cy="configurationMapSection"
 >
   <div
-    class="css-13rkv0z"
+    class="css-yktv50"
+    data-cy="configurationMapRow"
   >
     <dt
       class="css-1bnt6tn"
+      data-cy="configurationMapLabel"
     >
       foo
     </dt>
     <dd
       class="css-1pld8at"
+      data-cy="configurationMapValue"
     >
       foo, bar, baz
     </dd>
@@ -24,17 +28,21 @@ exports[`HashMap renders array value 1`] = `
 exports[`HashMap renders boolean value 1`] = `
 <dl
   class="css-1mqjlka"
+  data-cy="configurationMapSection"
 >
   <div
-    class="css-13rkv0z"
+    class="css-yktv50"
+    data-cy="configurationMapRow"
   >
     <dt
       class="css-1bnt6tn"
+      data-cy="configurationMapLabel"
     >
       foo
     </dt>
     <dd
       class="css-1pld8at"
+      data-cy="configurationMapValue"
     >
       true
     </dd>
@@ -45,17 +53,21 @@ exports[`HashMap renders boolean value 1`] = `
 exports[`HashMap renders default 1`] = `
 <dl
   class="css-1mqjlka"
+  data-cy="configurationMapSection"
 >
   <div
-    class="css-13rkv0z"
+    class="css-yktv50"
+    data-cy="configurationMapRow"
   >
     <dt
       class="css-1bnt6tn"
+      data-cy="configurationMapLabel"
     >
       foo
     </dt>
     <dd
       class="css-1pld8at"
+      data-cy="configurationMapValue"
     >
       bar
     </dd>
@@ -66,17 +78,21 @@ exports[`HashMap renders default 1`] = `
 exports[`HashMap renders empty value 1`] = `
 <dl
   class="css-1mqjlka"
+  data-cy="configurationMapSection"
 >
   <div
-    class="css-13rkv0z"
+    class="css-yktv50"
+    data-cy="configurationMapRow"
   >
     <dt
       class="css-1bnt6tn"
+      data-cy="configurationMapLabel"
     >
       foo
     </dt>
     <dd
       class="css-1pld8at"
+      data-cy="configurationMapValue"
     >
       empty
     </dd>
@@ -87,22 +103,27 @@ exports[`HashMap renders empty value 1`] = `
 exports[`HashMap renders with a headline 1`] = `
 <dl
   class="css-1mqjlka"
+  data-cy="configurationMapSection"
 >
   <h1
     class="css-14una7e"
+    data-cy="configurationMapHeading"
   >
     baz
   </h1>
   <div
-    class="css-13rkv0z"
+    class="css-yktv50"
+    data-cy="configurationMapRow"
   >
     <dt
       class="css-1bnt6tn"
+      data-cy="configurationMapLabel"
     >
       foo
     </dt>
     <dd
       class="css-1pld8at"
+      data-cy="configurationMapValue"
     >
       bar
     </dd>
@@ -113,25 +134,31 @@ exports[`HashMap renders with a headline 1`] = `
 exports[`HashMap renders with nested object hash 1`] = `
 <dl
   class="css-1mqjlka"
+  data-cy="configurationMapSection"
 >
   <dl
     class="css-1mqjlka"
+    data-cy="configurationMapSection"
   >
     <h2
       class="css-14una7e"
+      data-cy="configurationMapHeading"
     >
       foo
     </h2>
     <div
-      class="css-13rkv0z"
+      class="css-yktv50"
+      data-cy="configurationMapRow"
     >
       <dt
         class="css-1bnt6tn"
+        data-cy="configurationMapLabel"
       >
         bar
       </dt>
       <dd
         class="css-1pld8at"
+        data-cy="configurationMapValue"
       >
         baz
       </dd>
diff --git a/packages/donutChart/components/DonutChart.tsx b/packages/donutChart/components/DonutChart.tsx
index de5ec98cc..1f9aecb4a 100644
--- a/packages/donutChart/components/DonutChart.tsx
+++ b/packages/donutChart/components/DonutChart.tsx
@@ -36,7 +36,7 @@ class DonutChart extends React.PureComponent<DonutChartProps, {}> {
     const circleCenter = diameter / 2;
 
     return (
-      <svg viewBox={`0 0 ${diameter} ${diameter}`}>
+      <svg viewBox={`0 0 ${diameter} ${diameter}`} data-cy="donutChart">
         <circle
           cx={circleCenter}
           cy={circleCenter}
@@ -73,7 +73,11 @@ class DonutChart extends React.PureComponent<DonutChartProps, {}> {
           y={circleCenter}
           style={{ textAnchor: "middle" }}
         >
-          <tspan dominantBaseline={text ? "unset" : "central"} fontSize={6}>
+          <tspan
+            dominantBaseline={text ? "unset" : "central"}
+            fontSize={6}
+            data-cy="donutChart-label"
+          >
             {label}
           </tspan>
           {text && (
@@ -82,6 +86,7 @@ class DonutChart extends React.PureComponent<DonutChartProps, {}> {
               y={circleCenter + 3 * 1.4} // adding font size plus a line height of 1.4 to create a visual line break
               fontSize={3}
               className={tintContentSecondary}
+              data-cy="donutChart-text"
             >
               {text}
             </tspan>
diff --git a/packages/donutChart/tests/__snapshots__/DonutChart.test.tsx.snap b/packages/donutChart/tests/__snapshots__/DonutChart.test.tsx.snap
index 3b87c5eaf..f905a4bd1 100644
--- a/packages/donutChart/tests/__snapshots__/DonutChart.test.tsx.snap
+++ b/packages/donutChart/tests/__snapshots__/DonutChart.test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`DonutChart renders default 1`] = `
 <svg
+  data-cy="donutChart"
   viewBox="0 0 33.33098861837907 33.33098861837907"
 >
   <circle
@@ -41,6 +42,7 @@ exports[`DonutChart renders default 1`] = `
     y={16.665494309189533}
   >
     <tspan
+      data-cy="donutChart-label"
       dominantBaseline="central"
       fontSize={6}
     />
@@ -61,6 +63,7 @@ exports[`DonutChart renders with text and label 1`] = `
 }
 
 <svg
+  data-cy="donutChart"
   viewBox="0 0 33.33098861837907 33.33098861837907"
 >
   <circle
@@ -100,6 +103,7 @@ exports[`DonutChart renders with text and label 1`] = `
     y={16.665494309189533}
   >
     <tspan
+      data-cy="donutChart-label"
       dominantBaseline="unset"
       fontSize={6}
     >
@@ -107,6 +111,7 @@ exports[`DonutChart renders with text and label 1`] = `
     </tspan>
     <tspan
       className="emotion-0"
+      data-cy="donutChart-text"
       fontSize={3}
       x={16.665494309189533}
       y={20.865494309189533}
diff --git a/packages/dropdowMenu/components/DropdownMenu.tsx b/packages/dropdowMenu/components/DropdownMenu.tsx
index 0da3063fa..e4d51bcec 100644
--- a/packages/dropdowMenu/components/DropdownMenu.tsx
+++ b/packages/dropdowMenu/components/DropdownMenu.tsx
@@ -17,6 +17,7 @@ const DropdownMenu = (props: DropdownMenuProps) => {
       className={cx(menuList, border("all"))}
       ref={menuRef}
       style={{ width, maxHeight }}
+      data-cy="dropdownMenu"
       {...other}
     />
   );
diff --git a/packages/dropdowMenu/components/DropdownMenuItem.tsx b/packages/dropdowMenu/components/DropdownMenuItem.tsx
index 007caf964..827d7d0e4 100644
--- a/packages/dropdowMenu/components/DropdownMenuItem.tsx
+++ b/packages/dropdowMenu/components/DropdownMenuItem.tsx
@@ -51,6 +51,7 @@ const DropdownMenuItem = (props: DropdownMenuItemProps) => {
           [margin("bottom", "xs")]: index === listLength - 1
         }
       )}
+      data-cy="dropdownMenuItem"
       {...other}
     />
   );
diff --git a/packages/dropdowMenu/tests/__snapshots__/DropdownMenu.test.tsx.snap b/packages/dropdowMenu/tests/__snapshots__/DropdownMenu.test.tsx.snap
index d17b8a33a..7d4b00faa 100644
--- a/packages/dropdowMenu/tests/__snapshots__/DropdownMenu.test.tsx.snap
+++ b/packages/dropdowMenu/tests/__snapshots__/DropdownMenu.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`DropdownMenu renders 1`] = `
 
 <div
   className="emotion-0"
+  data-cy="dropdownMenu"
   style={
     Object {
       "maxHeight": 200,
diff --git a/packages/dropdowMenu/tests/__snapshots__/DropdownMenuItem.test.tsx.snap b/packages/dropdowMenu/tests/__snapshots__/DropdownMenuItem.test.tsx.snap
index 88c72cf4e..a03b5669f 100644
--- a/packages/dropdowMenu/tests/__snapshots__/DropdownMenuItem.test.tsx.snap
+++ b/packages/dropdowMenu/tests/__snapshots__/DropdownMenuItem.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`DropdownMenuItem renders 1`] = `
 
 <div
   className="emotion-0"
+  data-cy="dropdownMenuItem"
 >
   item content content
 </div>
@@ -34,6 +35,7 @@ exports[`DropdownMenuItem renders active 1`] = `
 
 <div
   className="emotion-0"
+  data-cy="dropdownMenuItem"
 >
   item content content
 </div>
@@ -57,6 +59,7 @@ exports[`DropdownMenuItem renders active and selected 1`] = `
 
 <div
   className="emotion-0"
+  data-cy="dropdownMenuItem"
 >
   item content content
 </div>
@@ -76,6 +79,7 @@ exports[`DropdownMenuItem renders disabled 1`] = `
 
 <div
   className="emotion-0"
+  data-cy="dropdownMenuItem"
 >
   item content content
 </div>
@@ -97,6 +101,7 @@ exports[`DropdownMenuItem renders selected 1`] = `
 
 <div
   className="emotion-0"
+  data-cy="dropdownMenuItem"
 >
   item content content
 </div>
diff --git a/packages/dropdownable/tests/__snapshots__/Dropdownable.test.tsx.snap b/packages/dropdownable/tests/__snapshots__/Dropdownable.test.tsx.snap
index ba3af324f..099dfccb5 100644
--- a/packages/dropdownable/tests/__snapshots__/Dropdownable.test.tsx.snap
+++ b/packages/dropdownable/tests/__snapshots__/Dropdownable.test.tsx.snap
@@ -72,12 +72,14 @@ exports[`Dropdownable is visible after opening 1`] = `
         <PrimaryButton>
           <ButtonBase
             appearance="primary"
+            data-cy="primaryButton"
           >
             <FocusStyleManager
               focusEnabledClass="css-xcotv6"
             >
               <button
                 className="emotion-0"
+                data-cy="primaryButton"
                 onClick={[Function]}
                 tabIndex={0}
               >
@@ -237,12 +239,14 @@ exports[`Dropdownable is visible after opening 2`] = `
         <PrimaryButton>
           <ButtonBase
             appearance="primary"
+            data-cy="primaryButton"
           >
             <FocusStyleManager
               focusEnabledClass="css-xcotv6"
             >
               <button
                 className="emotion-0"
+                data-cy="primaryButton"
                 onClick={[Function]}
                 tabIndex={0}
               >
diff --git a/packages/icon/components/Icon.tsx b/packages/icon/components/Icon.tsx
index b54432834..d4f59a50b 100644
--- a/packages/icon/components/Icon.tsx
+++ b/packages/icon/components/Icon.tsx
@@ -49,6 +49,7 @@ const Icon = (props: IconProps) => {
       role="img"
       aria-label={ariaLabel || `${shape} icon`}
       className={cx(icon, tintSVG(svgColor))}
+      data-cy="icon"
     >
       <use xlinkHref={`#${shape}`} />
     </svg>
diff --git a/packages/icon/tests/__snapshots__/Icon.test.tsx.snap b/packages/icon/tests/__snapshots__/Icon.test.tsx.snap
index 724b0309c..4c9077a3f 100644
--- a/packages/icon/tests/__snapshots__/Icon.test.tsx.snap
+++ b/packages/icon/tests/__snapshots__/Icon.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`Icon renders 1`] = `
 <svg
   aria-label="test icon"
   className="emotion-0"
+  data-cy="icon"
   height={48}
   preserveAspectRatio="xMinYMin meet"
   role="img"
@@ -38,6 +39,7 @@ exports[`Icon renders with defaults 1`] = `
 <svg
   aria-label="system-arrow-down icon"
   className="emotion-0"
+  data-cy="icon"
   height={24}
   preserveAspectRatio="xMinYMin meet"
   role="img"
diff --git a/packages/infobox/components/InfoBox.tsx b/packages/infobox/components/InfoBox.tsx
index a101fb439..770375613 100644
--- a/packages/infobox/components/InfoBox.tsx
+++ b/packages/infobox/components/InfoBox.tsx
@@ -67,10 +67,14 @@ export class InfoBox extends React.PureComponent<InfoBoxProps, {}> {
       onDismiss,
       className
     } = this.props;
-
     const hasActions = primaryAction || secondaryAction;
-
     const isUrgentMessage = appearance === "danger" || appearance === "warning";
+    const dataCy = [
+      "infoBox",
+      ...(appearance && appearance !== "default"
+        ? [`infoBox.${appearance}`]
+        : [])
+    ].join(" ");
 
     return (
       <div
@@ -84,10 +88,14 @@ export class InfoBox extends React.PureComponent<InfoBoxProps, {}> {
         )}
         role={isUrgentMessage ? "alert" : "log"}
         aria-live={isUrgentMessage ? "assertive" : "polite"}
+        data-cy={dataCy}
       >
         <div>{message}</div>
         {hasActions && (
-          <div className={cx(infoBoxActions, display("inline-flex"))}>
+          <div
+            className={cx(infoBoxActions, display("inline-flex"))}
+            data-cy="infoBox-actions"
+          >
             {primaryAction && (
               <span className={primaryActionStyle}>{primaryAction}</span>
             )}
diff --git a/packages/infobox/tests/__snapshots__/InfoBox.test.tsx.snap b/packages/infobox/tests/__snapshots__/InfoBox.test.tsx.snap
index 4bb8b9edf..3050474b1 100644
--- a/packages/infobox/tests/__snapshots__/InfoBox.test.tsx.snap
+++ b/packages/infobox/tests/__snapshots__/InfoBox.test.tsx.snap
@@ -53,6 +53,7 @@ exports[`InfoBox renders default 1`] = `
 <div
   aria-live="polite"
   className="emotion-1"
+  data-cy="infoBox"
   role="log"
 >
   <div>
@@ -103,6 +104,7 @@ exports[`InfoBox renders with JSX message 1`] = `
 <div
   aria-live="polite"
   className="emotion-1"
+  data-cy="infoBox"
   role="log"
 >
   <div>
@@ -193,6 +195,7 @@ exports[`InfoBox renders with actions 1`] = `
 <div
   aria-live="polite"
   className="emotion-4"
+  data-cy="infoBox"
   role="log"
 >
   <div>
@@ -200,6 +203,7 @@ exports[`InfoBox renders with actions 1`] = `
   </div>
   <div
     className="emotion-2"
+    data-cy="infoBox-actions"
   >
     <span
       className="emotion-0"
@@ -251,6 +255,7 @@ exports[`InfoBox renders without dismiss button 1`] = `
 <div
   aria-live="polite"
   className="emotion-0"
+  data-cy="infoBox"
   role="log"
 >
   <div>
diff --git a/packages/list/components/BorderedList.tsx b/packages/list/components/BorderedList.tsx
index 05d0c6075..35266cad3 100644
--- a/packages/list/components/BorderedList.tsx
+++ b/packages/list/components/BorderedList.tsx
@@ -9,7 +9,10 @@ const BorderedList: React.SFC<SharedListProps> = props => {
   const BorderedListEl = tag;
 
   return (
-    <BorderedListEl className={cx(listReset, borderedListStyle)}>
+    <BorderedListEl
+      className={cx(listReset, borderedListStyle)}
+      data-cy="borderedList"
+    >
       {children}
     </BorderedListEl>
   );
diff --git a/packages/list/components/List.tsx b/packages/list/components/List.tsx
index 916ec6688..36c3579ce 100644
--- a/packages/list/components/List.tsx
+++ b/packages/list/components/List.tsx
@@ -31,7 +31,7 @@ const List = (props: ListProps) => {
   const ListEl = tag;
 
   return (
-    <ListEl className={cx(listReset, listMarker(markerStyle))}>
+    <ListEl className={cx(listReset, listMarker(markerStyle))} data-cy="list">
       {children}
     </ListEl>
   );
diff --git a/packages/list/tests/__snapshots__/BorderedList.test.tsx.snap b/packages/list/tests/__snapshots__/BorderedList.test.tsx.snap
index 45d528766..6c60412b6 100644
--- a/packages/list/tests/__snapshots__/BorderedList.test.tsx.snap
+++ b/packages/list/tests/__snapshots__/BorderedList.test.tsx.snap
@@ -25,6 +25,7 @@ exports[`BorderedList renders default 1`] = `
 
 <ul
   className="emotion-0"
+  data-cy="borderedList"
 >
   <li>
     list item
diff --git a/packages/list/tests/__snapshots__/List.test.tsx.snap b/packages/list/tests/__snapshots__/List.test.tsx.snap
index 32b5e7456..e2ae29f54 100644
--- a/packages/list/tests/__snapshots__/List.test.tsx.snap
+++ b/packages/list/tests/__snapshots__/List.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`List renders default 1`] = `
 
 <ul
   className="emotion-0"
+  data-cy="list"
 >
   <li>
     list item
@@ -35,6 +36,7 @@ exports[`List renders with all props 1`] = `
 
 <ol
   className="emotion-0"
+  data-cy="list"
 >
   <li>
     list item
diff --git a/packages/modal/components/DialogModal.tsx b/packages/modal/components/DialogModal.tsx
index 24ec5f370..264a81e9f 100644
--- a/packages/modal/components/DialogModal.tsx
+++ b/packages/modal/components/DialogModal.tsx
@@ -34,8 +34,11 @@ class DialogModal extends React.PureComponent<DialogModalProps, {}> {
     } = this.props;
 
     return (
-      <ModalBase {...other}>
-        <div className={cx(modalHeader, flexItem("shrink"))}>
+      <ModalBase dataCy="dialogModal" {...other}>
+        <div
+          className={cx(modalHeader, flexItem("shrink"))}
+          data-cy="dialogModal-header"
+        >
           <div className={cx(flex({ align: "center" }), padding("all", "l"))}>
             <div className={cx(flexItem("grow"), textSize("l"))}>{title}</div>
             <div
@@ -57,11 +60,15 @@ class DialogModal extends React.PureComponent<DialogModalProps, {}> {
           className={cx(modalContent, {
             [padding("all", "l")]: !isContentFlush
           })}
+          data-cy="dialogModal-content"
         >
           {children}
         </div>
         {footerContent && (
-          <div className={cx(flexItem("shrink"), padding("all", "l"))}>
+          <div
+            className={cx(flexItem("shrink"), padding("all", "l"))}
+            data-cy="dialogModal-footer"
+          >
             {footerContent}
           </div>
         )}
diff --git a/packages/modal/components/FullscreenModal.tsx b/packages/modal/components/FullscreenModal.tsx
index 43f3d3aca..9a703e060 100644
--- a/packages/modal/components/FullscreenModal.tsx
+++ b/packages/modal/components/FullscreenModal.tsx
@@ -42,6 +42,7 @@ class FullscreenModal extends React.PureComponent<FullscreenModalProps, {}> {
         size={ModalSizes.Fullscreen}
         onClose={onClose}
         isAnimated={false}
+        dataCy="fullscreenModal"
         {...other}
       >
         <div className={flex({ direction: "column" })}>
@@ -51,6 +52,7 @@ class FullscreenModal extends React.PureComponent<FullscreenModalProps, {}> {
               fullscreenModalHeader,
               padding("all", "xl")
             )}
+            data-cy="fullscreenModal-header"
           >
             <Delegate
               to={headerComponent}
@@ -62,6 +64,7 @@ class FullscreenModal extends React.PureComponent<FullscreenModalProps, {}> {
             className={cx(modalContent, {
               [padding("all", "xl")]: !isContentFlush
             })}
+            data-cy="fullscreenModal-content"
           >
             {children}
           </div>
diff --git a/packages/modal/components/ModalBase.tsx b/packages/modal/components/ModalBase.tsx
index f539e065e..950e9652d 100644
--- a/packages/modal/components/ModalBase.tsx
+++ b/packages/modal/components/ModalBase.tsx
@@ -34,6 +34,10 @@ export interface ModalBaseProps {
   onClose: (event?: React.SyntheticEvent<HTMLElement>) => void;
   /** Which size modal to render. ⚠️Do not use this directly⚠️ */
   size?: ModalSizes;
+  /**
+   * human-readable selector used for writing tests
+   */
+  dataCy?: string;
 }
 
 const animationDuration = 250;
@@ -56,7 +60,14 @@ class ModalBase extends React.PureComponent<ModalBaseProps, {}> {
   }
 
   public render() {
-    const { children, isAnimated, size, initialFocus, isOpen } = this.props;
+    const {
+      children,
+      isAnimated,
+      size,
+      initialFocus,
+      isOpen,
+      dataCy
+    } = this.props;
     const modalSize = size || ModalSizes.M;
 
     return (
@@ -88,7 +99,11 @@ class ModalBase extends React.PureComponent<ModalBaseProps, {}> {
                 onKeyDown={this.onKeyDown}
                 tabIndex={-1}
               >
-                <ModalContents isOpen={isOpen} onClose={this.props.onClose}>
+                <ModalContents
+                  isOpen={isOpen}
+                  onClose={this.props.onClose}
+                  dataCy={dataCy}
+                >
                   {children}
                 </ModalContents>
               </FocusTrap>
diff --git a/packages/modal/components/ModalContents.tsx b/packages/modal/components/ModalContents.tsx
index 0d7fa9e8f..cafce7c60 100644
--- a/packages/modal/components/ModalContents.tsx
+++ b/packages/modal/components/ModalContents.tsx
@@ -6,6 +6,10 @@ import { flex } from "../../shared/styles/styleUtils";
 export interface ModalContentsProps {
   isOpen: boolean;
   onClose: () => void;
+  /**
+   * human-readable selector used for writing tests
+   */
+  dataCy?: string;
 }
 export class ModalContentsUnwrapped extends React.Component<
   ModalContentsProps,
@@ -17,7 +21,10 @@ export class ModalContentsUnwrapped extends React.Component<
   }
   render() {
     return (
-      <div className={cx(modalWrapper, flex({ direction: "column" }))}>
+      <div
+        className={cx(modalWrapper, flex({ direction: "column" }))}
+        data-cy={this.props.dataCy}
+      >
         {this.props.children}
       </div>
     );
diff --git a/packages/modal/tests/__snapshots__/Modal.test.tsx.snap b/packages/modal/tests/__snapshots__/Modal.test.tsx.snap
index 55f36a4be..82e2e81c8 100644
--- a/packages/modal/tests/__snapshots__/Modal.test.tsx.snap
+++ b/packages/modal/tests/__snapshots__/Modal.test.tsx.snap
@@ -315,6 +315,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
     title="Title"
   >
     <ModalBase
+      dataCy="dialogModal"
       isAnimated={true}
       isOpen={true}
       onClose={[MockFunction]}
@@ -804,9 +805,11 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                   >
                     <div
                       class="emotion-16"
+                      data-cy="dialogModal"
                     >
                       <div
                         class="emotion-6"
+                        data-cy="dialogModal-header"
                       >
                         <div
                           class="emotion-5"
@@ -827,6 +830,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                               <svg
                                 aria-label="system-close icon"
                                 class="emotion-2"
+                                data-cy="icon"
                                 height="16"
                                 preserveAspectRatio="xMinYMin meet"
                                 role="img"
@@ -843,6 +847,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                       </div>
                       <div
                         class="emotion-7"
+                        data-cy="dialogModal-content"
                       >
                         <div
                           tabindex="0"
@@ -852,6 +857,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                       </div>
                       <div
                         class="emotion-15"
+                        data-cy="dialogModal-footer"
                       >
                         <div
                           class="emotion-14"
@@ -861,6 +867,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                           >
                             <button
                               class="emotion-8 emotion-9"
+                              data-cy="secondaryButton"
                               tabindex="0"
                             >
                               <span
@@ -875,6 +882,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                           >
                             <button
                               class="emotion-11 emotion-12"
+                              data-cy="primaryButton"
                               tabindex="0"
                             >
                               <span
@@ -907,9 +915,11 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                   >
                     <div
                       class="emotion-14"
+                      data-cy="dialogModal"
                     >
                       <div
                         class="emotion-6"
+                        data-cy="dialogModal-header"
                       >
                         <div
                           class="emotion-5"
@@ -930,6 +940,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                               <svg
                                 aria-label="system-close icon"
                                 class="emotion-2"
+                                data-cy="icon"
                                 height="16"
                                 preserveAspectRatio="xMinYMin meet"
                                 role="img"
@@ -946,6 +957,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                       </div>
                       <div
                         class="emotion-7"
+                        data-cy="dialogModal-content"
                       >
                         <div
                           tabindex="0"
@@ -955,6 +967,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                       </div>
                       <div
                         class="emotion-13"
+                        data-cy="dialogModal-footer"
                       >
                         <div
                           class="emotion-12"
@@ -964,6 +977,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                           >
                             <button
                               class="emotion-8 css-1h85cd2"
+                              data-cy="secondaryButton"
                               tabindex="0"
                             >
                               <span
@@ -978,6 +992,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                           >
                             <button
                               class="emotion-10 css-xcotv6"
+                              data-cy="primaryButton"
                               tabindex="0"
                             >
                               <span
@@ -1022,18 +1037,22 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                   tabIndex={-1}
                 >
                   <clickOutside(ModalContentsUnwrapped)
+                    dataCy="dialogModal"
                     isOpen={true}
                     onClose={[MockFunction]}
                   >
                     <ModalContentsUnwrapped
+                      dataCy="dialogModal"
                       isOpen={true}
                       onClose={[MockFunction]}
                     >
                       <div
                         className="emotion-14"
+                        data-cy="dialogModal"
                       >
                         <div
                           className="emotion-6"
+                          data-cy="dialogModal-header"
                         >
                           <div
                             className="emotion-5"
@@ -1066,6 +1085,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                                     <svg
                                       aria-label="system-close icon"
                                       className="emotion-2"
+                                      data-cy="icon"
                                       height={16}
                                       preserveAspectRatio="xMinYMin meet"
                                       role="img"
@@ -1084,6 +1104,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                         </div>
                         <div
                           className="emotion-7"
+                          data-cy="dialogModal-content"
                         >
                           <div
                             tabIndex={0}
@@ -1093,6 +1114,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                         </div>
                         <div
                           className="emotion-13"
+                          data-cy="dialogModal-footer"
                         >
                           <div
                             className="emotion-12"
@@ -1105,6 +1127,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                               >
                                 <ButtonBase
                                   appearance="secondary"
+                                  data-cy="secondaryButton"
                                   onClick={[MockFunction]}
                                 >
                                   <FocusStyleManager
@@ -1112,6 +1135,7 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                                   >
                                     <button
                                       className="emotion-8"
+                                      data-cy="secondaryButton"
                                       onClick={[Function]}
                                       tabIndex={0}
                                     >
@@ -1131,12 +1155,14 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                               <PrimaryButton>
                                 <ButtonBase
                                   appearance="primary"
+                                  data-cy="primaryButton"
                                 >
                                   <FocusStyleManager
                                     focusEnabledClass="css-xcotv6"
                                   >
                                     <button
                                       className="emotion-10"
+                                      data-cy="primaryButton"
                                       onClick={[Function]}
                                       tabIndex={0}
                                     >
@@ -1410,6 +1436,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
   title="Title"
 >
   <ModalBase
+    dataCy="fullscreenModal"
     isAnimated={false}
     isOpen={true}
     onClose={[MockFunction]}
@@ -1494,9 +1521,11 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                 >
                   <div
                     class="emotion-12"
+                    data-cy="dialogModal"
                   >
                     <div
                       class="css-ard01v"
+                      data-cy="dialogModal-header"
                     >
                       <div
                         class="css-1byz17q"
@@ -1517,6 +1546,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                             <svg
                               aria-label="system-close icon"
                               class="css-zgvqkl"
+                              data-cy="icon"
                               height="16"
                               preserveAspectRatio="xMinYMin meet"
                               role="img"
@@ -1533,6 +1563,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                     </div>
                     <div
                       class="css-1uzhd8w"
+                      data-cy="dialogModal-content"
                     >
                       <div
                         tabindex="0"
@@ -1542,6 +1573,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                     </div>
                     <div
                       class="css-1oke5ex"
+                      data-cy="dialogModal-footer"
                     >
                       <div
                         class="css-5n0frn"
@@ -1551,6 +1583,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                         >
                           <button
                             class="emotion-1 css-1h85cd2"
+                            data-cy="secondaryButton"
                             tabindex="0"
                           >
                             <span
@@ -1565,6 +1598,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                         >
                           <button
                             class="emotion-6 css-xcotv6"
+                            data-cy="primaryButton"
                             tabindex="0"
                           >
                             <span
@@ -1914,9 +1948,11 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                 >
                   <div
                     class="emotion-16"
+                    data-cy="dialogModal"
                   >
                     <div
                       class="emotion-6"
+                      data-cy="dialogModal-header"
                     >
                       <div
                         class="emotion-5"
@@ -1937,6 +1973,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                             <svg
                               aria-label="system-close icon"
                               class="emotion-2"
+                              data-cy="icon"
                               height="16"
                               preserveAspectRatio="xMinYMin meet"
                               role="img"
@@ -1953,6 +1990,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                     </div>
                     <div
                       class="emotion-7"
+                      data-cy="dialogModal-content"
                     >
                       <div
                         tabindex="0"
@@ -1962,6 +2000,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                     </div>
                     <div
                       class="emotion-15"
+                      data-cy="dialogModal-footer"
                     >
                       <div
                         class="emotion-14"
@@ -1971,6 +2010,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                         >
                           <button
                             class="emotion-8 emotion-9"
+                            data-cy="secondaryButton"
                             tabindex="0"
                           >
                             <span
@@ -1985,6 +2025,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                         >
                           <button
                             class="emotion-11 emotion-12"
+                            data-cy="primaryButton"
                             tabindex="0"
                           >
                             <span
@@ -2290,12 +2331,14 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                 >
                   <div
                     class="emotion-14"
+                    data-cy="fullscreenModal"
                   >
                     <div
                       class="emotion-13"
                     >
                       <div
                         class="emotion-11"
+                        data-cy="fullscreenModal-header"
                       >
                         <div
                           class="emotion-10"
@@ -2305,6 +2348,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                           >
                             <button
                               class="emotion-1 emotion-2"
+                              data-cy="secondaryButton"
                               tabindex="0"
                             >
                               <span
@@ -2331,6 +2375,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                           >
                             <button
                               class="emotion-7 emotion-8"
+                              data-cy="primaryButton"
                               tabindex="0"
                             >
                               <span
@@ -2344,6 +2389,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                       </div>
                       <div
                         class="emotion-12"
+                        data-cy="fullscreenModal-content"
                       >
                         <div
                           tabindex="0"
@@ -2373,12 +2419,14 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                 >
                   <div
                     class="emotion-12"
+                    data-cy="fullscreenModal"
                   >
                     <div
                       class="emotion-11"
                     >
                       <div
                         class="emotion-9"
+                        data-cy="fullscreenModal-header"
                       >
                         <div
                           class="emotion-8"
@@ -2388,6 +2436,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                           >
                             <button
                               class="emotion-1 css-1h85cd2"
+                              data-cy="secondaryButton"
                               tabindex="0"
                             >
                               <span
@@ -2414,6 +2463,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                           >
                             <button
                               class="emotion-6 css-xcotv6"
+                              data-cy="primaryButton"
                               tabindex="0"
                             >
                               <span
@@ -2427,6 +2477,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                       </div>
                       <div
                         class="emotion-10"
+                        data-cy="fullscreenModal-content"
                       >
                         <div
                           tabindex="0"
@@ -2468,21 +2519,25 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                 tabIndex={-1}
               >
                 <clickOutside(ModalContentsUnwrapped)
+                  dataCy="fullscreenModal"
                   isOpen={true}
                   onClose={[MockFunction]}
                 >
                   <ModalContentsUnwrapped
+                    dataCy="fullscreenModal"
                     isOpen={true}
                     onClose={[MockFunction]}
                   >
                     <div
                       className="emotion-12"
+                      data-cy="fullscreenModal"
                     >
                       <div
                         className="emotion-11"
                       >
                         <div
                           className="emotion-9"
+                          data-cy="fullscreenModal-header"
                         >
                           <Delegate
                             default={[Function]}
@@ -2520,6 +2575,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                                   >
                                     <ButtonBase
                                       appearance="secondary"
+                                      data-cy="secondaryButton"
                                       onClick={[MockFunction]}
                                     >
                                       <FocusStyleManager
@@ -2527,6 +2583,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                                       >
                                         <button
                                           className="emotion-1"
+                                          data-cy="secondaryButton"
                                           onClick={[Function]}
                                           tabIndex={0}
                                         >
@@ -2558,12 +2615,14 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                                   <PrimaryButton>
                                     <ButtonBase
                                       appearance="primary"
+                                      data-cy="primaryButton"
                                     >
                                       <FocusStyleManager
                                         focusEnabledClass="css-xcotv6"
                                       >
                                         <button
                                           className="emotion-6"
+                                          data-cy="primaryButton"
                                           onClick={[Function]}
                                           tabIndex={0}
                                         >
@@ -2583,6 +2642,7 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                         </div>
                         <div
                           className="emotion-10"
+                          data-cy="fullscreenModal-content"
                         >
                           <div
                             tabIndex={0}
diff --git a/packages/pageheader/components/PageHeader.tsx b/packages/pageheader/components/PageHeader.tsx
index 3edec7968..68352a0c1 100644
--- a/packages/pageheader/components/PageHeader.tsx
+++ b/packages/pageheader/components/PageHeader.tsx
@@ -28,12 +28,16 @@ class PageHeader extends React.PureComponent<PageHeaderProps, {}> {
           padding("all", "l"),
           border("bottom")
         )}
+        data-cy="pageHeader"
       >
         <div className={flexItem("grow")}>
           <Breadcrumb>{breadcrumbElements}</Breadcrumb>
         </div>
         <div className={flexItem("shrink")}>
-          <ul className={cx(listReset, flex({ align: "center" }))}>
+          <ul
+            className={cx(listReset, flex({ align: "center" }))}
+            data-cy="pageHeader-actions"
+          >
             {actions.map(action => {
               return (
                 <li
diff --git a/packages/pageheader/tests/__snapshots__/PageHeader.test.tsx.snap b/packages/pageheader/tests/__snapshots__/PageHeader.test.tsx.snap
index cf701ce81..7a0082abb 100644
--- a/packages/pageheader/tests/__snapshots__/PageHeader.test.tsx.snap
+++ b/packages/pageheader/tests/__snapshots__/PageHeader.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`PageHeader default 1`] = `
 <div
   class="css-ufu8px"
+  data-cy="pageHeader"
 >
   <div
     class="css-qi8t7c"
@@ -12,6 +13,7 @@ exports[`PageHeader default 1`] = `
     >
       <div
         class="css-1ixtlzk"
+        data-cy="breadcrumb"
       >
         <span>
           One
@@ -19,10 +21,12 @@ exports[`PageHeader default 1`] = `
       </div>
       <div
         class="css-19hcarb"
+        data-cy="breadcrumb"
       >
         <svg
           aria-label="system-caret-right icon"
           class="css-zgvqkl"
+          data-cy="icon"
           height="16"
           preserveAspectRatio="xMinYMin meet"
           role="img"
@@ -36,6 +40,7 @@ exports[`PageHeader default 1`] = `
       </div>
       <div
         class="css-19hcarb"
+        data-cy="breadcrumb"
       >
         <span>
           Two
@@ -48,6 +53,7 @@ exports[`PageHeader default 1`] = `
   >
     <ul
       class="css-1mj0r5f"
+      data-cy="pageHeader-actions"
     >
       <li
         class="css-1skqmzz"
diff --git a/packages/selectInput/components/SelectInput.tsx b/packages/selectInput/components/SelectInput.tsx
index cfa5c77f7..e3f8e7715 100644
--- a/packages/selectInput/components/SelectInput.tsx
+++ b/packages/selectInput/components/SelectInput.tsx
@@ -99,11 +99,23 @@ class SelectInput extends React.PureComponent<
     delete other.onBlur;
 
     const hasError = appearance === InputAppearance.Error;
+    const parentDataCy = [
+      "selectInput",
+      ...(appearance && appearance !== InputAppearance.Standard
+        ? [`selectInput.${appearance}`]
+        : [])
+    ].join(" ");
+    const selectDataCy = [
+      "selectInput-select",
+      ...(appearance && appearance !== InputAppearance.Standard
+        ? [`selectInput-select.${appearance}`]
+        : [])
+    ].join(" ");
 
     return (
       <FormFieldWrapper id={id} errors={errors} hintContent={hintContent}>
         {({ getValidationErrors, isValid, getHintContent, describedByIds }) => (
-          <div>
+          <div data-cy={parentDataCy}>
             <label
               className={cx(getLabelStyle(hasError), {
                 [visuallyHidden]: !showInputLabel
@@ -130,6 +142,7 @@ class SelectInput extends React.PureComponent<
                 id={id}
                 onFocus={this.handleFocus}
                 onBlur={this.handleBlur}
+                data-cy={selectDataCy}
                 {...other}
               >
                 {options.map((option, key) => (
@@ -153,8 +166,13 @@ class SelectInput extends React.PureComponent<
                 />
               </span>
             </span>
-            {getHintContent}
-            {appearance === InputAppearance.Error && getValidationErrors}
+            {hasError &&
+              getValidationErrors && (
+                <div data-cy="selectInput-hintContent">
+                  {getHintContent}
+                  {hasError && getValidationErrors}
+                </div>
+              )}
           </div>
         )}
       </FormFieldWrapper>
diff --git a/packages/selectInput/tests/__snapshots__/SelectInput.test.tsx.snap b/packages/selectInput/tests/__snapshots__/SelectInput.test.tsx.snap
index 11d2d5f4f..a09371020 100644
--- a/packages/selectInput/tests/__snapshots__/SelectInput.test.tsx.snap
+++ b/packages/selectInput/tests/__snapshots__/SelectInput.test.tsx.snap
@@ -216,7 +216,9 @@ exports[`SelectInput should render all appearances focus 1`] = `
   <FormFieldWrapper
     id="layers"
   >
-    <div>
+    <div
+      data-cy="selectInput selectInput.[object Object]"
+    >
       <label
         className="emotion-0"
         htmlFor="layers"
@@ -230,6 +232,7 @@ exports[`SelectInput should render all appearances focus 1`] = `
           aria-describedby=""
           aria-invalid={false}
           className="emotion-1"
+          data-cy="selectInput-select selectInput-select.[object Object]"
           id="layers"
           onBlur={[Function]}
           onFocus={[Function]}
@@ -283,6 +286,7 @@ exports[`SelectInput should render all appearances focus 1`] = `
             <svg
               aria-label="system-triangle-down icon"
               className="emotion-2"
+              data-cy="icon"
               height={16}
               preserveAspectRatio="xMinYMin meet"
               role="img"
diff --git a/packages/styleUtils/layout/container/components/Container.tsx b/packages/styleUtils/layout/container/components/Container.tsx
index b3539d525..ac6987c9d 100644
--- a/packages/styleUtils/layout/container/components/Container.tsx
+++ b/packages/styleUtils/layout/container/components/Container.tsx
@@ -6,7 +6,9 @@ export interface ContainerProps {
 }
 
 const Container: React.StatelessComponent<ContainerProps> = ({ children }) => (
-  <div className={container}>{children}</div>
+  <div className={container} data-cy="conntainer">
+    {children}
+  </div>
 );
 
 export default Container;
diff --git a/packages/styleUtils/layout/container/tests/__snapshots__/Container.test.tsx.snap b/packages/styleUtils/layout/container/tests/__snapshots__/Container.test.tsx.snap
index d81e68354..fb4c285a4 100644
--- a/packages/styleUtils/layout/container/tests/__snapshots__/Container.test.tsx.snap
+++ b/packages/styleUtils/layout/container/tests/__snapshots__/Container.test.tsx.snap
@@ -28,6 +28,7 @@ exports[`Container renders default 1`] = `
 
 <div
   className="emotion-0"
+  data-cy="conntainer"
 >
   <div>
     content
diff --git a/packages/styleUtils/layout/flexbox/components/Flex.tsx b/packages/styleUtils/layout/flexbox/components/Flex.tsx
index fbe37cab8..a036409e8 100644
--- a/packages/styleUtils/layout/flexbox/components/Flex.tsx
+++ b/packages/styleUtils/layout/flexbox/components/Flex.tsx
@@ -30,6 +30,7 @@ const Flex = (props: FlexProps) => {
           ${getResponsiveSpacingStyle("padding-left", gutterSize)};
         }
       `}
+      data-cy="flex"
     >
       {children}
     </div>
diff --git a/packages/styleUtils/layout/flexbox/components/FlexItem.tsx b/packages/styleUtils/layout/flexbox/components/FlexItem.tsx
index f480d1bef..979547a1a 100644
--- a/packages/styleUtils/layout/flexbox/components/FlexItem.tsx
+++ b/packages/styleUtils/layout/flexbox/components/FlexItem.tsx
@@ -40,6 +40,7 @@ const FlexItem = (props: FlexItemProps) => {
         ${getResponsiveStyle("flex-grow", props.growFactor)};
         ${getResponsiveStyle("order", props.order)};
       `}
+      data-cy="flexItem"
     >
       {props.children}
     </div>
diff --git a/packages/styleUtils/layout/flexbox/tests/__snapshots__/Flex.test.tsx.snap b/packages/styleUtils/layout/flexbox/tests/__snapshots__/Flex.test.tsx.snap
index 4ef66ba5c..6192b28d8 100644
--- a/packages/styleUtils/layout/flexbox/tests/__snapshots__/Flex.test.tsx.snap
+++ b/packages/styleUtils/layout/flexbox/tests/__snapshots__/Flex.test.tsx.snap
@@ -29,6 +29,7 @@ exports[`Flex renders default 1`] = `
 
 <div
   className="emotion-0"
+  data-cy="flex"
 >
   <FlexItem
     flex="grow"
@@ -78,6 +79,7 @@ exports[`Flex renders with all props 1`] = `
 
 <div
   className="emotion-0"
+  data-cy="flex"
 >
   <FlexItem
     flex="grow"
@@ -219,6 +221,7 @@ exports[`Flex renders with responsive props 1`] = `
 
 <div
   className="emotion-0"
+  data-cy="flex"
 >
   <FlexItem
     flex="grow"
diff --git a/packages/styleUtils/layout/flexbox/tests/__snapshots__/FlexItem.test.tsx.snap b/packages/styleUtils/layout/flexbox/tests/__snapshots__/FlexItem.test.tsx.snap
index 868798476..515de107a 100644
--- a/packages/styleUtils/layout/flexbox/tests/__snapshots__/FlexItem.test.tsx.snap
+++ b/packages/styleUtils/layout/flexbox/tests/__snapshots__/FlexItem.test.tsx.snap
@@ -16,6 +16,7 @@ exports[`FlexItem renders default 1`] = `
 
 <div
   className="emotion-0"
+  data-cy="flexItem"
 >
   content
 </div>
@@ -44,6 +45,7 @@ exports[`FlexItem renders with all props 1`] = `
 
 <div
   className="emotion-0"
+  data-cy="flexItem"
 >
   content
 </div>
@@ -118,6 +120,7 @@ exports[`FlexItem renders with responsive props 1`] = `
 
 <div
   className="emotion-0"
+  data-cy="flexItem"
 >
   content
 </div>
diff --git a/packages/styleUtils/layout/gridList/components/GridList.tsx b/packages/styleUtils/layout/gridList/components/GridList.tsx
index ff1d85bc1..a49c603be 100644
--- a/packages/styleUtils/layout/gridList/components/GridList.tsx
+++ b/packages/styleUtils/layout/gridList/components/GridList.tsx
@@ -38,6 +38,7 @@ const GridList = (props: GridListProps) => {
         ${gridColumnTemplate(columnCount)};
         ${listReset};
       `}
+      data-cy="gridList"
     >
       {children}
     </GridListEl>
diff --git a/packages/styleUtils/layout/gridList/tests/__snapshots__/GridList.test.tsx.snap b/packages/styleUtils/layout/gridList/tests/__snapshots__/GridList.test.tsx.snap
index 643863538..e5d0f9977 100644
--- a/packages/styleUtils/layout/gridList/tests/__snapshots__/GridList.test.tsx.snap
+++ b/packages/styleUtils/layout/gridList/tests/__snapshots__/GridList.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`GridList renders default 1`] = `
 
 <ul
   className="emotion-0"
+  data-cy="gridList"
 >
   <li>
     list item
@@ -38,6 +39,7 @@ exports[`GridList renders with all props 1`] = `
 
 <ol
   className="emotion-0"
+  data-cy="gridList"
 >
   <li>
     list item
@@ -84,6 +86,7 @@ exports[`GridList renders with responsive props 1`] = `
 
 <ul
   className="emotion-0"
+  data-cy="gridList"
 >
   <li>
     list item
diff --git a/packages/styleUtils/modifiers/components/BorderedBox.tsx b/packages/styleUtils/modifiers/components/BorderedBox.tsx
index 0c3caaf99..354b3a2ee 100644
--- a/packages/styleUtils/modifiers/components/BorderedBox.tsx
+++ b/packages/styleUtils/modifiers/components/BorderedBox.tsx
@@ -30,6 +30,7 @@ const BorderedBox = (props: BorderedBoxProps) => {
   return (
     <Box
       className={cx(className, border(side, variant), borderRadius(radius))}
+      dataCy="borderedBox"
       {...other}
     />
   );
diff --git a/packages/styleUtils/modifiers/components/Box.tsx b/packages/styleUtils/modifiers/components/Box.tsx
index 385e8ed40..ff12737db 100644
--- a/packages/styleUtils/modifiers/components/Box.tsx
+++ b/packages/styleUtils/modifiers/components/Box.tsx
@@ -41,6 +41,10 @@ export interface BoxProps {
    * Which HTML tag to render the component with
    */
   tag: keyof React.ReactHTML;
+  /**
+   * human-readable selector used for writing tests
+   */
+  dataCy?: string;
   children?: React.ReactNode;
   className?: string;
 }
@@ -56,6 +60,7 @@ const Box = (props: BoxProps) => {
     textAlign,
     tag,
     className,
+    dataCy,
     ...other
   } = props;
   const getBgImageOptionVal = (option: "size" | "position" | "repeat") =>
@@ -88,12 +93,15 @@ const Box = (props: BoxProps) => {
     ${getVertAlignChildrenStyles(vertAlignChildren)};
   `;
 
-  return <BoxEl className={cx(boxStyles, className)} {...other} />;
+  return (
+    <BoxEl className={cx(boxStyles, className)} data-cy={dataCy} {...other} />
+  );
 };
 
 Box.defaultProps = {
   bgImageOptions: { size: undefined, position: undefined, repeat: undefined },
-  tag: "div" as keyof React.ReactHTML
+  tag: "div" as keyof React.ReactHTML,
+  dataCy: "box"
 };
 
 export default Box;
diff --git a/packages/styleUtils/modifiers/components/SpacingBox.tsx b/packages/styleUtils/modifiers/components/SpacingBox.tsx
index 8badc285a..8eac747e3 100644
--- a/packages/styleUtils/modifiers/components/SpacingBox.tsx
+++ b/packages/styleUtils/modifiers/components/SpacingBox.tsx
@@ -22,7 +22,11 @@ const SpacingBox = (props: SpacingBoxProps) => {
   const { side, spacingSize, className, ...other } = props;
 
   return (
-    <Box className={cx(className, padding(side, spacingSize))} {...other} />
+    <Box
+      className={cx(className, padding(side, spacingSize))}
+      dataCy="spacingBox"
+      {...other}
+    />
   );
 };
 
diff --git a/packages/styleUtils/modifiers/tests/__snapshots__/BorderedBox.test.tsx.snap b/packages/styleUtils/modifiers/tests/__snapshots__/BorderedBox.test.tsx.snap
index 277889351..34e3cfdb6 100644
--- a/packages/styleUtils/modifiers/tests/__snapshots__/BorderedBox.test.tsx.snap
+++ b/packages/styleUtils/modifiers/tests/__snapshots__/BorderedBox.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`BorderedBox renders default 1`] = `
     }
   }
   className="emotion-0"
+  dataCy="borderedBox"
   tag="div"
 >
   Content
@@ -40,6 +41,7 @@ exports[`BorderedBox renders with all props 1`] = `
     }
   }
   className="emotion-0"
+  dataCy="borderedBox"
   tag="div"
 >
   Content
diff --git a/packages/styleUtils/modifiers/tests/__snapshots__/Box.test.tsx.snap b/packages/styleUtils/modifiers/tests/__snapshots__/Box.test.tsx.snap
index 83dfaaf72..e7ecf7dea 100644
--- a/packages/styleUtils/modifiers/tests/__snapshots__/Box.test.tsx.snap
+++ b/packages/styleUtils/modifiers/tests/__snapshots__/Box.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`Box renders default 1`] = `
 
 <div
   className="emotion-0"
+  data-cy="box"
 >
   Content
 </div>
@@ -48,6 +49,7 @@ exports[`Box renders with all props 1`] = `
 
 <span
   className="emotion-0 test"
+  data-cy="box"
 >
   Content
 </span>
diff --git a/packages/styleUtils/modifiers/tests/__snapshots__/SpacingBox.test.tsx.snap b/packages/styleUtils/modifiers/tests/__snapshots__/SpacingBox.test.tsx.snap
index 8d6d7a579..b192a9508 100644
--- a/packages/styleUtils/modifiers/tests/__snapshots__/SpacingBox.test.tsx.snap
+++ b/packages/styleUtils/modifiers/tests/__snapshots__/SpacingBox.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`SpacingBox renders default 1`] = `
     }
   }
   className="emotion-0"
+  dataCy="spacingBox"
   tag="div"
 >
   content
@@ -34,6 +35,7 @@ exports[`SpacingBox renders with all props 1`] = `
     }
   }
   className="emotion-0"
+  dataCy="spacingBox"
   tag="div"
 >
   content
@@ -62,6 +64,7 @@ exports[`SpacingBox renders with responsive spacingSize 1`] = `
     }
   }
   className="emotion-0"
+  dataCy="spacingBox"
   tag="div"
 >
   content
diff --git a/packages/styleUtils/typography/components/CaptionText.tsx b/packages/styleUtils/typography/components/CaptionText.tsx
index d2a548f4c..f49d235b5 100644
--- a/packages/styleUtils/typography/components/CaptionText.tsx
+++ b/packages/styleUtils/typography/components/CaptionText.tsx
@@ -4,7 +4,12 @@ import { SharedTextProps } from "../textTypes";
 import { themeTextColorSecondary } from "../../../design-tokens/build/js/designTokens";
 
 const CaptionText = (props: SharedTextProps) => (
-  <SmallText weight="normal" color={themeTextColorSecondary} {...props} />
+  <SmallText
+    weight="normal"
+    color={themeTextColorSecondary}
+    dataCy="captionText"
+    {...props}
+  />
 );
 
 CaptionText.defaultProps = {
diff --git a/packages/styleUtils/typography/components/DangerText.tsx b/packages/styleUtils/typography/components/DangerText.tsx
index fd4f5e8ac..d06170bb5 100644
--- a/packages/styleUtils/typography/components/DangerText.tsx
+++ b/packages/styleUtils/typography/components/DangerText.tsx
@@ -4,7 +4,7 @@ import { BasicTextProps } from "../textTypes";
 import { themeError } from "../../../design-tokens/build/js/designTokens";
 
 const DangerText = (props: BasicTextProps) => (
-  <Text color={themeError} {...props} />
+  <Text color={themeError} dataCy="dangerText" {...props} />
 );
 
 DangerText.defaultProps = {
diff --git a/packages/styleUtils/typography/components/HeadingText1.tsx b/packages/styleUtils/typography/components/HeadingText1.tsx
index 3da719d82..5632729f9 100644
--- a/packages/styleUtils/typography/components/HeadingText1.tsx
+++ b/packages/styleUtils/typography/components/HeadingText1.tsx
@@ -4,7 +4,7 @@ import { HeadingTextProps } from "../textTypes";
 import { themeTextColorPrimary } from "../../../design-tokens/build/js/designTokens";
 
 const HeadingText1 = (props: HeadingTextProps) => (
-  <Text weight="medium" size="xl" {...props} />
+  <Text weight="medium" size="xl" dataCy="headingText1" {...props} />
 );
 
 HeadingText1.defaultProps = {
diff --git a/packages/styleUtils/typography/components/HeadingText2.tsx b/packages/styleUtils/typography/components/HeadingText2.tsx
index fed4c97ba..15afddf8a 100644
--- a/packages/styleUtils/typography/components/HeadingText2.tsx
+++ b/packages/styleUtils/typography/components/HeadingText2.tsx
@@ -5,7 +5,13 @@ import { HeadingTextProps } from "../textTypes";
 import { themeTextColorPrimary } from "../../../design-tokens/build/js/designTokens";
 
 const HeadingText2 = (props: HeadingTextProps) => (
-  <Text weight="medium" size="l" className={heading2} {...props} />
+  <Text
+    weight="medium"
+    size="l"
+    className={heading2}
+    dataCy="headingText2"
+    {...props}
+  />
 );
 
 HeadingText2.defaultProps = {
diff --git a/packages/styleUtils/typography/components/HeadingText3.tsx b/packages/styleUtils/typography/components/HeadingText3.tsx
index 4212809d7..fe7f9795f 100644
--- a/packages/styleUtils/typography/components/HeadingText3.tsx
+++ b/packages/styleUtils/typography/components/HeadingText3.tsx
@@ -4,7 +4,7 @@ import { HeadingTextProps } from "../textTypes";
 import { themeTextColorPrimary } from "../../../design-tokens/build/js/designTokens";
 
 const HeadingText3 = (props: HeadingTextProps) => (
-  <Text weight="medium" size="m" {...props} />
+  <Text weight="medium" size="m" dataCy="headingText3" {...props} />
 );
 
 HeadingText3.defaultProps = {
diff --git a/packages/styleUtils/typography/components/InteractiveText.tsx b/packages/styleUtils/typography/components/InteractiveText.tsx
index 13587a8e8..6d6f62f48 100644
--- a/packages/styleUtils/typography/components/InteractiveText.tsx
+++ b/packages/styleUtils/typography/components/InteractiveText.tsx
@@ -10,6 +10,7 @@ const InteractiveText = (props: BasicTextProps) => (
       cursor: pointer;
     `}
     color={themeTextColorInteractive}
+    dataCy="interactiveText"
     {...props}
   />
 );
diff --git a/packages/styleUtils/typography/components/MonospaceText.tsx b/packages/styleUtils/typography/components/MonospaceText.tsx
index 4f41542a1..8a3c8073d 100644
--- a/packages/styleUtils/typography/components/MonospaceText.tsx
+++ b/packages/styleUtils/typography/components/MonospaceText.tsx
@@ -16,6 +16,7 @@ const MonospaceText = (props: MonospaceTextProps) => (
     className={css`
       font-family: monospace;
     `}
+    dataCy="monospaceText"
     {...props}
   />
 );
diff --git a/packages/styleUtils/typography/components/SmallText.tsx b/packages/styleUtils/typography/components/SmallText.tsx
index ec94bff5a..e2ab3d4dc 100644
--- a/packages/styleUtils/typography/components/SmallText.tsx
+++ b/packages/styleUtils/typography/components/SmallText.tsx
@@ -17,6 +17,10 @@ export interface SmallTextProps extends SharedTextProps {
    * The font weight of the text
    */
   weight: FontWeights;
+  /**
+   * human-readable selector used for writing tests
+   */
+  dataCy?: string;
 }
 
 const SmallText = (props: SmallTextProps) => <Text size="s" {...props} />;
@@ -26,7 +30,8 @@ SmallText.defaultProps = {
   color: themeTextColorPrimary,
   wrap: "wrap",
   weight: "normal",
-  tag: "p"
+  tag: "p",
+  dataCy: "smallText"
 };
 
 export default SmallText;
diff --git a/packages/styleUtils/typography/components/SuccessText.tsx b/packages/styleUtils/typography/components/SuccessText.tsx
index ce2f1ee01..acfeff686 100644
--- a/packages/styleUtils/typography/components/SuccessText.tsx
+++ b/packages/styleUtils/typography/components/SuccessText.tsx
@@ -4,7 +4,7 @@ import { BasicTextProps } from "../textTypes";
 import { themeSuccess } from "../../../design-tokens/build/js/designTokens";
 
 const SuccessText = (props: BasicTextProps) => (
-  <Text color={themeSuccess} {...props} />
+  <Text color={themeSuccess} dataCy="successText" {...props} />
 );
 
 SuccessText.defaultProps = {
diff --git a/packages/styleUtils/typography/components/Text.tsx b/packages/styleUtils/typography/components/Text.tsx
index 57b007dfa..9c822a761 100644
--- a/packages/styleUtils/typography/components/Text.tsx
+++ b/packages/styleUtils/typography/components/Text.tsx
@@ -19,11 +19,25 @@ export interface TextProps extends BasicTextProps {
    * The color of the text
    */
   color: React.CSSProperties["color"];
+  /**
+   * human-readable selector used for writing tests
+   */
+  dataCy?: string;
   className?: string;
 }
 
 const Text = (props: TextProps) => {
-  const { align, children, tag, wrap, weight, color, size, className } = props;
+  const {
+    align,
+    children,
+    tag,
+    wrap,
+    weight,
+    color,
+    size,
+    className,
+    dataCy
+  } = props;
   const TextTag = tag;
 
   return (
@@ -45,6 +59,7 @@ const Text = (props: TextProps) => {
           `]: wrap === "nowrap"
         }
       )}
+      data-cy={dataCy}
     >
       {children}
     </TextTag>
@@ -57,7 +72,8 @@ Text.defaultProps = {
   wrap: "wrap",
   weight: fontWeightNormal,
   color: themeTextColorPrimary,
-  size: "m"
+  size: "m",
+  dataCy: "text"
 };
 
 export default Text;
diff --git a/packages/styleUtils/typography/components/WarningText.tsx b/packages/styleUtils/typography/components/WarningText.tsx
index 0d8d3d74c..e6a2ebebb 100644
--- a/packages/styleUtils/typography/components/WarningText.tsx
+++ b/packages/styleUtils/typography/components/WarningText.tsx
@@ -4,7 +4,7 @@ import { BasicTextProps } from "../textTypes";
 import { themeWarning } from "../../../design-tokens/build/js/designTokens";
 
 const SuccessText = (props: BasicTextProps) => (
-  <Text color={themeWarning} {...props} />
+  <Text color={themeWarning} dataCy="warningText" {...props} />
 );
 
 SuccessText.defaultProps = {
diff --git a/packages/styleUtils/typography/tests/__snapshots__/typographyComponents.test.tsx.snap b/packages/styleUtils/typography/tests/__snapshots__/typographyComponents.test.tsx.snap
index a1bc52706..e6af5a4f9 100644
--- a/packages/styleUtils/typography/tests/__snapshots__/typographyComponents.test.tsx.snap
+++ b/packages/styleUtils/typography/tests/__snapshots__/typographyComponents.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Typography CaptionText renders all props 1`] = `
 <SmallText
   align="center"
   color="var(--themeTextColorSecondary, #76797E)"
+  dataCy="captionText"
   tag="span"
   weight="normal"
   wrap="nowrap"
@@ -16,6 +17,7 @@ exports[`Typography DangerText renders all props 1`] = `
 <Text
   align="center"
   color="var(--themeError, #EB293A)"
+  dataCy="dangerText"
   size="l"
   tag="span"
   weight="medium"
@@ -29,6 +31,7 @@ exports[`Typography HeadingText renders all props all HeadingText variants 1`] =
 <Text
   align="center"
   color="black"
+  dataCy="headingText1"
   size="xl"
   tag="h1"
   weight="medium"
@@ -47,6 +50,7 @@ exports[`Typography HeadingText renders all props all HeadingText variants 2`] =
   align="center"
   className="emotion-0"
   color="black"
+  dataCy="headingText2"
   size="l"
   tag="h1"
   weight="medium"
@@ -60,6 +64,7 @@ exports[`Typography HeadingText renders all props all HeadingText variants 3`] =
 <Text
   align="center"
   color="black"
+  dataCy="headingText3"
   size="m"
   tag="h1"
   weight="medium"
@@ -78,6 +83,7 @@ exports[`Typography InteractiveText renders all props 1`] = `
   align="center"
   className="emotion-0"
   color="var(--themeTextColorInteractive, #7D58FF)"
+  dataCy="interactiveText"
   size="l"
   tag="span"
   weight="medium"
@@ -96,6 +102,7 @@ exports[`Typography MonospaceText renders all props 1`] = `
   align="center"
   className="emotion-0"
   color="black"
+  dataCy="monospaceText"
   size="l"
   tag="span"
   weight="medium"
@@ -109,6 +116,7 @@ exports[`Typography SmallText renders all props 1`] = `
 <Text
   align="center"
   color="black"
+  dataCy="smallText"
   size="s"
   tag="span"
   weight="medium"
@@ -122,6 +130,7 @@ exports[`Typography SuccessText renders all props 1`] = `
 <Text
   align="center"
   color="var(--themeSuccess, #14C684)"
+  dataCy="successText"
   size="l"
   tag="span"
   weight="medium"
@@ -145,6 +154,7 @@ exports[`Typography Text renders all props 1`] = `
 
 <span
   className="test emotion-0"
+  data-cy="text"
 >
   content
 </span>
@@ -167,6 +177,7 @@ exports[`Typography Text renders all wrap variants 1`] = `
 
 <p
   className="emotion-0"
+  data-cy="text"
 >
   content
 </p>
@@ -186,6 +197,7 @@ exports[`Typography Text renders all wrap variants 2`] = `
 
 <p
   className="emotion-0"
+  data-cy="text"
 >
   content
 </p>
@@ -204,6 +216,7 @@ exports[`Typography Text renders all wrap variants 3`] = `
 
 <p
   className="emotion-0"
+  data-cy="text"
 >
   content
 </p>
@@ -213,6 +226,7 @@ exports[`Typography WarningText renders all props 1`] = `
 <Text
   align="center"
   color="var(--themeWarning, #F9A328)"
+  dataCy="warningText"
   size="l"
   tag="span"
   weight="medium"
@@ -234,6 +248,7 @@ exports[`Typography renders all default 1`] = `
 
 <p
   className="emotion-0"
+  data-cy="text"
 >
   content
 </p>
@@ -243,6 +258,7 @@ exports[`Typography renders all default 2`] = `
 <SmallText
   align="left"
   color="var(--themeTextColorSecondary, #76797E)"
+  dataCy="captionText"
   tag="p"
   weight="normal"
   wrap="wrap"
@@ -255,6 +271,7 @@ exports[`Typography renders all default 3`] = `
 <Text
   align="left"
   color="var(--themeError, #EB293A)"
+  dataCy="dangerText"
   size="m"
   tag="p"
   weight="normal"
@@ -268,6 +285,7 @@ exports[`Typography renders all default 4`] = `
 <Text
   align="left"
   color="var(--themeTextColorPrimary, #1B2029)"
+  dataCy="headingText1"
   size="xl"
   tag="p"
   weight="medium"
@@ -286,6 +304,7 @@ exports[`Typography renders all default 5`] = `
   align="left"
   className="emotion-0"
   color="var(--themeTextColorPrimary, #1B2029)"
+  dataCy="headingText2"
   size="l"
   tag="p"
   weight="medium"
@@ -299,6 +318,7 @@ exports[`Typography renders all default 6`] = `
 <Text
   align="left"
   color="var(--themeTextColorPrimary, #1B2029)"
+  dataCy="headingText3"
   size="m"
   tag="p"
   weight="medium"
@@ -317,6 +337,7 @@ exports[`Typography renders all default 7`] = `
   align="left"
   className="emotion-0"
   color="var(--themeTextColorInteractive, #7D58FF)"
+  dataCy="interactiveText"
   size="m"
   tag="p"
   weight="normal"
@@ -335,6 +356,7 @@ exports[`Typography renders all default 8`] = `
   align="left"
   className="emotion-0"
   color="var(--themeTextColorPrimary, #1B2029)"
+  dataCy="monospaceText"
   size="m"
   tag="p"
   weight="medium"
@@ -348,6 +370,7 @@ exports[`Typography renders all default 9`] = `
 <Text
   align="left"
   color="var(--themeTextColorPrimary, #1B2029)"
+  dataCy="smallText"
   size="s"
   tag="p"
   weight="normal"
@@ -361,6 +384,7 @@ exports[`Typography renders all default 10`] = `
 <Text
   align="left"
   color="var(--themeSuccess, #14C684)"
+  dataCy="successText"
   size="m"
   tag="p"
   weight="normal"
@@ -374,6 +398,7 @@ exports[`Typography renders all default 11`] = `
 <Text
   align="left"
   color="var(--themeWarning, #F9A328)"
+  dataCy="warningText"
   size="m"
   tag="p"
   weight="normal"
diff --git a/packages/table/components/CheckboxTable.tsx b/packages/table/components/CheckboxTable.tsx
index 993433a4b..b6fb44be6 100644
--- a/packages/table/components/CheckboxTable.tsx
+++ b/packages/table/components/CheckboxTable.tsx
@@ -116,7 +116,7 @@ class CheckboxTable extends React.PureComponent<
     }
 
     return (
-      <Cell>
+      <Cell data-cy={`table-checkboxCell table-checkboxCell.row${rowIndex}`}>
         <CheckboxInput
           id={rowIndex.toString()}
           inputLabel={`Toggle row ${rowIndex}`}
@@ -154,7 +154,11 @@ class CheckboxTable extends React.PureComponent<
     };
 
     return (
-      <div ref={this.checkboxRef} className={display("inline-block")}>
+      <div
+        ref={this.checkboxRef}
+        className={display("inline-block")}
+        data-cy="checkboxTable-headerCheckboxWrapper"
+      >
         <CheckboxInput
           id="headerCheckbox"
           inputLabel="Toggle all rows"
diff --git a/packages/table/components/Table.tsx b/packages/table/components/Table.tsx
index 028560f8a..379ff7519 100644
--- a/packages/table/components/Table.tsx
+++ b/packages/table/components/Table.tsx
@@ -406,7 +406,7 @@ export class Table<T> extends React.PureComponent<TableProps, TableState> {
       column: React.ReactElement<ColumnProps>;
     }
   ) {
-    const { key, style, column, columnIndex } = args;
+    const { key, style, column, columnIndex, rowIndex } = args;
     const header = column.props.header as React.ReactElement<
       CellProps | SortableHeaderCellProps
     >;
@@ -421,6 +421,11 @@ export class Table<T> extends React.PureComponent<TableProps, TableState> {
     const onStartCallback = () => {
       this.setState({ resizeIndex: columnIndex });
     };
+    const dataCy = [
+      "table-headerCell",
+      `table-headerCell.col${columnIndex}`,
+      `table-headerCell.row${rowIndex}`
+    ].join(" ");
 
     return (
       <div
@@ -432,6 +437,7 @@ export class Table<T> extends React.PureComponent<TableProps, TableState> {
         })}
         style={style}
         key={key}
+        data-cy={dataCy}
       >
         <div className={flex()}>
           <div
@@ -563,13 +569,21 @@ export class Table<T> extends React.PureComponent<TableProps, TableState> {
       data: any[];
     }
   ) {
-    const { style, key, column, data, rowIndex } = args;
+    const { style, key, column, data, rowIndex, columnIndex } = args;
     const updateHoveredRowIndex = () => {
       this.setState({ hoveredRowIndex: rowIndex });
     };
     const header = column.props.header as React.ReactElement<
       CellProps | SortableHeaderCellProps
     >;
+    const dataCy = [
+      "table-contentCell",
+      `table-contentCell.col${columnIndex}`,
+      `table-contentCell.row${rowIndex}`,
+      ...(rowIndex === this.state.hoveredRowIndex
+        ? ["table-contentCell.hoveredRow"]
+        : [])
+    ].join(" ");
 
     return (
       /* tslint:disable:react-a11y-event-has-role */
@@ -586,6 +600,7 @@ export class Table<T> extends React.PureComponent<TableProps, TableState> {
         key={key}
         onMouseOver={updateHoveredRowIndex}
         data-rowindex={rowIndex}
+        data-cy={dataCy}
       >
         {column.props.cellRenderer(data[rowIndex], style.width as number)}
       </ContentCell>
diff --git a/packages/table/tests/__snapshots__/CheckboxTable.test.tsx.snap b/packages/table/tests/__snapshots__/CheckboxTable.test.tsx.snap
index fd39e7712..0b56f26c3 100644
--- a/packages/table/tests/__snapshots__/CheckboxTable.test.tsx.snap
+++ b/packages/table/tests/__snapshots__/CheckboxTable.test.tsx.snap
@@ -268,6 +268,7 @@ Array [
           >
             <div
               class="emotion-10"
+              data-cy="table-headerCell table-headerCell.col0 table-headerCell.row0"
               style="height:35px;left:0;position:absolute;top:0;width:24px"
             >
               <div
@@ -281,8 +282,11 @@ Array [
                   >
                     <div
                       class="emotion-5"
+                      data-cy="checkboxTable-headerCheckboxWrapper"
                     >
-                      <div>
+                      <div
+                        data-cy="checkboxInput"
+                      >
                         <label
                           class="emotion-4"
                           for="headerCheckbox"
@@ -296,6 +300,7 @@ Array [
                               <input
                                 aria-checked="0"
                                 class="emotion-0"
+                                data-cy="checkboxInput-input"
                                 id="headerCheckbox"
                                 type="checkbox"
                               />
@@ -318,6 +323,7 @@ Array [
             </div>
             <div
               class="emotion-10"
+              data-cy="table-headerCell table-headerCell.col1 table-headerCell.row0"
               style="height:35px;left:24px;position:absolute;top:0;width:170.66666666666666px"
             >
               <div
@@ -353,6 +359,7 @@ Array [
             >
               <div
                 class="emotion-10"
+                data-cy="table-headerCell table-headerCell.col2 table-headerCell.row0"
                 style="height:35px;left:0;position:absolute;top:0;width:170.66666666666666px"
               >
                 <div
@@ -370,6 +377,7 @@ Array [
               </div>
               <div
                 class="emotion-10"
+                data-cy="table-headerCell table-headerCell.col3 table-headerCell.row0"
                 style="height:35px;left:170.66666666666666px;position:absolute;top:0;width:170.66666666666666px"
               >
                 <div
@@ -387,6 +395,7 @@ Array [
               </div>
               <div
                 class="emotion-10"
+                data-cy="table-headerCell table-headerCell.col4 table-headerCell.row0"
                 style="height:35px;left:341.3333333333333px;position:absolute;top:0;width:170.66666666666666px"
               >
                 <div
@@ -404,6 +413,7 @@ Array [
               </div>
               <div
                 class="emotion-10"
+                data-cy="table-headerCell table-headerCell.col5 table-headerCell.row0"
                 style="height:35px;left:512px;position:absolute;top:0;width:170.66666666666666px"
               >
                 <div
@@ -444,13 +454,17 @@ Array [
             >
               <div
                 class="emotion-39"
+                data-cy="table-contentCell table-contentCell.col0 table-contentCell.row1"
                 data-rowindex="1"
                 style="height:35px;left:0;position:absolute;top:0;width:24px"
               >
                 <div
                   class="emotion-38"
+                  data-cy="table-checkboxCell table-checkboxCell.row0"
                 >
-                  <div>
+                  <div
+                    data-cy="checkboxInput"
+                  >
                     <label
                       class="emotion-4"
                       for="0"
@@ -464,6 +478,7 @@ Array [
                           <input
                             aria-checked="false"
                             class="emotion-0"
+                            data-cy="checkboxInput-input"
                             id="0"
                             type="checkbox"
                           />
@@ -480,6 +495,7 @@ Array [
               </div>
               <div
                 class="emotion-39"
+                data-cy="table-contentCell table-contentCell.col1 table-contentCell.row1"
                 data-rowindex="1"
                 style="height:35px;left:24px;position:absolute;top:0;width:170.66666666666666px"
               >
@@ -489,13 +505,17 @@ Array [
               </div>
               <div
                 class="emotion-39"
+                data-cy="table-contentCell table-contentCell.col0 table-contentCell.row2"
                 data-rowindex="2"
                 style="height:35px;left:0;position:absolute;top:35px;width:24px"
               >
                 <div
                   class="emotion-38"
+                  data-cy="table-checkboxCell table-checkboxCell.row1"
                 >
-                  <div>
+                  <div
+                    data-cy="checkboxInput"
+                  >
                     <label
                       class="emotion-4"
                       for="1"
@@ -509,6 +529,7 @@ Array [
                           <input
                             aria-checked="false"
                             class="emotion-0"
+                            data-cy="checkboxInput-input"
                             id="1"
                             type="checkbox"
                           />
@@ -525,6 +546,7 @@ Array [
               </div>
               <div
                 class="emotion-39"
+                data-cy="table-contentCell table-contentCell.col1 table-contentCell.row2"
                 data-rowindex="2"
                 style="height:35px;left:24px;position:absolute;top:35px;width:170.66666666666666px"
               >
@@ -550,6 +572,7 @@ Array [
           >
             <div
               class="emotion-39"
+              data-cy="table-contentCell table-contentCell.col2 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:0;position:absolute;top:0;width:170.66666666666666px"
             >
@@ -559,6 +582,7 @@ Array [
             </div>
             <div
               class="emotion-39"
+              data-cy="table-contentCell table-contentCell.col3 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:170.66666666666666px;position:absolute;top:0;width:170.66666666666666px"
             >
@@ -568,6 +592,7 @@ Array [
             </div>
             <div
               class="emotion-39"
+              data-cy="table-contentCell table-contentCell.col4 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:341.3333333333333px;position:absolute;top:0;width:170.66666666666666px"
             >
@@ -577,6 +602,7 @@ Array [
             </div>
             <div
               class="emotion-39"
+              data-cy="table-contentCell table-contentCell.col5 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:512px;position:absolute;top:0;width:170.66666666666666px"
             >
@@ -586,6 +612,7 @@ Array [
             </div>
             <div
               class="emotion-39"
+              data-cy="table-contentCell table-contentCell.col2 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:0;position:absolute;top:35px;width:170.66666666666666px"
             >
@@ -595,6 +622,7 @@ Array [
             </div>
             <div
               class="emotion-39"
+              data-cy="table-contentCell table-contentCell.col3 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:170.66666666666666px;position:absolute;top:35px;width:170.66666666666666px"
             >
@@ -604,6 +632,7 @@ Array [
             </div>
             <div
               class="emotion-39"
+              data-cy="table-contentCell table-contentCell.col4 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:341.3333333333333px;position:absolute;top:35px;width:170.66666666666666px"
             >
@@ -613,6 +642,7 @@ Array [
             </div>
             <div
               class="emotion-39"
+              data-cy="table-contentCell table-contentCell.col5 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:512px;position:absolute;top:35px;width:170.66666666666666px"
             >
@@ -969,6 +999,7 @@ Array [
           >
             <div
               class="emotion-12"
+              data-cy="table-headerCell table-headerCell.col0 table-headerCell.row0"
               style="height:35px;left:0;position:absolute;top:0;width:24px"
             >
               <div
@@ -982,8 +1013,11 @@ Array [
                   >
                     <div
                       class="emotion-7"
+                      data-cy="checkboxTable-headerCheckboxWrapper"
                     >
-                      <div>
+                      <div
+                        data-cy="checkboxInput checkboxInput.indeterminate"
+                      >
                         <label
                           class="emotion-6"
                           for="headerCheckbox"
@@ -997,6 +1031,7 @@ Array [
                               <input
                                 aria-checked="mixed"
                                 class="emotion-0"
+                                data-cy="checkboxInput-input checkboxInput-input.indeterminate"
                                 id="headerCheckbox"
                                 type="checkbox"
                               />
@@ -1006,6 +1041,7 @@ Array [
                                 <svg
                                   aria-label="system-minus icon"
                                   class="emotion-1"
+                                  data-cy="icon"
                                   height="16"
                                   preserveAspectRatio="xMinYMin meet"
                                   role="img"
@@ -1036,6 +1072,7 @@ Array [
             </div>
             <div
               class="emotion-12"
+              data-cy="table-headerCell table-headerCell.col1 table-headerCell.row0"
               style="height:35px;left:24px;position:absolute;top:0;width:170.66666666666666px"
             >
               <div
@@ -1071,6 +1108,7 @@ Array [
             >
               <div
                 class="emotion-12"
+                data-cy="table-headerCell table-headerCell.col2 table-headerCell.row0"
                 style="height:35px;left:0;position:absolute;top:0;width:170.66666666666666px"
               >
                 <div
@@ -1088,6 +1126,7 @@ Array [
               </div>
               <div
                 class="emotion-12"
+                data-cy="table-headerCell table-headerCell.col3 table-headerCell.row0"
                 style="height:35px;left:170.66666666666666px;position:absolute;top:0;width:170.66666666666666px"
               >
                 <div
@@ -1105,6 +1144,7 @@ Array [
               </div>
               <div
                 class="emotion-12"
+                data-cy="table-headerCell table-headerCell.col4 table-headerCell.row0"
                 style="height:35px;left:341.3333333333333px;position:absolute;top:0;width:170.66666666666666px"
               >
                 <div
@@ -1122,6 +1162,7 @@ Array [
               </div>
               <div
                 class="emotion-12"
+                data-cy="table-headerCell table-headerCell.col5 table-headerCell.row0"
                 style="height:35px;left:512px;position:absolute;top:0;width:170.66666666666666px"
               >
                 <div
@@ -1162,13 +1203,17 @@ Array [
             >
               <div
                 class="emotion-43"
+                data-cy="table-contentCell table-contentCell.col0 table-contentCell.row1"
                 data-rowindex="1"
                 style="height:35px;left:0;position:absolute;top:0;width:24px"
               >
                 <div
                   class="emotion-42"
+                  data-cy="table-checkboxCell table-checkboxCell.row0"
                 >
-                  <div>
+                  <div
+                    data-cy="checkboxInput checkboxInput.checked"
+                  >
                     <label
                       class="emotion-6"
                       for="0"
@@ -1183,6 +1228,7 @@ Array [
                             aria-checked="true"
                             checked=""
                             class="emotion-0"
+                            data-cy="checkboxInput-input checkboxInput-input.checked"
                             id="0"
                             type="checkbox"
                           />
@@ -1192,6 +1238,7 @@ Array [
                             <svg
                               aria-label="system-check icon"
                               class="emotion-1"
+                              data-cy="icon"
                               height="16"
                               preserveAspectRatio="xMinYMin meet"
                               role="img"
@@ -1216,6 +1263,7 @@ Array [
               </div>
               <div
                 class="emotion-43"
+                data-cy="table-contentCell table-contentCell.col1 table-contentCell.row1"
                 data-rowindex="1"
                 style="height:35px;left:24px;position:absolute;top:0;width:170.66666666666666px"
               >
@@ -1225,13 +1273,17 @@ Array [
               </div>
               <div
                 class="emotion-51"
+                data-cy="table-contentCell table-contentCell.col0 table-contentCell.row2"
                 data-rowindex="2"
                 style="height:35px;left:0;position:absolute;top:35px;width:24px"
               >
                 <div
                   class="emotion-42"
+                  data-cy="table-checkboxCell table-checkboxCell.row1"
                 >
-                  <div>
+                  <div
+                    data-cy="checkboxInput"
+                  >
                     <label
                       class="emotion-6"
                       for="1"
@@ -1245,6 +1297,7 @@ Array [
                           <input
                             aria-checked="false"
                             class="emotion-0"
+                            data-cy="checkboxInput-input"
                             id="1"
                             type="checkbox"
                           />
@@ -1261,6 +1314,7 @@ Array [
               </div>
               <div
                 class="emotion-51"
+                data-cy="table-contentCell table-contentCell.col1 table-contentCell.row2"
                 data-rowindex="2"
                 style="height:35px;left:24px;position:absolute;top:35px;width:170.66666666666666px"
               >
@@ -1286,6 +1340,7 @@ Array [
           >
             <div
               class="emotion-43"
+              data-cy="table-contentCell table-contentCell.col2 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:0;position:absolute;top:0;width:170.66666666666666px"
             >
@@ -1295,6 +1350,7 @@ Array [
             </div>
             <div
               class="emotion-43"
+              data-cy="table-contentCell table-contentCell.col3 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:170.66666666666666px;position:absolute;top:0;width:170.66666666666666px"
             >
@@ -1304,6 +1360,7 @@ Array [
             </div>
             <div
               class="emotion-43"
+              data-cy="table-contentCell table-contentCell.col4 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:341.3333333333333px;position:absolute;top:0;width:170.66666666666666px"
             >
@@ -1313,6 +1370,7 @@ Array [
             </div>
             <div
               class="emotion-43"
+              data-cy="table-contentCell table-contentCell.col5 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:512px;position:absolute;top:0;width:170.66666666666666px"
             >
@@ -1322,6 +1380,7 @@ Array [
             </div>
             <div
               class="emotion-51"
+              data-cy="table-contentCell table-contentCell.col2 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:0;position:absolute;top:35px;width:170.66666666666666px"
             >
@@ -1331,6 +1390,7 @@ Array [
             </div>
             <div
               class="emotion-51"
+              data-cy="table-contentCell table-contentCell.col3 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:170.66666666666666px;position:absolute;top:35px;width:170.66666666666666px"
             >
@@ -1340,6 +1400,7 @@ Array [
             </div>
             <div
               class="emotion-51"
+              data-cy="table-contentCell table-contentCell.col4 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:341.3333333333333px;position:absolute;top:35px;width:170.66666666666666px"
             >
@@ -1349,6 +1410,7 @@ Array [
             </div>
             <div
               class="emotion-51"
+              data-cy="table-contentCell table-contentCell.col5 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:512px;position:absolute;top:35px;width:170.66666666666666px"
             >
@@ -1664,6 +1726,7 @@ Array [
           >
             <div
               class="emotion-10"
+              data-cy="table-headerCell table-headerCell.col0 table-headerCell.row0"
               style="height:35px;left:0;position:absolute;top:0;width:24px"
             >
               <div
@@ -1677,8 +1740,11 @@ Array [
                   >
                     <div
                       class="emotion-5"
+                      data-cy="checkboxTable-headerCheckboxWrapper"
                     >
-                      <div>
+                      <div
+                        data-cy="checkboxInput"
+                      >
                         <label
                           class="emotion-4"
                           for="headerCheckbox"
@@ -1692,6 +1758,7 @@ Array [
                               <input
                                 aria-checked="0"
                                 class="emotion-0"
+                                data-cy="checkboxInput-input"
                                 id="headerCheckbox"
                                 type="checkbox"
                               />
@@ -1714,6 +1781,7 @@ Array [
             </div>
             <div
               class="emotion-10"
+              data-cy="table-headerCell table-headerCell.col1 table-headerCell.row0"
               style="height:35px;left:24px;position:absolute;top:0;width:170.66666666666666px"
             >
               <div
@@ -1749,6 +1817,7 @@ Array [
             >
               <div
                 class="emotion-10"
+                data-cy="table-headerCell table-headerCell.col2 table-headerCell.row0"
                 style="height:35px;left:0;position:absolute;top:0;width:170.66666666666666px"
               >
                 <div
@@ -1766,6 +1835,7 @@ Array [
               </div>
               <div
                 class="emotion-10"
+                data-cy="table-headerCell table-headerCell.col3 table-headerCell.row0"
                 style="height:35px;left:170.66666666666666px;position:absolute;top:0;width:170.66666666666666px"
               >
                 <div
@@ -1783,6 +1853,7 @@ Array [
               </div>
               <div
                 class="emotion-10"
+                data-cy="table-headerCell table-headerCell.col4 table-headerCell.row0"
                 style="height:35px;left:341.3333333333333px;position:absolute;top:0;width:170.66666666666666px"
               >
                 <div
@@ -1800,6 +1871,7 @@ Array [
               </div>
               <div
                 class="emotion-10"
+                data-cy="table-headerCell table-headerCell.col5 table-headerCell.row0"
                 style="height:35px;left:512px;position:absolute;top:0;width:170.66666666666666px"
               >
                 <div
@@ -1840,11 +1912,13 @@ Array [
             >
               <div
                 class="emotion-33"
+                data-cy="table-contentCell table-contentCell.col0 table-contentCell.row1"
                 data-rowindex="1"
                 style="height:35px;left:0;position:absolute;top:0;width:24px"
               />
               <div
                 class="emotion-33"
+                data-cy="table-contentCell table-contentCell.col1 table-contentCell.row1"
                 data-rowindex="1"
                 style="height:35px;left:24px;position:absolute;top:0;width:170.66666666666666px"
               >
@@ -1854,13 +1928,17 @@ Array [
               </div>
               <div
                 class="emotion-41"
+                data-cy="table-contentCell table-contentCell.col0 table-contentCell.row2"
                 data-rowindex="2"
                 style="height:35px;left:0;position:absolute;top:35px;width:24px"
               >
                 <div
                   class="emotion-40"
+                  data-cy="table-checkboxCell table-checkboxCell.row1"
                 >
-                  <div>
+                  <div
+                    data-cy="checkboxInput"
+                  >
                     <label
                       class="emotion-4"
                       for="1"
@@ -1874,6 +1952,7 @@ Array [
                           <input
                             aria-checked="false"
                             class="emotion-0"
+                            data-cy="checkboxInput-input"
                             id="1"
                             type="checkbox"
                           />
@@ -1890,6 +1969,7 @@ Array [
               </div>
               <div
                 class="emotion-41"
+                data-cy="table-contentCell table-contentCell.col1 table-contentCell.row2"
                 data-rowindex="2"
                 style="height:35px;left:24px;position:absolute;top:35px;width:170.66666666666666px"
               >
@@ -1915,6 +1995,7 @@ Array [
           >
             <div
               class="emotion-33"
+              data-cy="table-contentCell table-contentCell.col2 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:0;position:absolute;top:0;width:170.66666666666666px"
             >
@@ -1924,6 +2005,7 @@ Array [
             </div>
             <div
               class="emotion-33"
+              data-cy="table-contentCell table-contentCell.col3 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:170.66666666666666px;position:absolute;top:0;width:170.66666666666666px"
             >
@@ -1933,6 +2015,7 @@ Array [
             </div>
             <div
               class="emotion-33"
+              data-cy="table-contentCell table-contentCell.col4 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:341.3333333333333px;position:absolute;top:0;width:170.66666666666666px"
             >
@@ -1942,6 +2025,7 @@ Array [
             </div>
             <div
               class="emotion-33"
+              data-cy="table-contentCell table-contentCell.col5 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:512px;position:absolute;top:0;width:170.66666666666666px"
             >
@@ -1951,6 +2035,7 @@ Array [
             </div>
             <div
               class="emotion-41"
+              data-cy="table-contentCell table-contentCell.col2 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:0;position:absolute;top:35px;width:170.66666666666666px"
             >
@@ -1960,6 +2045,7 @@ Array [
             </div>
             <div
               class="emotion-41"
+              data-cy="table-contentCell table-contentCell.col3 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:170.66666666666666px;position:absolute;top:35px;width:170.66666666666666px"
             >
@@ -1969,6 +2055,7 @@ Array [
             </div>
             <div
               class="emotion-41"
+              data-cy="table-contentCell table-contentCell.col4 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:341.3333333333333px;position:absolute;top:35px;width:170.66666666666666px"
             >
@@ -1978,6 +2065,7 @@ Array [
             </div>
             <div
               class="emotion-41"
+              data-cy="table-contentCell table-contentCell.col5 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:512px;position:absolute;top:35px;width:170.66666666666666px"
             >
diff --git a/packages/table/tests/__snapshots__/Table.test.tsx.snap b/packages/table/tests/__snapshots__/Table.test.tsx.snap
index aa5c95622..0d4d61540 100644
--- a/packages/table/tests/__snapshots__/Table.test.tsx.snap
+++ b/packages/table/tests/__snapshots__/Table.test.tsx.snap
@@ -203,6 +203,7 @@ Array [
           >
             <div
               class="emotion-6"
+              data-cy="table-headerCell table-headerCell.col0 table-headerCell.row0"
               style="height:35px;left:0;position:absolute;top:0;width:307.2px"
             >
               <div
@@ -226,6 +227,7 @@ Array [
                       <svg
                         aria-label="system-resize-horizontal icon"
                         class="emotion-1"
+                        data-cy="icon"
                         height="12"
                         preserveAspectRatio="xMinYMin meet"
                         role="img"
@@ -261,6 +263,7 @@ Array [
             >
               <div
                 class="emotion-6"
+                data-cy="table-headerCell table-headerCell.col1 table-headerCell.row0"
                 style="height:35px;left:0;position:absolute;top:0;width:307.2px"
               >
                 <div
@@ -284,6 +287,7 @@ Array [
                         <svg
                           aria-label="system-resize-horizontal icon"
                           class="emotion-1"
+                          data-cy="icon"
                           height="12"
                           preserveAspectRatio="xMinYMin meet"
                           role="img"
@@ -301,6 +305,7 @@ Array [
               </div>
               <div
                 class="emotion-6"
+                data-cy="table-headerCell table-headerCell.col2 table-headerCell.row0"
                 style="height:35px;left:307.2px;position:absolute;top:0;width:307.2px"
               >
                 <div
@@ -324,6 +329,7 @@ Array [
                         <svg
                           aria-label="system-resize-horizontal icon"
                           class="emotion-1"
+                          data-cy="icon"
                           height="12"
                           preserveAspectRatio="xMinYMin meet"
                           role="img"
@@ -341,6 +347,7 @@ Array [
               </div>
               <div
                 class="emotion-6"
+                data-cy="table-headerCell table-headerCell.col3 table-headerCell.row0"
                 style="height:35px;left:614.4px;position:absolute;top:0;width:307.2px"
               >
                 <div
@@ -364,6 +371,7 @@ Array [
                         <svg
                           aria-label="system-resize-horizontal icon"
                           class="emotion-1"
+                          data-cy="icon"
                           height="12"
                           preserveAspectRatio="xMinYMin meet"
                           role="img"
@@ -404,6 +412,7 @@ Array [
             >
               <div
                 class="emotion-30"
+                data-cy="table-contentCell table-contentCell.col0 table-contentCell.row1"
                 data-rowindex="1"
                 style="height:35px;left:0;position:absolute;top:0;width:307.2px"
               >
@@ -413,6 +422,7 @@ Array [
               </div>
               <div
                 class="emotion-30"
+                data-cy="table-contentCell table-contentCell.col0 table-contentCell.row2"
                 data-rowindex="2"
                 style="height:35px;left:0;position:absolute;top:35px;width:307.2px"
               >
@@ -438,6 +448,7 @@ Array [
           >
             <div
               class="emotion-30"
+              data-cy="table-contentCell table-contentCell.col1 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:0;position:absolute;top:0;width:307.2px"
             >
@@ -447,6 +458,7 @@ Array [
             </div>
             <div
               class="emotion-30"
+              data-cy="table-contentCell table-contentCell.col2 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:307.2px;position:absolute;top:0;width:307.2px"
             >
@@ -456,6 +468,7 @@ Array [
             </div>
             <div
               class="emotion-30"
+              data-cy="table-contentCell table-contentCell.col3 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:614.4px;position:absolute;top:0;width:307.2px"
             >
@@ -465,6 +478,7 @@ Array [
             </div>
             <div
               class="emotion-30"
+              data-cy="table-contentCell table-contentCell.col1 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:0;position:absolute;top:35px;width:307.2px"
             >
@@ -474,6 +488,7 @@ Array [
             </div>
             <div
               class="emotion-30"
+              data-cy="table-contentCell table-contentCell.col2 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:307.2px;position:absolute;top:35px;width:307.2px"
             >
@@ -483,6 +498,7 @@ Array [
             </div>
             <div
               class="emotion-30"
+              data-cy="table-contentCell table-contentCell.col3 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:614.4px;position:absolute;top:35px;width:307.2px"
             >
@@ -870,6 +886,7 @@ Array [
           >
             <div
               class="emotion-3"
+              data-cy="table-headerCell table-headerCell.col0 table-headerCell.row0"
               style="height:35px;left:0;position:absolute;top:0;width:307.2px"
             >
               <div
@@ -905,6 +922,7 @@ Array [
             >
               <div
                 class="emotion-3"
+                data-cy="table-headerCell table-headerCell.col1 table-headerCell.row0"
                 style="height:35px;left:0;position:absolute;top:0;width:307.2px"
               >
                 <div
@@ -922,6 +940,7 @@ Array [
               </div>
               <div
                 class="emotion-3"
+                data-cy="table-headerCell table-headerCell.col2 table-headerCell.row0"
                 style="height:35px;left:307.2px;position:absolute;top:0;width:307.2px"
               >
                 <div
@@ -939,6 +958,7 @@ Array [
               </div>
               <div
                 class="emotion-3"
+                data-cy="table-headerCell table-headerCell.col3 table-headerCell.row0"
                 style="height:35px;left:614.4px;position:absolute;top:0;width:307.2px"
               >
                 <div
@@ -979,6 +999,7 @@ Array [
             >
               <div
                 class="emotion-18"
+                data-cy="table-contentCell table-contentCell.col0 table-contentCell.row1"
                 data-rowindex="1"
                 style="height:35px;left:0;position:absolute;top:0;width:307.2px"
               >
@@ -988,6 +1009,7 @@ Array [
               </div>
               <div
                 class="emotion-18"
+                data-cy="table-contentCell table-contentCell.col0 table-contentCell.row2"
                 data-rowindex="2"
                 style="height:35px;left:0;position:absolute;top:35px;width:307.2px"
               >
@@ -1013,6 +1035,7 @@ Array [
           >
             <div
               class="emotion-18"
+              data-cy="table-contentCell table-contentCell.col1 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:0;position:absolute;top:0;width:307.2px"
             >
@@ -1022,6 +1045,7 @@ Array [
             </div>
             <div
               class="emotion-18"
+              data-cy="table-contentCell table-contentCell.col2 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:307.2px;position:absolute;top:0;width:307.2px"
             >
@@ -1031,6 +1055,7 @@ Array [
             </div>
             <div
               class="emotion-18"
+              data-cy="table-contentCell table-contentCell.col3 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:614.4px;position:absolute;top:0;width:307.2px"
             >
@@ -1040,6 +1065,7 @@ Array [
             </div>
             <div
               class="emotion-18"
+              data-cy="table-contentCell table-contentCell.col1 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:0;position:absolute;top:35px;width:307.2px"
             >
@@ -1049,6 +1075,7 @@ Array [
             </div>
             <div
               class="emotion-18"
+              data-cy="table-contentCell table-contentCell.col2 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:307.2px;position:absolute;top:35px;width:307.2px"
             >
@@ -1058,6 +1085,7 @@ Array [
             </div>
             <div
               class="emotion-18"
+              data-cy="table-contentCell table-contentCell.col3 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:614.4px;position:absolute;top:35px;width:307.2px"
             >
@@ -1251,6 +1279,7 @@ Array [
           >
             <div
               class="emotion-3"
+              data-cy="table-headerCell table-headerCell.col0 table-headerCell.row0"
               style="height:35px;left:0;position:absolute;top:0;width:204.8px"
             >
               <div
@@ -1286,6 +1315,7 @@ Array [
             >
               <div
                 class="emotion-3"
+                data-cy="table-headerCell table-headerCell.col1 table-headerCell.row0"
                 style="height:35px;left:0;position:absolute;top:0;width:204.8px"
               >
                 <div
@@ -1303,6 +1333,7 @@ Array [
               </div>
               <div
                 class="emotion-3"
+                data-cy="table-headerCell table-headerCell.col2 table-headerCell.row0"
                 style="height:35px;left:204.8px;position:absolute;top:0;width:204.8px"
               >
                 <div
@@ -1320,6 +1351,7 @@ Array [
               </div>
               <div
                 class="emotion-3"
+                data-cy="table-headerCell table-headerCell.col3 table-headerCell.row0"
                 style="height:35px;left:409.6px;position:absolute;top:0;width:307.2px"
               >
                 <div
@@ -1337,6 +1369,7 @@ Array [
               </div>
               <div
                 class="emotion-3"
+                data-cy="table-headerCell table-headerCell.col4 table-headerCell.row0"
                 style="height:35px;left:716.8px;position:absolute;top:0;width:307.2px"
               >
                 <div
@@ -1377,6 +1410,7 @@ Array [
             >
               <div
                 class="emotion-22"
+                data-cy="table-contentCell table-contentCell.col0 table-contentCell.row1"
                 data-rowindex="1"
                 style="height:35px;left:0;position:absolute;top:0;width:204.8px"
               >
@@ -1386,6 +1420,7 @@ Array [
               </div>
               <div
                 class="emotion-22"
+                data-cy="table-contentCell table-contentCell.col0 table-contentCell.row2"
                 data-rowindex="2"
                 style="height:35px;left:0;position:absolute;top:35px;width:204.8px"
               >
@@ -1411,6 +1446,7 @@ Array [
           >
             <div
               class="emotion-22"
+              data-cy="table-contentCell table-contentCell.col1 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:0;position:absolute;top:0;width:204.8px"
             >
@@ -1420,6 +1456,7 @@ Array [
             </div>
             <div
               class="emotion-22"
+              data-cy="table-contentCell table-contentCell.col2 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:204.8px;position:absolute;top:0;width:204.8px"
             >
@@ -1429,6 +1466,7 @@ Array [
             </div>
             <div
               class="emotion-22"
+              data-cy="table-contentCell table-contentCell.col3 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:409.6px;position:absolute;top:0;width:307.2px"
             >
@@ -1438,6 +1476,7 @@ Array [
             </div>
             <div
               class="emotion-22"
+              data-cy="table-contentCell table-contentCell.col4 table-contentCell.row1"
               data-rowindex="1"
               style="height:35px;left:716.8px;position:absolute;top:0;width:307.2px"
             >
@@ -1447,6 +1486,7 @@ Array [
             </div>
             <div
               class="emotion-22"
+              data-cy="table-contentCell table-contentCell.col1 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:0;position:absolute;top:35px;width:204.8px"
             >
@@ -1456,6 +1496,7 @@ Array [
             </div>
             <div
               class="emotion-22"
+              data-cy="table-contentCell table-contentCell.col2 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:204.8px;position:absolute;top:35px;width:204.8px"
             >
@@ -1465,6 +1506,7 @@ Array [
             </div>
             <div
               class="emotion-22"
+              data-cy="table-contentCell table-contentCell.col3 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:409.6px;position:absolute;top:35px;width:307.2px"
             >
@@ -1474,6 +1516,7 @@ Array [
             </div>
             <div
               class="emotion-22"
+              data-cy="table-contentCell table-contentCell.col4 table-contentCell.row2"
               data-rowindex="2"
               style="height:35px;left:716.8px;position:absolute;top:35px;width:307.2px"
             >
diff --git a/packages/tabs/components/Tabs.tsx b/packages/tabs/components/Tabs.tsx
index 575514f39..c8d3e27d3 100644
--- a/packages/tabs/components/Tabs.tsx
+++ b/packages/tabs/components/Tabs.tsx
@@ -128,7 +128,11 @@ class Tabs extends React.PureComponent<TabsProps, {}> {
       );
 
     return (
-      <ReactTabs selectedIndex={selectedIndex} onSelect={onSelect}>
+      <ReactTabs
+        selectedIndex={selectedIndex}
+        onSelect={onSelect}
+        data-cy="tabs"
+      >
         <TabList>{tabs}</TabList>
         {tabsContent}
       </ReactTabs>
diff --git a/packages/tabs/tests/__snapshots__/Tabs.test.tsx.snap b/packages/tabs/tests/__snapshots__/Tabs.test.tsx.snap
index fc6c5b468..78e8cf185 100644
--- a/packages/tabs/tests/__snapshots__/Tabs.test.tsx.snap
+++ b/packages/tabs/tests/__snapshots__/Tabs.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Tabs default 1`] = `
 <div
   class="react-tabs"
+  data-cy="tabs"
   data-tabs="true"
 >
   <ul
diff --git a/packages/textInput/components/TextInput.tsx b/packages/textInput/components/TextInput.tsx
index e786f808f..d14e8f532 100644
--- a/packages/textInput/components/TextInput.tsx
+++ b/packages/textInput/components/TextInput.tsx
@@ -75,12 +75,20 @@ export class TextInput<
     const labelContent = this.getLabelContent();
     const tooltipContent = this.getTooltipContent();
     const containerProps: { className?: string } = {};
+    const appearance = this.getInputAppearance();
+    const dataCy = [
+      "textInput",
+      ...(appearance && appearance !== InputAppearance.Standard
+        ? [`textInput.${appearance}`]
+        : [])
+    ].join(" ");
+
     if (this.props.className) {
       containerProps.className = this.props.className;
     }
     return (
-      <div {...containerProps}>
-        <div className={flex({ align: "center" })}>
+      <div {...containerProps} data-cy={dataCy}>
+        <div className={flex({ align: "center" })} data-cy="textInput-label">
           {labelContent}
           {tooltipContent}
         </div>
@@ -132,7 +140,7 @@ export class TextInput<
                 describedByIds
               )}
             </div>
-            <div>
+            <div data-cy="textInput-hintContent">
               {getHintContent}
               {appearance === InputAppearance.Error && getValidationErrors}
             </div>
@@ -164,6 +172,13 @@ export class TextInput<
     describedBy
   ) {
     const { value, ...inputElementProps } = this.getInputElementProps();
+    const appearance = this.getInputAppearance();
+    const dataCy = [
+      "textInput-input",
+      ...(appearance && appearance !== InputAppearance.Standard
+        ? [`textInput-input.${appearance}`]
+        : [])
+    ].join(" ");
     let { onChange } = inputElementProps;
     if (onChange == null && value != null) {
       onChange = Function.prototype as (
@@ -177,6 +192,7 @@ export class TextInput<
         type={this.props.type}
         aria-invalid={!isValid}
         aria-describedby={describedBy}
+        data-cy={dataCy}
         {...{ ...inputElementProps, onChange, value }}
       />
     );
diff --git a/packages/textInput/tests/__snapshots__/TextInput.test.tsx.snap b/packages/textInput/tests/__snapshots__/TextInput.test.tsx.snap
index d1ed5bf43..98157ea5b 100644
--- a/packages/textInput/tests/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/textInput/tests/__snapshots__/TextInput.test.tsx.snap
@@ -26,9 +26,12 @@ exports[`TextInput should display icon with tooltip if tooltipText is set 1`] =
   margin-bottom: 4px;
 }
 
-<div>
+<div
+  data-cy="textInput"
+>
   <div
     className="emotion-2"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
@@ -85,9 +88,12 @@ exports[`TextInput should display validation message if set & appearance == Erro
   fill: var(--themeError,#EB293A);
 }
 
-<div>
+<div
+  data-cy="textInput textInput.error"
+>
   <div
     className="emotion-1"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
@@ -135,9 +141,12 @@ exports[`TextInput should hide label if \`showInputLabel\` set to false 1`] = `
   display: flex;
 }
 
-<div>
+<div
+  data-cy="textInput"
+>
   <div
     className="emotion-1"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
@@ -172,9 +181,12 @@ exports[`TextInput should not display validation message if set & appearance ==
   display: flex;
 }
 
-<div>
+<div
+  data-cy="textInput textInput.success"
+>
   <div
     className="emotion-1"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
@@ -335,9 +347,12 @@ exports[`TextInput should render all appearances focus 1`] = `
   showInputLabel={true}
   type="text"
 >
-  <div>
+  <div
+    data-cy="textInput"
+  >
     <div
       className="emotion-1"
+      data-cy="textInput-label"
     >
       <label
         className="emotion-0"
@@ -355,11 +370,14 @@ exports[`TextInput should render all appearances focus 1`] = `
             aria-describedby=""
             aria-invalid={false}
             className="emotion-2"
+            data-cy="textInput-input"
             id="test.input"
             type="text"
           />
         </div>
-        <div />
+        <div
+          data-cy="textInput-hintContent"
+        />
       </div>
     </FormFieldWrapper>
   </div>
@@ -502,9 +520,12 @@ exports[`TextInput should render all appearances focus 2`] = `
   showInputLabel={true}
   type="text"
 >
-  <div>
+  <div
+    data-cy="textInput textInput.error"
+  >
     <div
       className="emotion-1"
+      data-cy="textInput-label"
     >
       <label
         className="emotion-0"
@@ -522,11 +543,14 @@ exports[`TextInput should render all appearances focus 2`] = `
             aria-describedby=""
             aria-invalid={false}
             className="emotion-2"
+            data-cy="textInput-input textInput-input.error"
             id="test.input"
             type="text"
           />
         </div>
-        <div />
+        <div
+          data-cy="textInput-hintContent"
+        />
       </div>
     </FormFieldWrapper>
   </div>
@@ -667,9 +691,12 @@ exports[`TextInput should render all appearances focus 3`] = `
   showInputLabel={true}
   type="text"
 >
-  <div>
+  <div
+    data-cy="textInput textInput.success"
+  >
     <div
       className="emotion-1"
+      data-cy="textInput-label"
     >
       <label
         className="emotion-0"
@@ -687,11 +714,14 @@ exports[`TextInput should render all appearances focus 3`] = `
             aria-describedby=""
             aria-invalid={false}
             className="emotion-2"
+            data-cy="textInput-input textInput-input.success"
             id="test.input"
             type="text"
           />
         </div>
-        <div />
+        <div
+          data-cy="textInput-hintContent"
+        />
       </div>
     </FormFieldWrapper>
   </div>
@@ -719,9 +749,12 @@ exports[`TextInput should render all appearances with props 1`] = `
   display: flex;
 }
 
-<div>
+<div
+  data-cy="textInput"
+>
   <div
     className="emotion-1"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
@@ -761,9 +794,12 @@ exports[`TextInput should render all appearances with props 2`] = `
   fill: var(--themeError,#EB293A);
 }
 
-<div>
+<div
+  data-cy="textInput textInput.error"
+>
   <div
     className="emotion-1"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
@@ -801,9 +837,12 @@ exports[`TextInput should render all appearances with props 3`] = `
   display: flex;
 }
 
-<div>
+<div
+  data-cy="textInput textInput.success"
+>
   <div
     className="emotion-1"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
@@ -841,9 +880,12 @@ exports[`TextInput should render node as inputLabel 1`] = `
   display: flex;
 }
 
-<div>
+<div
+  data-cy="textInput"
+>
   <div
     className="emotion-1"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
@@ -883,9 +925,12 @@ exports[`TextInput should render string inputLabel 1`] = `
   display: flex;
 }
 
-<div>
+<div
+  data-cy="textInput"
+>
   <div
     className="emotion-1"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
diff --git a/packages/textInput/tests/__snapshots__/TextInputWithIcon.test.tsx.snap b/packages/textInput/tests/__snapshots__/TextInputWithIcon.test.tsx.snap
index 88d021933..fdeb23117 100644
--- a/packages/textInput/tests/__snapshots__/TextInputWithIcon.test.tsx.snap
+++ b/packages/textInput/tests/__snapshots__/TextInputWithIcon.test.tsx.snap
@@ -21,9 +21,12 @@ exports[`TextInputWithIcon should render all appearances with iconEnd 1`] = `
   display: flex;
 }
 
-<div>
+<div
+  data-cy="textInput"
+>
   <div
     className="emotion-1"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
@@ -63,9 +66,12 @@ exports[`TextInputWithIcon should render all appearances with iconEnd 2`] = `
   fill: var(--themeError,#EB293A);
 }
 
-<div>
+<div
+  data-cy="textInput textInput.error"
+>
   <div
     className="emotion-1"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
@@ -103,9 +109,12 @@ exports[`TextInputWithIcon should render all appearances with iconEnd 3`] = `
   display: flex;
 }
 
-<div>
+<div
+  data-cy="textInput textInput.success"
+>
   <div
     className="emotion-1"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
@@ -143,9 +152,12 @@ exports[`TextInputWithIcon should render all appearances with iconStart 1`] = `
   display: flex;
 }
 
-<div>
+<div
+  data-cy="textInput"
+>
   <div
     className="emotion-1"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
@@ -185,9 +197,12 @@ exports[`TextInputWithIcon should render all appearances with iconStart 2`] = `
   fill: var(--themeError,#EB293A);
 }
 
-<div>
+<div
+  data-cy="textInput textInput.error"
+>
   <div
     className="emotion-1"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
@@ -225,9 +240,12 @@ exports[`TextInputWithIcon should render all appearances with iconStart 3`] = `
   display: flex;
 }
 
-<div>
+<div
+  data-cy="textInput textInput.success"
+>
   <div
     className="emotion-1"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
@@ -265,9 +283,12 @@ exports[`TextInputWithIcon should render all appearances with twoIcons 1`] = `
   display: flex;
 }
 
-<div>
+<div
+  data-cy="textInput"
+>
   <div
     className="emotion-1"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
@@ -307,9 +328,12 @@ exports[`TextInputWithIcon should render all appearances with twoIcons 2`] = `
   fill: var(--themeError,#EB293A);
 }
 
-<div>
+<div
+  data-cy="textInput textInput.error"
+>
   <div
     className="emotion-1"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
@@ -347,9 +371,12 @@ exports[`TextInputWithIcon should render all appearances with twoIcons 3`] = `
   display: flex;
 }
 
-<div>
+<div
+  data-cy="textInput textInput.success"
+>
   <div
     className="emotion-1"
+    data-cy="textInput-label"
   >
     <label
       className="emotion-0"
diff --git a/packages/textarea/components/Textarea.tsx b/packages/textarea/components/Textarea.tsx
index cd7617d82..51b3f3308 100644
--- a/packages/textarea/components/Textarea.tsx
+++ b/packages/textarea/components/Textarea.tsx
@@ -63,16 +63,29 @@ class Textarea extends React.PureComponent<TextareaProps, {}> {
     } = this.props;
     const hasError = appearance === InputAppearance.Error;
     let { onChange } = other;
+    const inputAppearance = this.getInputAppearance();
     if (onChange == null && value != null) {
       onChange = Function.prototype as (
         event: React.FormEvent<HTMLTextAreaElement>
       ) => void;
     }
+    const parentDataCy = [
+      "textarea",
+      ...(inputAppearance !== InputAppearance.Standard
+        ? [`textarea.${this.getInputAppearance()}`]
+        : [])
+    ].join(" ");
+    const textareaDataCy = [
+      "textarea-textarea",
+      ...(inputAppearance !== InputAppearance.Standard
+        ? [`textarea-textarea.${this.getInputAppearance()}`]
+        : [])
+    ].join(" ");
 
     return (
       <FormFieldWrapper id={id} errors={errors} hintContent={hintContent}>
         {({ getValidationErrors, getHintContent, isValid, describedByIds }) => (
-          <div>
+          <div data-cy={parentDataCy}>
             <label
               className={cx(getLabelStyle(hasError), {
                 [visuallyHidden]: !showInputLabel
@@ -96,10 +109,19 @@ class Textarea extends React.PureComponent<TextareaProps, {}> {
                 textarea
               )}
               required={required}
+              data-cy="textarea-textarea"
               {...{ ...other, onChange }}
             />
-            {getHintContent}
-            {hasError && getValidationErrors}
+            <div data-cy={textareaDataCy}>
+              {getHintContent ||
+                (hasError &&
+                  getValidationErrors && (
+                    <React.Fragment>
+                      {getHintContent}
+                      {hasError && getValidationErrors}
+                    </React.Fragment>
+                  ))}
+            </div>
           </div>
         )}
       </FormFieldWrapper>
diff --git a/packages/toaster/components/Toast.tsx b/packages/toaster/components/Toast.tsx
index e26606757..14c1a9cdb 100644
--- a/packages/toaster/components/Toast.tsx
+++ b/packages/toaster/components/Toast.tsx
@@ -110,6 +110,10 @@ class Toast extends React.PureComponent<ToastProps, {}> {
           return <WarningIcon className={tintSVG(yellow)} />;
       }
     };
+    const dataCy = [
+      "toast",
+      ...(appearance && appearance !== "default" ? [`toast.${appearance}`] : [])
+    ];
 
     return (
       <div
@@ -125,6 +129,7 @@ class Toast extends React.PureComponent<ToastProps, {}> {
         role={isUrgentMessage ? "alert" : "log"}
         aria-relevant="all"
         aria-atomic="true"
+        data-cy={dataCy}
       >
         <div
           className={cx(
@@ -147,7 +152,10 @@ class Toast extends React.PureComponent<ToastProps, {}> {
           <div className={flexItem("grow")}>{title}</div>
         </div>
         {description && (
-          <div className={cx(toastDesc, padding("bottom", "xs"))}>
+          <div
+            className={cx(toastDesc, padding("bottom", "xs"))}
+            data-cy="toast-description"
+          >
             {description}
           </div>
         )}
@@ -158,6 +166,7 @@ class Toast extends React.PureComponent<ToastProps, {}> {
               flex({ direction: "row-reverse" }),
               padding("bottom", "xs")
             )}
+            data-cy="toast-actions"
           >
             {primaryAction && (
               <span className={padding("left")}>{primaryAction}</span>
diff --git a/packages/toaster/components/Toaster.tsx b/packages/toaster/components/Toaster.tsx
index 435e8a199..f853f414f 100644
--- a/packages/toaster/components/Toaster.tsx
+++ b/packages/toaster/components/Toaster.tsx
@@ -78,7 +78,10 @@ class Toaster extends React.PureComponent<ToasterProps, ToasterState> {
     const toastsToRender = this.state.toasts || [];
 
     return (
-      <div className={cx(toaster, margin("all"), marginAt.medium("all", "l"))}>
+      <div
+        className={cx(toaster, margin("all"), marginAt.medium("all", "l"))}
+        data-cy="toaster"
+      >
         <ol
           onMouseEnter={this.clearTimeouts}
           onMouseLeave={this.restartTimeouts}
diff --git a/packages/toaster/tests/__snapshots__/Toast.test.tsx.snap b/packages/toaster/tests/__snapshots__/Toast.test.tsx.snap
index 3fa5dfb22..57679f472 100644
--- a/packages/toaster/tests/__snapshots__/Toast.test.tsx.snap
+++ b/packages/toaster/tests/__snapshots__/Toast.test.tsx.snap
@@ -28,6 +28,7 @@ exports[`Toast renders default 1`] = `
 
 <div
   className="emotion-1"
+  data-cy="toaster"
 >
   <ol
     aria-live="assertive"
@@ -95,6 +96,7 @@ exports[`Toast renders with actions 1`] = `
 
 <div
   className="emotion-1"
+  data-cy="toaster"
 >
   <ol
     aria-live="assertive"
@@ -162,6 +164,7 @@ exports[`Toast renders with description 1`] = `
 
 <div
   className="emotion-1"
+  data-cy="toaster"
 >
   <ol
     aria-live="assertive"
diff --git a/packages/toggleInput/components/ToggleInput.tsx b/packages/toggleInput/components/ToggleInput.tsx
index 884e767c8..ad9d7c6f5 100644
--- a/packages/toggleInput/components/ToggleInput.tsx
+++ b/packages/toggleInput/components/ToggleInput.tsx
@@ -46,6 +46,10 @@ export interface ToggleInputProps extends React.HTMLProps<HTMLInputElement> {
    * How the text content vertically aligns with the input
    */
   vertAlign?: "center" | "top";
+  /**
+   * human-readable selector used for writing tests
+   */
+  dataCy?: string;
 }
 
 interface LocalToggleInputProps extends ToggleInputProps {
@@ -66,11 +70,12 @@ class ToggleInput extends React.PureComponent<LocalToggleInputProps, {}> {
       id,
       inputLabel,
       showInputLabel,
+      dataCy,
       vertAlign
     } = this.props;
 
     return (
-      <div>
+      <div data-cy={dataCy}>
         <label
           className={cx(
             flex({
diff --git a/packages/toggleInputList/tests/__snapshots__/ToggleInputList.test.tsx.snap b/packages/toggleInputList/tests/__snapshots__/ToggleInputList.test.tsx.snap
index 9dcb31494..7dfd66573 100644
--- a/packages/toggleInputList/tests/__snapshots__/ToggleInputList.test.tsx.snap
+++ b/packages/toggleInputList/tests/__snapshots__/ToggleInputList.test.tsx.snap
@@ -150,12 +150,15 @@ exports[`ToggleInputList renders default 1`] = `
           >
             <ToggleInput
               appearance="standard"
+              dataCy="checkboxInput"
               id="id.1"
               inputLabel="Sample label"
               showInputLabel={true}
               vertAlign="center"
             >
-              <div>
+              <div
+                data-cy="checkboxInput"
+              >
                 <label
                   className="emotion-5"
                   htmlFor="id.1"
@@ -170,6 +173,7 @@ exports[`ToggleInputList renders default 1`] = `
                         aria-checked={false}
                         checked={false}
                         className="emotion-1"
+                        data-cy="checkboxInput-input"
                         id="id.1"
                         onBlur={[Function]}
                         onChange={[Function]}
@@ -204,12 +208,15 @@ exports[`ToggleInputList renders default 1`] = `
           >
             <ToggleInput
               appearance="standard"
+              dataCy="checkboxInput"
               id="id.2"
               inputLabel="Sample label"
               showInputLabel={true}
               vertAlign="center"
             >
-              <div>
+              <div
+                data-cy="checkboxInput"
+              >
                 <label
                   className="emotion-5"
                   htmlFor="id.2"
@@ -224,6 +231,7 @@ exports[`ToggleInputList renders default 1`] = `
                         aria-checked={false}
                         checked={false}
                         className="emotion-1"
+                        data-cy="checkboxInput-input"
                         id="id.2"
                         onBlur={[Function]}
                         onChange={[Function]}
@@ -258,12 +266,15 @@ exports[`ToggleInputList renders default 1`] = `
           >
             <ToggleInput
               appearance="standard"
+              dataCy="checkboxInput"
               id="id.3"
               inputLabel="Sample label"
               showInputLabel={true}
               vertAlign="center"
             >
-              <div>
+              <div
+                data-cy="checkboxInput"
+              >
                 <label
                   className="emotion-5"
                   htmlFor="id.3"
@@ -278,6 +289,7 @@ exports[`ToggleInputList renders default 1`] = `
                         aria-checked={false}
                         checked={false}
                         className="emotion-1"
+                        data-cy="checkboxInput-input"
                         id="id.3"
                         onBlur={[Function]}
                         onChange={[Function]}
@@ -479,12 +491,15 @@ exports[`ToggleInputList renders with errors 1`] = `
           >
             <ToggleInput
               appearance="standard"
+              dataCy="checkboxInput"
               id="id.1"
               inputLabel="Sample label"
               showInputLabel={true}
               vertAlign="center"
             >
-              <div>
+              <div
+                data-cy="checkboxInput"
+              >
                 <label
                   className="emotion-5"
                   htmlFor="id.1"
@@ -499,6 +514,7 @@ exports[`ToggleInputList renders with errors 1`] = `
                         aria-checked={false}
                         checked={false}
                         className="emotion-1"
+                        data-cy="checkboxInput-input"
                         id="id.1"
                         onBlur={[Function]}
                         onChange={[Function]}
@@ -533,12 +549,15 @@ exports[`ToggleInputList renders with errors 1`] = `
           >
             <ToggleInput
               appearance="standard"
+              dataCy="checkboxInput"
               id="id.2"
               inputLabel="Sample label"
               showInputLabel={true}
               vertAlign="center"
             >
-              <div>
+              <div
+                data-cy="checkboxInput"
+              >
                 <label
                   className="emotion-5"
                   htmlFor="id.2"
@@ -553,6 +572,7 @@ exports[`ToggleInputList renders with errors 1`] = `
                         aria-checked={false}
                         checked={false}
                         className="emotion-1"
+                        data-cy="checkboxInput-input"
                         id="id.2"
                         onBlur={[Function]}
                         onChange={[Function]}
@@ -587,12 +607,15 @@ exports[`ToggleInputList renders with errors 1`] = `
           >
             <ToggleInput
               appearance="standard"
+              dataCy="checkboxInput"
               id="id.3"
               inputLabel="Sample label"
               showInputLabel={true}
               vertAlign="center"
             >
-              <div>
+              <div
+                data-cy="checkboxInput"
+              >
                 <label
                   className="emotion-5"
                   htmlFor="id.3"
@@ -607,6 +630,7 @@ exports[`ToggleInputList renders with errors 1`] = `
                         aria-checked={false}
                         checked={false}
                         className="emotion-1"
+                        data-cy="checkboxInput-input"
                         id="id.3"
                         onBlur={[Function]}
                         onChange={[Function]}
@@ -809,12 +833,15 @@ exports[`ToggleInputList renders with hidden label 1`] = `
           >
             <ToggleInput
               appearance="standard"
+              dataCy="checkboxInput"
               id="id.1"
               inputLabel="Sample label"
               showInputLabel={true}
               vertAlign="center"
             >
-              <div>
+              <div
+                data-cy="checkboxInput"
+              >
                 <label
                   className="emotion-5"
                   htmlFor="id.1"
@@ -829,6 +856,7 @@ exports[`ToggleInputList renders with hidden label 1`] = `
                         aria-checked={false}
                         checked={false}
                         className="emotion-1"
+                        data-cy="checkboxInput-input"
                         id="id.1"
                         onBlur={[Function]}
                         onChange={[Function]}
@@ -863,12 +891,15 @@ exports[`ToggleInputList renders with hidden label 1`] = `
           >
             <ToggleInput
               appearance="standard"
+              dataCy="checkboxInput"
               id="id.2"
               inputLabel="Sample label"
               showInputLabel={true}
               vertAlign="center"
             >
-              <div>
+              <div
+                data-cy="checkboxInput"
+              >
                 <label
                   className="emotion-5"
                   htmlFor="id.2"
@@ -883,6 +914,7 @@ exports[`ToggleInputList renders with hidden label 1`] = `
                         aria-checked={false}
                         checked={false}
                         className="emotion-1"
+                        data-cy="checkboxInput-input"
                         id="id.2"
                         onBlur={[Function]}
                         onChange={[Function]}
@@ -917,12 +949,15 @@ exports[`ToggleInputList renders with hidden label 1`] = `
           >
             <ToggleInput
               appearance="standard"
+              dataCy="checkboxInput"
               id="id.3"
               inputLabel="Sample label"
               showInputLabel={true}
               vertAlign="center"
             >
-              <div>
+              <div
+                data-cy="checkboxInput"
+              >
                 <label
                   className="emotion-5"
                   htmlFor="id.3"
@@ -937,6 +972,7 @@ exports[`ToggleInputList renders with hidden label 1`] = `
                         aria-checked={false}
                         checked={false}
                         className="emotion-1"
+                        data-cy="checkboxInput-input"
                         id="id.3"
                         onBlur={[Function]}
                         onChange={[Function]}
@@ -1156,12 +1192,15 @@ exports[`ToggleInputList renders with selected items 1`] = `
           >
             <ToggleInput
               appearance="standard"
+              dataCy="checkboxInput checkboxInput.checked"
               id="id.1"
               inputLabel="Sample label"
               showInputLabel={true}
               vertAlign="center"
             >
-              <div>
+              <div
+                data-cy="checkboxInput checkboxInput.checked"
+              >
                 <label
                   className="emotion-7"
                   htmlFor="id.1"
@@ -1176,6 +1215,7 @@ exports[`ToggleInputList renders with selected items 1`] = `
                         aria-checked={true}
                         checked={true}
                         className="emotion-1"
+                        data-cy="checkboxInput-input checkboxInput-input.checked"
                         id="id.1"
                         onBlur={[Function]}
                         onChange={[Function]}
@@ -1194,6 +1234,7 @@ exports[`ToggleInputList renders with selected items 1`] = `
                           <svg
                             aria-label="system-check icon"
                             className="emotion-2"
+                            data-cy="icon"
                             height={16}
                             preserveAspectRatio="xMinYMin meet"
                             role="img"
@@ -1233,12 +1274,15 @@ exports[`ToggleInputList renders with selected items 1`] = `
           >
             <ToggleInput
               appearance="standard"
+              dataCy="checkboxInput checkboxInput.checked"
               id="id.2"
               inputLabel="Sample label"
               showInputLabel={true}
               vertAlign="center"
             >
-              <div>
+              <div
+                data-cy="checkboxInput checkboxInput.checked"
+              >
                 <label
                   className="emotion-7"
                   htmlFor="id.2"
@@ -1253,6 +1297,7 @@ exports[`ToggleInputList renders with selected items 1`] = `
                         aria-checked={true}
                         checked={true}
                         className="emotion-1"
+                        data-cy="checkboxInput-input checkboxInput-input.checked"
                         id="id.2"
                         onBlur={[Function]}
                         onChange={[Function]}
@@ -1271,6 +1316,7 @@ exports[`ToggleInputList renders with selected items 1`] = `
                           <svg
                             aria-label="system-check icon"
                             className="emotion-2"
+                            data-cy="icon"
                             height={16}
                             preserveAspectRatio="xMinYMin meet"
                             role="img"
@@ -1310,12 +1356,15 @@ exports[`ToggleInputList renders with selected items 1`] = `
           >
             <ToggleInput
               appearance="standard"
+              dataCy="checkboxInput"
               id="id.3"
               inputLabel="Sample label"
               showInputLabel={true}
               vertAlign="center"
             >
-              <div>
+              <div
+                data-cy="checkboxInput"
+              >
                 <label
                   className="emotion-7"
                   htmlFor="id.3"
@@ -1330,6 +1379,7 @@ exports[`ToggleInputList renders with selected items 1`] = `
                         aria-checked={false}
                         checked={false}
                         className="emotion-1"
+                        data-cy="checkboxInput-input"
                         id="id.3"
                         onBlur={[Function]}
                         onChange={[Function]}
diff --git a/packages/tooltip/components/Tooltip.tsx b/packages/tooltip/components/Tooltip.tsx
index d18008fb9..105965b21 100644
--- a/packages/tooltip/components/Tooltip.tsx
+++ b/packages/tooltip/components/Tooltip.tsx
@@ -58,6 +58,7 @@ class Tooltip extends React.PureComponent<TooltipProps, TooltipState> {
         onFocus={this.handleOpen}
         onBlur={this.handleClose}
         tabIndex={0}
+        data-cy="tooltip"
       >
         <Dropdownable
           open={this.state.open}
diff --git a/packages/tooltip/components/TooltipContent.tsx b/packages/tooltip/components/TooltipContent.tsx
index 932a3d72d..9ecfb9f8d 100644
--- a/packages/tooltip/components/TooltipContent.tsx
+++ b/packages/tooltip/components/TooltipContent.tsx
@@ -37,6 +37,7 @@ class TooltipContent extends React.PureComponent<TooltipContentProps, {}> {
           minWidth,
           maxWidth
         }}
+        data-cy="tooltipContent"
       >
         {children}
       </div>
diff --git a/packages/tooltip/tests/__snapshots__/Tooltip.test.tsx.snap b/packages/tooltip/tests/__snapshots__/Tooltip.test.tsx.snap
index 2539cf7c5..2e955d1f9 100644
--- a/packages/tooltip/tests/__snapshots__/Tooltip.test.tsx.snap
+++ b/packages/tooltip/tests/__snapshots__/Tooltip.test.tsx.snap
@@ -38,6 +38,7 @@ exports[`Tooltip renders 1`] = `
 >
   <span
     aria-describedby="renders"
+    data-cy="tooltip"
     onBlur={[Function]}
     onFocus={[Function]}
     onMouseLeave={[Function]}
@@ -109,6 +110,7 @@ exports[`Tooltip renders 1`] = `
                         aria-hidden="true"
                         class="
     emotion-0    emotion-1   inverseColorMode emotion-2"
+                        data-cy="tooltipContent"
                         id="renders"
                         role="tooltip"
                       >
@@ -131,6 +133,7 @@ exports[`Tooltip renders 1`] = `
                         aria-hidden="true"
                         class="
     emotion-0    emotion-1   inverseColorMode emotion-2"
+                        data-cy="tooltipContent"
                         id="renders"
                         role="tooltip"
                       >
@@ -162,6 +165,7 @@ exports[`Tooltip renders 1`] = `
                           aria-hidden={true}
                           className="
     emotion-0    emotion-1   inverseColorMode emotion-2"
+                          data-cy="tooltipContent"
                           id="renders"
                           role="tooltip"
                           style={
@@ -226,6 +230,7 @@ exports[`Tooltip renders open tooltip 1`] = `
 >
   <span
     aria-describedby="opened"
+    data-cy="tooltip"
     onBlur={[Function]}
     onFocus={[Function]}
     onMouseLeave={[Function]}
@@ -270,6 +275,7 @@ exports[`Tooltip renders open tooltip 1`] = `
                         aria-hidden="true"
                         class="
     emotion-0    emotion-1   inverseColorMode emotion-2"
+                        data-cy="tooltipContent"
                         id="renders"
                         role="tooltip"
                       >
@@ -314,6 +320,7 @@ exports[`Tooltip renders open tooltip 1`] = `
                         aria-hidden="false"
                         class="
     emotion-0    emotion-1   inverseColorMode emotion-2"
+                        data-cy="tooltipContent"
                         id="opened"
                         role="tooltip"
                       >
@@ -336,6 +343,7 @@ exports[`Tooltip renders open tooltip 1`] = `
                         aria-hidden="false"
                         class="
     emotion-0    emotion-1   inverseColorMode emotion-2"
+                        data-cy="tooltipContent"
                         id="opened"
                         role="tooltip"
                       >
@@ -367,6 +375,7 @@ exports[`Tooltip renders open tooltip 1`] = `
                           aria-hidden={false}
                           className="
     emotion-0    emotion-1   inverseColorMode emotion-2"
+                          data-cy="tooltipContent"
                           id="opened"
                           role="tooltip"
                           style={
@@ -436,6 +445,7 @@ exports[`Tooltip renders with preferred directions 1`] = `
 >
   <span
     aria-describedby="customDir"
+    data-cy="tooltip"
     onBlur={[Function]}
     onFocus={[Function]}
     onMouseLeave={[Function]}
@@ -481,6 +491,7 @@ exports[`Tooltip renders with preferred directions 1`] = `
     css-10cr3um
     css-miht3n
    inverseColorMode emotion-2"
+                        data-cy="tooltipContent"
                         id="renders"
                         role="tooltip"
                       >
@@ -500,6 +511,7 @@ exports[`Tooltip renders with preferred directions 1`] = `
     css-10cr3um
     css-miht3n
    inverseColorMode emotion-2"
+                        data-cy="tooltipContent"
                         id="opened"
                         role="tooltip"
                       >
@@ -544,6 +556,7 @@ exports[`Tooltip renders with preferred directions 1`] = `
                         aria-hidden="false"
                         class="
     emotion-0    emotion-1   inverseColorMode emotion-2"
+                        data-cy="tooltipContent"
                         id="customDir"
                         role="tooltip"
                       >
@@ -566,6 +579,7 @@ exports[`Tooltip renders with preferred directions 1`] = `
                         aria-hidden="false"
                         class="
     emotion-0    emotion-1   inverseColorMode emotion-2"
+                        data-cy="tooltipContent"
                         id="customDir"
                         role="tooltip"
                       >
@@ -597,6 +611,7 @@ exports[`Tooltip renders with preferred directions 1`] = `
                           aria-hidden={false}
                           className="
     emotion-0    emotion-1   inverseColorMode emotion-2"
+                          data-cy="tooltipContent"
                           id="customDir"
                           role="tooltip"
                           style={
diff --git a/packages/typeahead/components/Typeahead.tsx b/packages/typeahead/components/Typeahead.tsx
index 1e2a5b2e5..a2b0dc835 100644
--- a/packages/typeahead/components/Typeahead.tsx
+++ b/packages/typeahead/components/Typeahead.tsx
@@ -84,7 +84,7 @@ class Typeahead extends React.PureComponent<TypeaheadProps, TypeaheadState> {
     delete textFieldProps.onClick;
 
     return (
-      <div ref={this.containerRef}>
+      <div ref={this.containerRef} data-cy="typeahead">
         <Downshift
           itemToString={defaultItemToString}
           selectedItem={selectedItems}
@@ -106,7 +106,7 @@ class Typeahead extends React.PureComponent<TypeaheadProps, TypeaheadState> {
                   open={isOpen}
                   overlayRoot={overlayRoot}
                   dropdown={
-                    <div>
+                    <div data-cy="typeahead-dropdown">
                       {!items.length && !menuEmptyState ? null : (
                         <div className={margin("top", "xxs")}>
                           <DropdownMenu
diff --git a/packages/typeahead/tests/__snapshots__/Typeahead.test.tsx.snap b/packages/typeahead/tests/__snapshots__/Typeahead.test.tsx.snap
index 66e9118df..0db031426 100644
--- a/packages/typeahead/tests/__snapshots__/Typeahead.test.tsx.snap
+++ b/packages/typeahead/tests/__snapshots__/Typeahead.test.tsx.snap
@@ -220,7 +220,9 @@ exports[`Typeahead renders 1`] = `
     />
   }
 >
-  <div>
+  <div
+    data-cy="typeahead"
+  >
     <Downshift
       defaultHighlightedIndex={null}
       defaultIsOpen={false}
@@ -247,7 +249,9 @@ exports[`Typeahead renders 1`] = `
       >
         <Dropdownable
           dropdown={
-            <div>
+            <div
+              data-cy="typeahead-dropdown"
+            >
               <div
                 className="emotion-8"
               >
@@ -339,9 +343,12 @@ exports[`Typeahead renders 1`] = `
                   type="text"
                   value=""
                 >
-                  <div>
+                  <div
+                    data-cy="textInput"
+                  >
                     <div
                       className="emotion-1"
+                      data-cy="textInput-label"
                     >
                       <label
                         className="emotion-0"
@@ -366,6 +373,7 @@ exports[`Typeahead renders 1`] = `
                             aria-labelledby="downshift-0-label"
                             autoComplete="off"
                             className="emotion-2"
+                            data-cy="textInput-input"
                             id="standard.input"
                             onBlur={[Function]}
                             onChange={[Function]}
@@ -377,7 +385,9 @@ exports[`Typeahead renders 1`] = `
                             value=""
                           />
                         </div>
-                        <div />
+                        <div
+                          data-cy="textInput-hintContent"
+                        />
                       </div>
                     </FormFieldWrapper>
                   </div>
@@ -447,6 +457,7 @@ exports[`Typeahead renders 1`] = `
                       >
                         <div>
                           <div
+                            data-cy="typeahead-dropdown"
                             direction="bottom-left"
                           >
                             <div
@@ -455,6 +466,7 @@ exports[`Typeahead renders 1`] = `
                               <div
                                 aria-labelledby="downshift-0-label"
                                 class="emotion-3"
+                                data-cy="dropdownMenu"
                                 id="downshift-0-menu"
                                 role="listbox"
                                 style="max-height: 300px; width: 0px;"
@@ -462,6 +474,7 @@ exports[`Typeahead renders 1`] = `
                                 <div
                                   aria-selected="false"
                                   class="emotion-0"
+                                  data-cy="dropdownMenuItem"
                                   id="downshift-0-item-0"
                                   role="option"
                                 >
@@ -470,6 +483,7 @@ exports[`Typeahead renders 1`] = `
                                 <div
                                   aria-selected="false"
                                   class="emotion-1"
+                                  data-cy="dropdownMenuItem"
                                   id="downshift-0-item-1"
                                   role="option"
                                 >
@@ -478,6 +492,7 @@ exports[`Typeahead renders 1`] = `
                                 <div
                                   aria-selected="false"
                                   class="emotion-2"
+                                  data-cy="dropdownMenuItem"
                                   id="downshift-0-item-2"
                                   role="option"
                                 >
@@ -500,6 +515,7 @@ exports[`Typeahead renders 1`] = `
                       >
                         <div>
                           <div
+                            data-cy="typeahead-dropdown"
                             direction="bottom-left"
                           >
                             <div
@@ -508,6 +524,7 @@ exports[`Typeahead renders 1`] = `
                               <div
                                 aria-labelledby="downshift-0-label"
                                 class="emotion-7"
+                                data-cy="dropdownMenu"
                                 id="downshift-0-menu"
                                 role="listbox"
                                 style="max-height: 300px; width: 0px;"
@@ -515,6 +532,7 @@ exports[`Typeahead renders 1`] = `
                                 <div
                                   aria-selected="false"
                                   class="emotion-4"
+                                  data-cy="dropdownMenuItem"
                                   id="downshift-0-item-0"
                                   role="option"
                                 >
@@ -523,6 +541,7 @@ exports[`Typeahead renders 1`] = `
                                 <div
                                   aria-selected="false"
                                   class="emotion-5"
+                                  data-cy="dropdownMenuItem"
                                   id="downshift-0-item-1"
                                   role="option"
                                 >
@@ -531,6 +550,7 @@ exports[`Typeahead renders 1`] = `
                                 <div
                                   aria-selected="false"
                                   class="emotion-6"
+                                  data-cy="dropdownMenuItem"
                                   id="downshift-0-item-2"
                                   role="option"
                                 >
@@ -555,6 +575,7 @@ exports[`Typeahead renders 1`] = `
                           open={false}
                         >
                           <div
+                            data-cy="typeahead-dropdown"
                             direction="bottom-left"
                           >
                             <div
@@ -571,6 +592,7 @@ exports[`Typeahead renders 1`] = `
                                 <div
                                   aria-labelledby="downshift-0-label"
                                   className="emotion-7"
+                                  data-cy="dropdownMenu"
                                   id="downshift-0-menu"
                                   role="listbox"
                                   style={
@@ -596,6 +618,7 @@ exports[`Typeahead renders 1`] = `
                                     <div
                                       aria-selected={false}
                                       className="emotion-4"
+                                      data-cy="dropdownMenuItem"
                                       id="downshift-0-item-0"
                                       onClick={[Function]}
                                       onMouseDown={[Function]}
@@ -621,6 +644,7 @@ exports[`Typeahead renders 1`] = `
                                     <div
                                       aria-selected={false}
                                       className="emotion-5"
+                                      data-cy="dropdownMenuItem"
                                       id="downshift-0-item-1"
                                       onClick={[Function]}
                                       onMouseDown={[Function]}
@@ -646,6 +670,7 @@ exports[`Typeahead renders 1`] = `
                                     <div
                                       aria-selected={false}
                                       className="emotion-6"
+                                      data-cy="dropdownMenuItem"
                                       id="downshift-0-item-2"
                                       onClick={[Function]}
                                       onMouseDown={[Function]}
@@ -894,7 +919,9 @@ exports[`Typeahead renders a menu with a max height 1`] = `
     />
   }
 >
-  <div>
+  <div
+    data-cy="typeahead"
+  >
     <Downshift
       defaultHighlightedIndex={null}
       defaultIsOpen={false}
@@ -921,7 +948,9 @@ exports[`Typeahead renders a menu with a max height 1`] = `
       >
         <Dropdownable
           dropdown={
-            <div>
+            <div
+              data-cy="typeahead-dropdown"
+            >
               <div
                 className="emotion-8"
               >
@@ -1013,9 +1042,12 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                   type="text"
                   value=""
                 >
-                  <div>
+                  <div
+                    data-cy="textInput"
+                  >
                     <div
                       className="emotion-1"
+                      data-cy="textInput-label"
                     >
                       <label
                         className="emotion-0"
@@ -1040,6 +1072,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                             aria-labelledby="downshift-1-label"
                             autoComplete="off"
                             className="emotion-2"
+                            data-cy="textInput-input"
                             id="standard.input"
                             onBlur={[Function]}
                             onChange={[Function]}
@@ -1051,7 +1084,9 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                             value=""
                           />
                         </div>
-                        <div />
+                        <div
+                          data-cy="textInput-hintContent"
+                        />
                       </div>
                     </FormFieldWrapper>
                   </div>
@@ -1067,6 +1102,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                       >
                         <div>
                           <div
+                            data-cy="typeahead-dropdown"
                             direction="bottom-left"
                           >
                             <div
@@ -1075,6 +1111,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                               <div
                                 aria-labelledby="downshift-0-label"
                                 class="emotion-7"
+                                data-cy="dropdownMenu"
                                 id="downshift-0-menu"
                                 role="listbox"
                                 style="max-height: 300px; width: 0px;"
@@ -1082,6 +1119,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                                 <div
                                   aria-selected="false"
                                   class="emotion-4"
+                                  data-cy="dropdownMenuItem"
                                   id="downshift-0-item-0"
                                   role="option"
                                 >
@@ -1090,6 +1128,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                                 <div
                                   aria-selected="false"
                                   class="emotion-5"
+                                  data-cy="dropdownMenuItem"
                                   id="downshift-0-item-1"
                                   role="option"
                                 >
@@ -1098,6 +1137,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                                 <div
                                   aria-selected="false"
                                   class="emotion-6"
+                                  data-cy="dropdownMenuItem"
                                   id="downshift-0-item-2"
                                   role="option"
                                 >
@@ -1169,6 +1209,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                       >
                         <div>
                           <div
+                            data-cy="typeahead-dropdown"
                             direction="bottom-left"
                           >
                             <div
@@ -1177,6 +1218,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                               <div
                                 aria-labelledby="downshift-1-label"
                                 class="emotion-3"
+                                data-cy="dropdownMenu"
                                 id="downshift-1-menu"
                                 role="listbox"
                                 style="max-height: 100px; width: 0px;"
@@ -1184,6 +1226,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                                 <div
                                   aria-selected="false"
                                   class="emotion-0"
+                                  data-cy="dropdownMenuItem"
                                   id="downshift-1-item-0"
                                   role="option"
                                 >
@@ -1192,6 +1235,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                                 <div
                                   aria-selected="false"
                                   class="emotion-1"
+                                  data-cy="dropdownMenuItem"
                                   id="downshift-1-item-1"
                                   role="option"
                                 >
@@ -1200,6 +1244,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                                 <div
                                   aria-selected="false"
                                   class="emotion-2"
+                                  data-cy="dropdownMenuItem"
                                   id="downshift-1-item-2"
                                   role="option"
                                 >
@@ -1222,6 +1267,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                       >
                         <div>
                           <div
+                            data-cy="typeahead-dropdown"
                             direction="bottom-left"
                           >
                             <div
@@ -1230,6 +1276,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                               <div
                                 aria-labelledby="downshift-1-label"
                                 class="emotion-7"
+                                data-cy="dropdownMenu"
                                 id="downshift-1-menu"
                                 role="listbox"
                                 style="max-height: 100px; width: 0px;"
@@ -1237,6 +1284,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                                 <div
                                   aria-selected="false"
                                   class="emotion-4"
+                                  data-cy="dropdownMenuItem"
                                   id="downshift-1-item-0"
                                   role="option"
                                 >
@@ -1245,6 +1293,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                                 <div
                                   aria-selected="false"
                                   class="emotion-5"
+                                  data-cy="dropdownMenuItem"
                                   id="downshift-1-item-1"
                                   role="option"
                                 >
@@ -1253,6 +1302,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                                 <div
                                   aria-selected="false"
                                   class="emotion-6"
+                                  data-cy="dropdownMenuItem"
                                   id="downshift-1-item-2"
                                   role="option"
                                 >
@@ -1277,6 +1327,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                           open={false}
                         >
                           <div
+                            data-cy="typeahead-dropdown"
                             direction="bottom-left"
                           >
                             <div
@@ -1293,6 +1344,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                                 <div
                                   aria-labelledby="downshift-1-label"
                                   className="emotion-7"
+                                  data-cy="dropdownMenu"
                                   id="downshift-1-menu"
                                   role="listbox"
                                   style={
@@ -1318,6 +1370,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                                     <div
                                       aria-selected={false}
                                       className="emotion-4"
+                                      data-cy="dropdownMenuItem"
                                       id="downshift-1-item-0"
                                       onClick={[Function]}
                                       onMouseDown={[Function]}
@@ -1343,6 +1396,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                                     <div
                                       aria-selected={false}
                                       className="emotion-5"
+                                      data-cy="dropdownMenuItem"
                                       id="downshift-1-item-1"
                                       onClick={[Function]}
                                       onMouseDown={[Function]}
@@ -1368,6 +1422,7 @@ exports[`Typeahead renders a menu with a max height 1`] = `
                                     <div
                                       aria-selected={false}
                                       className="emotion-6"
+                                      data-cy="dropdownMenuItem"
                                       id="downshift-1-item-2"
                                       onClick={[Function]}
                                       onMouseDown={[Function]}