diff --git a/app/ui-react/README.md b/app/ui-react/README.md
index 0f13feb42..830e61e2a 100644
--- a/app/ui-react/README.md
+++ b/app/ui-react/README.md
@@ -6,35 +6,47 @@ Syndesis UI is a single page application built with React.
 
 ##### Table of Contents
 
-- [This repository](#this-repository)
-- [Setup and preparation](#setup-and-preparation)
-- [Development workflow](#development-workflow)
-    - [yarn build](#yarn-build)
-    - [yarn watch:app:minishift](#yarn-watchappminishift)
-    - [yarn watch:app:minishift:restore](#yarn-watchappminishiftrestore)
-    - [yarn watch:packages](#yarn-watchpackages)
-    - [yarn test](#yarn-test)
-    - [yarn storybook](#yarn-storybook)
-- [How to](#how-to)
+- [Syndesis UI](#syndesis-ui)
+        - [Table of Contents](#table-of-contents)
+  - [This repository](#this-repository)
+    - [syndesis](#syndesis)
+    - [packages/api](#packagesapi)
+    - [packages/models](#packagesmodels)
+    - [packages/ui](#packagesui)
+    - [packages/utils](#packagesutils)
+    - [typings](#typings)
+  - [Setup and preparation](#setup-and-preparation)
+  - [Development workflow](#development-workflow)
+    - [`yarn build`](#yarn-build)
+    - [`yarn watch:app:minishift`](#yarn-watchappminishift)
+    - [`yarn watch:app:minishift:restore`](#yarn-watchappminishiftrestore)
+    - [`BACKEND=https://syndesis.192.168.64.1.nip.io yarn watch:app:proxy`](#backendhttpssyndesis192168641nipio-yarn-watchappproxy)
+    - [`yarn watch:packages`](#yarn-watchpackages)
+    - [`yarn test`](#yarn-test)
+    - [`yarn storybook`](#yarn-storybook)
+  - [How to](#how-to)
     - [Internationalization](#internationalization)
-        - [Internationalizing a render method](#internationalizing-a-render-method)
-        - [Internationalizing text in a constant](#internationalizing-text-in-a-constant)
-        - [Translation Examples](#translation-examples)
-            - [Simple translation using default namespace](#simple-translation-using-default-namespace)
-            - [Translations using different namespaces](#translations-using-different-namespaces)
-            - [Translation with arguments](#translation-with-arguments)
-            - [Nested translation](#nested-translation)
-            - [Translation as an argument to another translation](#translation-as-an-argument-to-another-translation)
-            - [Adding plurals to a translation](#adding-plurals-to-a-translation)
+      - [Internationalizing a render method](#internationalizing-a-render-method)
+      - [Internationalizing text in a constant](#internationalizing-text-in-a-constant)
+      - [Translation Examples](#translation-examples)
+        - [Simple translation using default namespace](#simple-translation-using-default-namespace)
+        - [Translations using different namespaces](#translations-using-different-namespaces)
+        - [Translation with arguments](#translation-with-arguments)
+        - [Nested translation](#nested-translation)
+        - [Translation as an argument to another translation](#translation-as-an-argument-to-another-translation)
+        - [Adding plurals to a translation](#adding-plurals-to-a-translation)
     - [Routing](#routing)
-        - [Introduction to routing](#introduction-to-routing)
-        - [App's routes and resolvers](#apps-routes-and-resolvers)
-        - [Routes and app state (AKA passing data between routes)](#routes-and-app-state-aka-passing-data-between-routes)
-          - [A simple example](#a-simple-example)
-          - [Urls as a single source of truth](#urls-as-a-single-source-of-truth)
-          - [Where we are going there ~~are no roads~~ is no app state](#where-we-are-going-there-are-no-roads-is-no-app-state)        
-    - [Testing](#testing)        
-- [License](#license)
+      - [Introduction to routing](#introduction-to-routing)
+      - [App's routes and resolvers](#apps-routes-and-resolvers)
+      - [Routes and app state (i.e. passing data between routes)](#routes-and-app-state-ie-passing-data-between-routes)
+        - [A simple example](#a-simple-example)
+        - [URLs as a single source of truth](#urls-as-a-single-source-of-truth)
+        - [Where we are going there ~~are no roads~~ is no app state](#where-we-are-going-there-are-no-roads-is-no-app-state)
+    - [Testing](#testing)
+      - [Adding test identifiers](#adding-test-identifiers)
+      - [Unit testing](#unit-testing)
+      - [Integration testing](#integration-testing)
+  - [License](#license)
 
 ## This repository 
 
@@ -622,6 +634,31 @@ We now have a page that is resilient to page refreshes, can be shared with other
 
 ### Testing
 
+#### Adding test identifiers
+
+UI components that have user interaction should define a `data-testid` attribute. Here are a few components that might need a test identifier: `ButtonLink`, `button`, `a`, `input`, `Link`, `PfVerticalNavItem`, `PfNavLink`, `li` used in menus, and `DropdownItem`.
+
+The `toTestId` utilitity function, which is found in the `testIdGenerator.ts` file in the `utils` folder of the `@syndesis/ui` package, should be used to generate **all** test identifiers. This function ensures the identifier is formatted correctly and only contains valid characters. It also provides a way to separate segments of the identifier if segments are desired.
+
+The `toTestId` function accepts one or more strings and inserts a dash (`-`) character between them. It is recommended to have the first string be the name of the component. Here is an example of how to use the `toTestId` function:
+
+```tsx
+export class ExtensionListItem extends React.Component<
+...
+<Button
+  data-testid={`${toTestId(
+    'ExtensionListItem',
+    this.props.extensionName,
+    'delete-button'
+  )}`}
+  ...
+>
+  {this.props.i18nDelete}
+</Button>
+```
+
+The above code produces this test ID for an extension with the name of "My Extension": `extensionlistitem-my-extension-delete-button`.
+
 #### Unit testing
 
 TODO talk about jest, react-testing-library, point out to useful resources.
diff --git a/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx b/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx
index ab2c5e14f..a1fb0a47a 100644
--- a/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx
+++ b/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx
@@ -15,6 +15,7 @@ import {
   ConfirmationDialog,
   ConfirmationIconType,
 } from '../Shared';
+import { toTestId } from '../utils';
 import './ConnectionCard.css';
 
 export interface IConnectionCardMenuProps {
@@ -146,7 +147,11 @@ export class ConnectionCard extends React.PureComponent<
                 >
                   <li role={'presentation'} key={0}>
                     <Link
-                      data-testid={'connection-card-view'}
+                      data-testid={`${toTestId(
+                        'ConnectionCard',
+                        this.props.name,
+                        'view-action'
+                      )}`}
                       to={this.props.href}
                       role={'menuitem'}
                       tabIndex={1}
@@ -156,7 +161,11 @@ export class ConnectionCard extends React.PureComponent<
                   </li>
                   <li role={'presentation'} key={1}>
                     <Link
-                      data-testid={'connection-card-edit'}
+                      data-testid={`${toTestId(
+                        'ConnectionCard',
+                        this.props.name,
+                        'edit-action'
+                      )}`}
                       to={this.props.menuProps.editHref}
                       role={'menuitem'}
                       tabIndex={2}
@@ -177,7 +186,11 @@ export class ConnectionCard extends React.PureComponent<
                         position={'bottom'}
                       >
                         <a
-                          data-testid={'connection-card-delete'}
+                          data-testid={`${toTestId(
+                            'ConnectionCard',
+                            this.props.name,
+                            'delete-action'
+                          )}`}
                           href={'javascript:void(0)'}
                           onClick={this.showDeleteDialog}
                           role={'menuitem'}
@@ -188,7 +201,11 @@ export class ConnectionCard extends React.PureComponent<
                       </Tooltip>
                     ) : (
                       <a
-                        data-testid={'connection-card-delete'}
+                        data-testid={`${toTestId(
+                          'ConnectionCard',
+                          this.props.name,
+                          'delete-action'
+                        )}`}
                         href={'javascript:void(0)'}
                         onClick={this.showDeleteDialog}
                         role={'menuitem'}
@@ -203,7 +220,11 @@ export class ConnectionCard extends React.PureComponent<
             )}
           </Card.Heading>
           <Link
-            data-testid={'connection-card-details'}
+            data-testid={`${toTestId(
+              'ConnectionCard',
+              this.props.name,
+              'details-link'
+            )}`}
             to={this.props.href}
             className={'connection-card__content'}
           >
@@ -215,7 +236,11 @@ export class ConnectionCard extends React.PureComponent<
                 <Title
                   size="lg"
                   className="connection-card__title h2"
-                  data-testid="connection-card-title"
+                  data-testid={`${toTestId(
+                    'ConnectionCard',
+                    this.props.name,
+                    'title'
+                  )}`}
                 >
                   {this.props.name}
                 </Title>
diff --git a/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx b/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx
index 1c6a3819b..7a2e593ad 100644
--- a/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx
+++ b/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx
@@ -4,6 +4,7 @@ import * as H from '@syndesis/history';
 import classnames from 'classnames';
 import * as React from 'react';
 import { ButtonLink, Loader } from '../Layout';
+import { toTestId } from '../utils';
 
 /**
  * @param header - a PatternFly Wizard Steps component.
@@ -94,7 +95,7 @@ export const ConnectionCreatorLayout: React.FunctionComponent<
       </div>
       <div className="wizard-pf-footer integration-editor-layout__footer">
         <ButtonLink
-          data-testid={'connection-creator-layout-back'}
+          data-testid={`${toTestId('ConnectionCreatorLayout', 'back-button')}`}
           onClick={onBack}
           href={backHref}
           className={'wizard-pf-back'}
@@ -105,7 +106,7 @@ export const ConnectionCreatorLayout: React.FunctionComponent<
           <div className={'wizard-pf-extrabuttons'}>{extraButtons}</div>
         )}
         <ButtonLink
-          data-testid={'connection-creator-layout-next'}
+          data-testid={`${toTestId('ConnectionCreatorLayout', 'next-button')}`}
           onClick={onNext}
           href={nextHref}
           as={'primary'}
@@ -122,7 +123,10 @@ export const ConnectionCreatorLayout: React.FunctionComponent<
           )}
         </ButtonLink>
         <ButtonLink
-          data-testid={'connection-creator-layout-cancel'}
+          data-testid={`${toTestId(
+            'ConnectionCreatorLayout',
+            'cancel-button'
+          )}`}
           onClick={onCancel}
           href={cancelHref}
           className={'wizard-pf-cancel'}
diff --git a/app/ui-react/packages/ui/src/Connection/ConnectionDetailsForm.tsx b/app/ui-react/packages/ui/src/Connection/ConnectionDetailsForm.tsx
index 8c2b5554c..ca52fc8ec 100644
--- a/app/ui-react/packages/ui/src/Connection/ConnectionDetailsForm.tsx
+++ b/app/ui-react/packages/ui/src/Connection/ConnectionDetailsForm.tsx
@@ -1,6 +1,7 @@
 import { Alert, Button, Card } from 'patternfly-react';
 import * as React from 'react';
 import { Container, Loader, PageSection } from '../Layout';
+import { toTestId } from '../utils';
 import './ConnectionDetailsForm.css';
 
 export interface IConnectionDetailsValidationResult {
@@ -107,7 +108,10 @@ export class ConnectionDetailsForm extends React.Component<
                   <div>
                     {this.props.isEditing ? (
                       <Button
-                        data-testid={'connection-details-form-validate'}
+                        data-testid={`${toTestId(
+                          'ConnectionDetailsForm',
+                          'validate-button'
+                        )}`}
                         bsStyle="default"
                         disabled={this.props.isWorking || !this.props.isValid}
                         onClick={this.props.onValidate}
@@ -119,7 +123,10 @@ export class ConnectionDetailsForm extends React.Component<
                       </Button>
                     ) : (
                       <Button
-                        data-testid={'connection-details-form-edit'}
+                        data-testid={`${toTestId(
+                          'ConnectionDetailsForm',
+                          'edit-button'
+                        )}`}
                         bsStyle="primary"
                         onClick={this.props.onStartEditing}
                       >
@@ -131,7 +138,10 @@ export class ConnectionDetailsForm extends React.Component<
               </Card.Body>
               <Card.Footer>
                 <Button
-                  data-testid={'connection-details-form-cancel'}
+                  data-testid={`${toTestId(
+                    'ConnectionDetailsForm',
+                    'cancel-button'
+                  )}`}
                   bsStyle="default"
                   className="connection-details-form__editButton"
                   disabled={this.props.isWorking}
@@ -140,7 +150,10 @@ export class ConnectionDetailsForm extends React.Component<
                   {this.props.i18nCancelLabel}
                 </Button>
                 <Button
-                  data-testid={'connection-details-form-save'}
+                  data-testid={`${toTestId(
+                    'ConnectionDetailsForm',
+                    'save-button'
+                  )}`}
                   bsStyle="primary"
                   className="connection-details-form__editButton"
                   disabled={this.props.isWorking || !this.props.isValid}
diff --git a/app/ui-react/packages/ui/src/Connection/ConnectionsListView.tsx b/app/ui-react/packages/ui/src/Connection/ConnectionsListView.tsx
index 0ad1aaf5e..f2046d485 100644
--- a/app/ui-react/packages/ui/src/Connection/ConnectionsListView.tsx
+++ b/app/ui-react/packages/ui/src/Connection/ConnectionsListView.tsx
@@ -2,6 +2,7 @@ import * as H from '@syndesis/history';
 import * as React from 'react';
 import { ButtonLink, PageSection } from '../Layout';
 import { IListViewToolbarProps, ListViewToolbar } from '../Shared';
+import { toTestId } from '../utils';
 
 export interface IConnectionsListViewProps extends IListViewToolbarProps {
   createConnectionButtonStyle?: 'primary' | 'default';
@@ -19,7 +20,10 @@ export class ConnectionsListView extends React.Component<
           <ListViewToolbar {...this.props}>
             <div className="form-group">
               <ButtonLink
-                data-testid={'connections-list-view-create-connection'}
+                data-testid={`${toTestId(
+                  'ConnectionsListView',
+                  'create-connection-button'
+                )}`}
                 href={this.props.linkToConnectionCreate}
                 as={this.props.createConnectionButtonStyle || 'primary'}
               >
diff --git a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailCard.tsx b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailCard.tsx
index 601ef80ab..90fc25fa1 100644
--- a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailCard.tsx
+++ b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailCard.tsx
@@ -1,6 +1,7 @@
 import { Text } from '@patternfly/react-core';
 import { Card, CardBody } from 'patternfly-react';
 import * as React from 'react';
+import { toTestId } from '../../utils';
 import './ApiConnectorDetailCard.css';
 
 export interface IApiConnectorDetailCardProps {
@@ -22,7 +23,7 @@ export class ApiConnectorDetailCard extends React.Component<
             </div>
             <div
               className="api-connector__title h2"
-              data-testid="api-connector-card-title"
+              data-testid={`${toTestId('ApiConnectorDetailCard', 'title')}`}
             >
               {this.props.name}
             </div>
diff --git a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailsForm.tsx b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailsForm.tsx
index 0a42e3765..895d8061b 100644
--- a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailsForm.tsx
+++ b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailsForm.tsx
@@ -1,6 +1,7 @@
 import { Button, Card } from 'patternfly-react';
 import * as React from 'react';
 import { Loader } from '../../Layout';
+import { toTestId } from '../../utils';
 import './ApiConnectorDetailsForm.css';
 
 export interface IApiConnectorDetailsFormProps {
@@ -96,7 +97,10 @@ export class ApiConnectorDetailsForm extends React.Component<
                       src={this.props.apiConnectorIcon}
                     />
                     <input
-                      data-testid={'api-connector-details-form-icon-file'}
+                      data-testid={`${toTestId(
+                        'ApiConnectorDetailsForm',
+                        'icon-file-input'
+                      )}`}
                       type="file"
                       id="iconFileInput"
                       onChange={this.props.onUploadImage}
@@ -109,7 +113,10 @@ export class ApiConnectorDetailsForm extends React.Component<
             {this.props.isEditing ? (
               <>
                 <Button
-                  data-testid={'api-connector-details-form-cancel'}
+                  data-testid={`${toTestId(
+                    'ApiConnectorDetailsForm',
+                    'cancel-button'
+                  )}`}
                   bsStyle="default"
                   className="api-connector-details-form__editButton"
                   disabled={this.props.isWorking}
@@ -118,7 +125,10 @@ export class ApiConnectorDetailsForm extends React.Component<
                   {this.props.i18nCancelLabel}
                 </Button>
                 <Button
-                  data-testid={'api-connector-details-form-save'}
+                  data-testid={`${toTestId(
+                    'ApiConnectorDetailsForm',
+                    'save-button'
+                  )}`}
                   bsStyle="primary"
                   className="api-connector-details-form__editButton"
                   disabled={this.props.isWorking}
@@ -130,7 +140,10 @@ export class ApiConnectorDetailsForm extends React.Component<
               </>
             ) : (
               <Button
-                data-testid={'api-connector-details-form-edit'}
+                data-testid={`${toTestId(
+                  'ApiConnectorDetailsForm',
+                  'edit-button'
+                )}`}
                 bsStyle="primary"
                 onClick={this.props.onStartEditing}
               >
diff --git a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListItem.tsx b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListItem.tsx
index 0fbd217e3..d36c8b1d2 100644
--- a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListItem.tsx
+++ b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListItem.tsx
@@ -13,6 +13,7 @@ import {
   ConfirmationDialog,
   ConfirmationIconType,
 } from '../../Shared';
+import { toTestId } from '../../utils';
 
 export interface IApiConnectorListItemProps {
   apiConnectorDescription?: string;
@@ -115,7 +116,11 @@ export class ApiConnectorListItem extends React.Component<
                 placement="top"
               >
                 <ButtonLink
-                  data-testid={'api-connector-list-item-details'}
+                  data-testid={`${toTestId(
+                    'ApiConnectorListItem',
+                    this.props.apiConnectorName,
+                    'details-button'
+                  )}`}
                   href={this.props.detailsPageLink}
                   as={'default'}
                 >
@@ -124,7 +129,11 @@ export class ApiConnectorListItem extends React.Component<
               </OverlayTrigger>
               <OverlayTrigger overlay={this.getDeleteTooltip()} placement="top">
                 <Button
-                  data-testid={'api-connector-list-item-delete'}
+                  data-testid={`${toTestId(
+                    'ApiConnectorListItem',
+                    this.props.apiConnectorName,
+                    'delete-button'
+                  )}`}
                   bsStyle="default"
                   disabled={this.props.usedBy !== 0}
                   onClick={this.showDeleteDialog}
diff --git a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListView.tsx b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListView.tsx
index 9e39bcb83..14e5a0df9 100644
--- a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListView.tsx
+++ b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListView.tsx
@@ -8,6 +8,7 @@ import {
 import * as React from 'react';
 import { ButtonLink, PageSection } from '../../Layout';
 import { IListViewToolbarProps, ListViewToolbar } from '../../Shared';
+import { toTestId } from '../../utils';
 
 export interface IApiConnectorListViewProps extends IListViewToolbarProps {
   i18nDescription: string;
@@ -33,7 +34,10 @@ export class ApiConnectorListView extends React.Component<
               placement="top"
             >
               <ButtonLink
-                data-testid={'api-connector-list-view-create-api-connector'}
+                data-testid={`${toTestId(
+                  'ApiConnectorListView',
+                  'create-button'
+                )}`}
                 href={this.props.linkCreateApiConnector}
                 as={'primary'}
               >
@@ -65,7 +69,10 @@ export class ApiConnectorListView extends React.Component<
                 placement="top"
               >
                 <ButtonLink
-                  data-testid={'api-connector-list-view-empty-state-create'}
+                  data-testid={`${toTestId(
+                    'ApiConnectorListView',
+                    'empty-state-create-button'
+                  )}`}
                   href={this.props.linkCreateApiConnector}
                   as={'primary'}
                 >
diff --git a/app/ui-react/packages/ui/src/Customization/extensions/ExtensionDetail.tsx b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionDetail.tsx
index e87fbac06..6d79c769a 100644
--- a/app/ui-react/packages/ui/src/Customization/extensions/ExtensionDetail.tsx
+++ b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionDetail.tsx
@@ -23,6 +23,7 @@ import {
   ConfirmationDialog,
   ConfirmationIconType,
 } from '../../Shared';
+import { toTestId } from '../../utils';
 import './ExtensionDetail.css';
 
 export interface IExtensionDetailProps {
@@ -209,7 +210,10 @@ export class ExtensionDetail extends React.Component<
             <LevelItem className="extension-detail__titleButtons">
               <OverlayTrigger overlay={this.getUpdateTooltip()} placement="top">
                 <ButtonLink
-                  data-testid={'extension-detail-update'}
+                  data-testid={`${toTestId(
+                    'ExtensionDetail',
+                    'update-button'
+                  )}`}
                   href={this.props.linkUpdateExtension}
                   as={'primary'}
                 >
diff --git a/app/ui-react/packages/ui/src/Customization/extensions/ExtensionImportReview.tsx b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionImportReview.tsx
index df8f0a372..cdf3e1025 100644
--- a/app/ui-react/packages/ui/src/Customization/extensions/ExtensionImportReview.tsx
+++ b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionImportReview.tsx
@@ -2,6 +2,7 @@ import * as H from '@syndesis/history';
 import { Button, Grid } from 'patternfly-react';
 import * as React from 'react';
 import { ButtonLink, Container } from '../../Layout';
+import { toTestId } from '../../utils';
 import './ExtensionImportReview.css';
 
 export interface IImportAction {
@@ -208,7 +209,10 @@ export class ExtensionImportReview extends React.Component<
                     {this.props.i18nImport}
                   </Button>
                   <ButtonLink
-                    data-testid={'extension-detail-cancel'}
+                    data-testid={`${toTestId(
+                      'ExtensionImportReview',
+                      'cancel-button'
+                    )}`}
                     className="extension-import-review__cancelButton"
                     href={this.props.cancelLink}
                     as={'default'}
diff --git a/app/ui-react/packages/ui/src/Customization/extensions/ExtensionIntegrationsTable.tsx b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionIntegrationsTable.tsx
index aace826e4..da3fa2451 100644
--- a/app/ui-react/packages/ui/src/Customization/extensions/ExtensionIntegrationsTable.tsx
+++ b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionIntegrationsTable.tsx
@@ -1,6 +1,7 @@
 import { Text } from '@patternfly/react-core';
 import { Table } from 'patternfly-react';
 import * as React from 'react';
+import { toTestId } from '../../utils';
 
 export interface IExtensionIntegration {
   id: string; // used to create link to integration details page
@@ -33,7 +34,11 @@ export class ExtensionIntegrationsTable extends React.Component<
       return (
         <Table.Cell>
           <a
-            data-testid={`extension-integrations-table-${rowData.id}`}
+            data-testid={`${toTestId(
+              'ExtensionIntegrationsTable',
+              rowData.name,
+              'integration-link'
+            )}`}
             href="javascript:void(0)"
             onClick={onClick}
           >
diff --git a/app/ui-react/packages/ui/src/Customization/extensions/ExtensionListItem.tsx b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionListItem.tsx
index 86c9394fe..b7ee43d85 100644
--- a/app/ui-react/packages/ui/src/Customization/extensions/ExtensionListItem.tsx
+++ b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionListItem.tsx
@@ -13,6 +13,7 @@ import {
   ConfirmationDialog,
   ConfirmationIconType,
 } from '../../Shared';
+import { toTestId } from '../../utils';
 
 export interface IExtensionListItemProps {
   detailsPageLink: H.LocationDescriptor;
@@ -135,7 +136,11 @@ export class ExtensionListItem extends React.Component<
                 placement="top"
               >
                 <ButtonLink
-                  data-testid={'extension-list-item-details'}
+                  data-testid={`${toTestId(
+                    'ExtensionListItem',
+                    this.props.extensionName,
+                    'details-button'
+                  )}`}
                   href={this.props.detailsPageLink}
                   as={'default'}
                 >
@@ -144,7 +149,11 @@ export class ExtensionListItem extends React.Component<
               </OverlayTrigger>
               <OverlayTrigger overlay={this.getUpdateTooltip()} placement="top">
                 <ButtonLink
-                  data-testid={'extension-list-item-update'}
+                  data-testid={`${toTestId(
+                    'ExtensionListItem',
+                    this.props.extensionName,
+                    'update-button'
+                  )}`}
                   href={this.props.linkUpdateExtension}
                   as={'default'}
                 >
@@ -153,7 +162,11 @@ export class ExtensionListItem extends React.Component<
               </OverlayTrigger>
               <OverlayTrigger overlay={this.getDeleteTooltip()} placement="top">
                 <Button
-                  data-testid={'extension-list-item-delete'}
+                  data-testid={`${toTestId(
+                    'ExtensionListItem',
+                    this.props.extensionName,
+                    'delete-button'
+                  )}`}
                   bsStyle="default"
                   disabled={this.props.usedBy !== 0}
                   onClick={this.showDeleteDialog}
diff --git a/app/ui-react/packages/ui/src/Customization/extensions/ExtensionListView.tsx b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionListView.tsx
index 05db93768..82a596a58 100644
--- a/app/ui-react/packages/ui/src/Customization/extensions/ExtensionListView.tsx
+++ b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionListView.tsx
@@ -9,6 +9,7 @@ import {
 import * as React from 'react';
 import { ButtonLink, PageSection } from '../../Layout';
 import { IListViewToolbarProps, ListViewToolbar } from '../../Shared';
+import { toTestId } from '../../utils';
 
 export interface IExtensionListViewProps extends IListViewToolbarProps {
   i18nDescription: string;
@@ -42,7 +43,10 @@ export class ExtensionListView extends React.Component<
           <div className="form-group">
             <OverlayTrigger overlay={this.getImportTooltip()} placement="top">
               <ButtonLink
-                data-testid={'extension-list-view-import-extension'}
+                data-testid={`${toTestId(
+                  'ExtensionListView',
+                  'import-button'
+                )}`}
                 href={this.props.linkImportExtension}
                 as={'primary'}
               >
@@ -71,7 +75,10 @@ export class ExtensionListView extends React.Component<
             <EmptyState.Action>
               <OverlayTrigger overlay={this.getImportTooltip()} placement="top">
                 <ButtonLink
-                  data-testid={'extension-list-view-empty-state-import'}
+                  data-testid={`${toTestId(
+                    'ExtensionListView',
+                    'empty-state-import-button'
+                  )}`}
                   href={this.props.linkImportExtension}
                   as={'primary'}
                 >
diff --git a/app/ui-react/packages/ui/src/Dashboard/Dashboard.tsx b/app/ui-react/packages/ui/src/Dashboard/Dashboard.tsx
index c1d4d31cd..e157fda04 100644
--- a/app/ui-react/packages/ui/src/Dashboard/Dashboard.tsx
+++ b/app/ui-react/packages/ui/src/Dashboard/Dashboard.tsx
@@ -5,6 +5,7 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { ButtonLink, PageSection } from '../Layout';
 import { SimplePageHeader } from '../Shared';
+import { toTestId } from '../utils';
 import './Dashboard.css';
 
 export interface IIntegrationsPageProps {
@@ -38,7 +39,10 @@ export class Dashboard extends React.PureComponent<IIntegrationsPageProps> {
             <Grid.Row className={'show-grid dashboard__integrations__actions'}>
               <Grid.Col xs={6} xsOffset={6}>
                 <ButtonLink
-                  data-testid={'dashboard-create-integration'}
+                  data-testid={`${toTestId(
+                    'Dashboard',
+                    'create-integration-button'
+                  )}`}
                   href={this.props.linkToIntegrationCreation}
                   as={'primary'}
                   className={'pull-right'}
@@ -46,7 +50,7 @@ export class Dashboard extends React.PureComponent<IIntegrationsPageProps> {
                   {this.props.i18nLinkCreateIntegration}
                 </ButtonLink>
                 <Link
-                  data-testid={'dashboard-integrations'}
+                  data-testid={`${toTestId('Dashboard', 'integrations-link')}`}
                   to={this.props.linkToIntegrations}
                   className={'pull-right view'}
                 >
@@ -91,7 +95,10 @@ export class Dashboard extends React.PureComponent<IIntegrationsPageProps> {
                 {this.props.i18nConnections}
               </Title>
               <ButtonLink
-                data-testid={'dashboard-create-connection'}
+                data-testid={`${toTestId(
+                  'Dashboard',
+                  'create-connection-button'
+                )}`}
                 href={this.props.linkToConnectionCreation}
                 as={'primary'}
                 className={'pull-right'}
@@ -99,7 +106,7 @@ export class Dashboard extends React.PureComponent<IIntegrationsPageProps> {
                 {this.props.i18nLinkCreateConnection}
               </ButtonLink>
               <Link
-                data-testid={'dashboard-connections'}
+                data-testid={`${toTestId('Dashboard', 'connections-link')}`}
                 to={this.props.linkToConnections}
                 className={'pull-right view'}
               >
diff --git a/app/ui-react/packages/ui/src/Data/DvConnection/DvConnectionCard.tsx b/app/ui-react/packages/ui/src/Data/DvConnection/DvConnectionCard.tsx
index 448294564..183a9cf6d 100644
--- a/app/ui-react/packages/ui/src/Data/DvConnection/DvConnectionCard.tsx
+++ b/app/ui-react/packages/ui/src/Data/DvConnection/DvConnectionCard.tsx
@@ -1,7 +1,7 @@
 import { Text } from '@patternfly/react-core';
 import { Card, Label } from 'patternfly-react';
 import * as React from 'react';
-
+import { toTestId } from '../../utils';
 import './DvConnectionCard.css';
 
 export enum ConnectionStatus {
@@ -68,7 +68,11 @@ export class DvConnectionCard extends React.PureComponent<
               </div>
               <div
                 className="dv-connection-card__title h2"
-                data-testid="dv-connection-card-title"
+                data-testid={`${toTestId(
+                  'DvConnectionCard',
+                  this.props.name,
+                  'title'
+                )}`}
               >
                 {this.props.name}
               </div>
diff --git a/app/ui-react/packages/ui/src/Data/DvConnection/DvConnectionsListView.tsx b/app/ui-react/packages/ui/src/Data/DvConnection/DvConnectionsListView.tsx
index 9b6ea5788..4c7f2440d 100644
--- a/app/ui-react/packages/ui/src/Data/DvConnection/DvConnectionsListView.tsx
+++ b/app/ui-react/packages/ui/src/Data/DvConnection/DvConnectionsListView.tsx
@@ -2,6 +2,7 @@ import * as H from '@syndesis/history';
 import * as React from 'react';
 import { ButtonLink, Container } from '../../Layout';
 import { IListViewToolbarProps, ListViewToolbar } from '../../Shared';
+import { toTestId } from '../../utils';
 
 export interface IDvConnectionsListViewProps extends IListViewToolbarProps {
   linkToConnectionCreate: H.LocationDescriptor;
@@ -17,7 +18,10 @@ export class DvConnectionsListView extends React.Component<
         <ListViewToolbar {...this.props}>
           <div className="form-group">
             <ButtonLink
-              data-testid={'dv-connections-list-view-create-connection'}
+              data-testid={`${toTestId(
+                'DvConnectionsListView',
+                'create-connection-button'
+              )}`}
               href={this.props.linkToConnectionCreate}
               as={'primary'}
             >
diff --git a/app/ui-react/packages/ui/src/Data/Virtualizations/SqlClientForm.tsx b/app/ui-react/packages/ui/src/Data/Virtualizations/SqlClientForm.tsx
index 37909034b..547d09d3e 100644
--- a/app/ui-react/packages/ui/src/Data/Virtualizations/SqlClientForm.tsx
+++ b/app/ui-react/packages/ui/src/Data/Virtualizations/SqlClientForm.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Container } from '../../Layout';
+import { toTestId } from '../../utils';
 
 export interface ISqlClientFormProps {
   /**
@@ -32,7 +33,7 @@ export class SqlClientForm extends React.Component<ISqlClientFormProps> {
             </div>
           </form>
           <button
-            data-testid={'sql-client-form-submit'}
+            data-testid={`${toTestId('SqlClientForm', 'submit-button')}`}
             type="button"
             className="btn btn-primary"
             onClick={this.props.handleSubmit}
diff --git a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/EmptyViewsState.tsx b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/EmptyViewsState.tsx
index f3e9bd40a..efefbf091 100644
--- a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/EmptyViewsState.tsx
+++ b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/EmptyViewsState.tsx
@@ -2,6 +2,7 @@ import * as H from '@syndesis/history';
 import { EmptyState, OverlayTrigger, Tooltip } from 'patternfly-react';
 import * as React from 'react';
 import { ButtonLink } from '../../../Layout';
+import { toTestId } from '../../../utils';
 import './EmptyViewsState.css';
 
 export interface IEmptyViewsStateProps {
@@ -28,7 +29,10 @@ export class EmptyViewsState extends React.Component<IEmptyViewsStateProps> {
             placement="top"
           >
             <ButtonLink
-              data-testid={'empty-view-state-import-views'}
+              data-testid={`${toTestId(
+                'EmptyViewsState',
+                'import-views-button'
+              )}`}
               href={this.props.linkImportViewsHRef}
               as={'default'}
               className={'empty-views-import'}
@@ -38,7 +42,10 @@ export class EmptyViewsState extends React.Component<IEmptyViewsStateProps> {
           </OverlayTrigger>
           <OverlayTrigger overlay={this.getCreateViewTooltip()} placement="top">
             <ButtonLink
-              data-testid={'empty-view-state-create-view'}
+              data-testid={`${toTestId(
+                'EmptyViewsState',
+                'create-view-button'
+              )}`}
               href={this.props.linkCreateViewHRef}
               as={'primary'}
             >
diff --git a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/SchemaNodeListItem.tsx b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/SchemaNodeListItem.tsx
index d78f8a947..32780ce15 100644
--- a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/SchemaNodeListItem.tsx
+++ b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/SchemaNodeListItem.tsx
@@ -1,5 +1,6 @@
 import { ListViewItem } from 'patternfly-react';
 import * as React from 'react';
+import { toTestId } from '../../../utils';
 
 export interface ISchemaNodeListItemProps {
   name: string;
@@ -57,7 +58,11 @@ export class SchemaNodeListItem extends React.Component<
         description={this.schemaDisplayPath(this.props.schemaPath)}
         checkboxInput={
           <input
-            data-testid={'schema-node-list-item-selected'}
+            data-testid={`${toTestId(
+              'SchemaNodeListItem',
+              this.props.name,
+              'selected-input'
+            )}`}
             type="checkbox"
             value=""
             defaultChecked={this.props.selected}
diff --git a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewCreateLayout.tsx b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewCreateLayout.tsx
index 0dde93301..4dc15b9d4 100644
--- a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewCreateLayout.tsx
+++ b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewCreateLayout.tsx
@@ -4,6 +4,7 @@ import * as H from '@syndesis/history';
 import classnames from 'classnames';
 import * as React from 'react';
 import { ButtonLink, Loader } from '../../../Layout';
+import { toTestId } from '../../../utils';
 import './ViewCreateLayout.css';
 
 /**
@@ -89,7 +90,7 @@ export const ViewCreateLayout: React.FunctionComponent<
       </div>
       <div className="wizard-pf-footer view-create-layout__footer">
         <ButtonLink
-          data-testid={'view-create-layout-back'}
+          data-testid={`${toTestId('ViewCreateLayout', 'back-button')}`}
           onClick={onBack}
           href={backHref}
           className={'wizard-pf-back'}
@@ -97,7 +98,7 @@ export const ViewCreateLayout: React.FunctionComponent<
           <i className="fa fa-angle-left" /> Back
         </ButtonLink>
         <ButtonLink
-          data-testid={'view-create-layout-next'}
+          data-testid={`${toTestId('ViewCreateLayout', 'next-button')}`}
           onClick={onNext}
           href={nextHref}
           as={'primary'}
@@ -114,7 +115,7 @@ export const ViewCreateLayout: React.FunctionComponent<
           )}
         </ButtonLink>
         <ButtonLink
-          data-testid={'view-create-layout-cancel'}
+          data-testid={`${toTestId('ViewCreateLayout', 'cancel-button')}`}
           onClick={onCancel}
           href={cancelHref}
           className={'wizard-pf-cancel'}
diff --git a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewInfoListItem.tsx b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewInfoListItem.tsx
index 287c1e0a9..dece269b0 100644
--- a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewInfoListItem.tsx
+++ b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewInfoListItem.tsx
@@ -1,5 +1,6 @@
 import { Label, ListViewInfoItem, ListViewItem } from 'patternfly-react';
 import * as React from 'react';
+import { toTestId } from '../../../utils';
 
 export interface IViewInfoListItemProps {
   name: string;
@@ -56,7 +57,11 @@ export class ViewInfoListItem extends React.Component<
         description={this.getNodePathStr()}
         checkboxInput={
           <input
-            data-testid={'view-info-list-item-selected'}
+            data-testid={`${toTestId(
+              'ViewInfoListItem',
+              this.props.name,
+              'selected-input'
+            )}`}
             type="checkbox"
             value=""
             defaultChecked={this.props.selected}
diff --git a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewList.tsx b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewList.tsx
index b5f2f83d7..5a3c05411 100644
--- a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewList.tsx
+++ b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewList.tsx
@@ -3,6 +3,7 @@ import { ListView, OverlayTrigger, Tooltip } from 'patternfly-react';
 import * as React from 'react';
 import { ButtonLink, PageSection } from '../../../Layout';
 import { IListViewToolbarProps, ListViewToolbar } from '../../../Shared';
+import { toTestId } from '../../../utils';
 import { EmptyViewsState } from './EmptyViewsState';
 import './ViewList.css';
 
@@ -38,7 +39,7 @@ export class ViewList extends React.Component<IViewsListProps> {
                 placement="top"
               >
                 <ButtonLink
-                  data-testid={'view-list-import-views'}
+                  data-testid={`${toTestId('ViewList', 'import-views-button')}`}
                   href={this.props.linkImportViewsHRef}
                   as={'default'}
                 >
@@ -50,7 +51,7 @@ export class ViewList extends React.Component<IViewsListProps> {
                 placement="top"
               >
                 <ButtonLink
-                  data-testid={'view-list-create-view'}
+                  data-testid={`${toTestId('ViewList', 'create-view-button')}`}
                   href={this.props.linkCreateViewHRef}
                   as={'primary'}
                 >
diff --git a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewListItem.tsx b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewListItem.tsx
index d028d6399..dfcc524aa 100644
--- a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewListItem.tsx
+++ b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewListItem.tsx
@@ -14,6 +14,7 @@ import {
   ConfirmationDialog,
   ConfirmationIconType,
 } from '../../../Shared';
+import { toTestId } from '../../../utils';
 
 export interface IViewListItemProps {
   viewDescription: string;
@@ -66,7 +67,15 @@ export class ViewListItem extends React.Component<
           actions={
             <div className="form-group">
               <OverlayTrigger overlay={this.getEditTooltip()} placement="top">
-                <ButtonLink href={this.props.viewEditPageLink} as={'default'}>
+                <ButtonLink
+                  data-testid={`${toTestId(
+                    'ViewListItem',
+                    this.props.viewName,
+                    'edit-button'
+                  )}`}
+                  href={this.props.viewEditPageLink}
+                  as={'default'}
+                >
                   {this.props.i18nEdit}
                 </ButtonLink>
               </OverlayTrigger>
diff --git a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewsImportLayout.tsx b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewsImportLayout.tsx
index 67a7ac222..c8184c4a9 100644
--- a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewsImportLayout.tsx
+++ b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewsImportLayout.tsx
@@ -4,6 +4,7 @@ import * as H from '@syndesis/history';
 import classnames from 'classnames';
 import * as React from 'react';
 import { ButtonLink, Loader } from '../../../Layout';
+import { toTestId } from '../../../utils';
 import './ViewsImportLayout.css';
 
 /**
@@ -92,7 +93,7 @@ export const ViewsImportLayout: React.FunctionComponent<
       </div>
       <div className="wizard-pf-footer views-import-layout__footer">
         <ButtonLink
-          data-testid={'views-import-layout-back'}
+          data-testid={`${toTestId('ViewsImportLayout', 'back-button')}`}
           onClick={onBack}
           href={backHref}
           className={'wizard-pf-back'}
@@ -100,7 +101,7 @@ export const ViewsImportLayout: React.FunctionComponent<
           <i className="fa fa-angle-left" /> Back
         </ButtonLink>
         <ButtonLink
-          data-testid={'views-import-layout-next'}
+          data-testid={`${toTestId('ViewsImportLayout', 'next-button')}`}
           onClick={isLastStep ? onCreateViews : onNext}
           href={nextHref}
           as={'primary'}
@@ -117,7 +118,7 @@ export const ViewsImportLayout: React.FunctionComponent<
           )}
         </ButtonLink>
         <ButtonLink
-          data-testid={'views-import-layout-cancel'}
+          data-testid={`${toTestId('ViewsImportLayout', 'cancel-button')}`}
           onClick={onCancel}
           href={cancelHref}
           className={'wizard-pf-cancel'}
diff --git a/app/ui-react/packages/ui/src/Data/Virtualizations/VirtualizationList.tsx b/app/ui-react/packages/ui/src/Data/Virtualizations/VirtualizationList.tsx
index 0294868a4..d2ba00d0a 100644
--- a/app/ui-react/packages/ui/src/Data/Virtualizations/VirtualizationList.tsx
+++ b/app/ui-react/packages/ui/src/Data/Virtualizations/VirtualizationList.tsx
@@ -12,6 +12,7 @@ import {
   ListViewToolbar,
   SimplePageHeader,
 } from '../../Shared';
+import { toTestId } from '../../utils';
 
 export interface IVirtualizationListProps extends IListViewToolbarProps {
   hasListData: boolean;
@@ -82,8 +83,10 @@ export class VirtualizationList extends React.Component<
                 placement="top"
               >
                <Button
-                  
-                  data-testid={'virtualization-list-import'}
+                  data-testid={`${toTestId(
+                    'VirtualizationList',
+                    'import-button'
+                  )}`}
                   bsStyle="default"
                   to={this.props.i18nImport}
                   onClick={this.handleImport}
@@ -96,7 +99,10 @@ export class VirtualizationList extends React.Component<
                 placement="top"
               >
                 <ButtonLink
-                  data-testid={'virtualization-list-create-virtualization'}
+                  data-testid={`${toTestId(
+                    'VirtualizationList',
+                    'create-virtualization-button'
+                  )}`}
                   href={this.props.linkCreateHRef}
                   as={'primary'}
                 >
@@ -122,7 +128,10 @@ export class VirtualizationList extends React.Component<
                   placement="top"
                 >
                   <ButtonLink
-                    data-testid={'virtualization-list-empty-state-create'}
+                    data-testid={`${toTestId(
+                      'VirtualizationList',
+                      'empty-state-create-button'
+                    )}`}
                     href={this.props.linkCreateHRef}
                     as={'primary'}
                   >
diff --git a/app/ui-react/packages/ui/src/Data/Virtualizations/VirtualizationListItem.tsx b/app/ui-react/packages/ui/src/Data/Virtualizations/VirtualizationListItem.tsx
index 8996e3c8d..680af5dd8 100644
--- a/app/ui-react/packages/ui/src/Data/Virtualizations/VirtualizationListItem.tsx
+++ b/app/ui-react/packages/ui/src/Data/Virtualizations/VirtualizationListItem.tsx
@@ -16,6 +16,7 @@ import {
   ConfirmationDialog,
   ConfirmationIconType,
 } from '../../Shared';
+import { toTestId } from '../../utils';
 import {
   BUILDING,
   CONFIGURING,
@@ -213,7 +214,11 @@ export class VirtualizationListItem extends React.Component<
               )}
               <OverlayTrigger overlay={this.getEditTooltip()} placement="top">
                 <ButtonLink
-                  data-testid={'virtualization-list-item-edit'}
+                  data-testid={`${toTestId(
+                    'VirtualizationListItem',
+                    this.props.virtualizationName,
+                    'edit-button'
+                  )}`}
                   href={this.props.detailsPageLink}
                   as={'primary'}
                 >
diff --git a/app/ui-react/packages/ui/src/Data/Virtualizations/VirtualizationPublishStatusDetail.tsx b/app/ui-react/packages/ui/src/Data/Virtualizations/VirtualizationPublishStatusDetail.tsx
index dda211b9a..e154cd7bc 100644
--- a/app/ui-react/packages/ui/src/Data/Virtualizations/VirtualizationPublishStatusDetail.tsx
+++ b/app/ui-react/packages/ui/src/Data/Virtualizations/VirtualizationPublishStatusDetail.tsx
@@ -1,7 +1,7 @@
 import { Spinner } from 'patternfly-react';
 import * as React from 'react';
 import { ProgressWithLink } from '../../Shared';
-
+import { toTestId } from '../../utils';
 import './VirtualizationPublishStatusDetail.css';
 
 export interface IVirtualizationPublishStatusDetailProps {
@@ -19,7 +19,10 @@ export class VirtualizationPublishStatusDetail extends React.Component<
   public render() {
     return (
       <div
-        data-testid="virtualization-publish-status-detail"
+        data-testid={`${toTestId(
+          'VirtualizationPublishStatusDetail',
+          'detail'
+        )}`}
         className={'virtualization-publish-status-detail'}
       >
         {this.props.stepText &&
diff --git a/app/ui-react/packages/ui/src/Integration/Activity/IntegrationDetailActivity.tsx b/app/ui-react/packages/ui/src/Integration/Activity/IntegrationDetailActivity.tsx
index 97db15302..8c0ce111d 100644
--- a/app/ui-react/packages/ui/src/Integration/Activity/IntegrationDetailActivity.tsx
+++ b/app/ui-react/packages/ui/src/Integration/Activity/IntegrationDetailActivity.tsx
@@ -2,7 +2,7 @@ import { Button, ListView } from 'patternfly-react';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { Container, PageSection } from '../../Layout';
-
+import { toTestId } from '../../utils';
 import './IntegrationDetailActivity.css';
 
 export interface IIntegrationDetailActivityProps {
@@ -24,7 +24,10 @@ export class IntegrationDetailActivity extends React.Component<
             {this.props.linkToOpenShiftLog && (
               <>
                 <Link
-                  data-testid={'integration-detail-activitiy-view-log'}
+                  data-testid={`${toTestId(
+                    'IntegrationDetailActivity',
+                    'view-log-link'
+                  )}`}
                   to={this.props.linkToOpenShiftLog}
                 >
                   {this.props.i18nViewLogOpenShift}
@@ -37,7 +40,10 @@ export class IntegrationDetailActivity extends React.Component<
             </span>
             &nbsp;&nbsp;
             <Button
-              data-testid={'integration-detail-activity-refresh'}
+              data-testid={`${toTestId(
+                'IntegrationDetailActivity',
+                'refresh-button'
+              )}`}
               onClick={this.props.onRefresh}
             >
               {this.props.i18nBtnRefresh}
diff --git a/app/ui-react/packages/ui/src/Integration/CiCd/CiCdEditDialog.tsx b/app/ui-react/packages/ui/src/Integration/CiCd/CiCdEditDialog.tsx
index 4326d12b2..01e8ae7df 100644
--- a/app/ui-react/packages/ui/src/Integration/CiCd/CiCdEditDialog.tsx
+++ b/app/ui-react/packages/ui/src/Integration/CiCd/CiCdEditDialog.tsx
@@ -2,6 +2,7 @@ import { Text, TextContent, TextVariants } from '@patternfly/react-core';
 import { Button } from 'patternfly-react';
 import * as React from 'react';
 import { Dialog } from '../../Shared';
+import { toTestId } from '../../utils';
 import { TagNameValidationError } from './CiCdUIModels';
 
 export interface ICiCdEditDialogProps {
@@ -98,13 +99,13 @@ export class CiCdEditDialog extends React.Component<
         footer={
           <>
             <Button
-              data-testid={'cicd-edit-dialog-cancel'}
+              data-testid={`${toTestId('CiCdEditDialog', 'cancel-button')}`}
               onClick={this.props.onHide}
             >
               {this.props.i18nCancelButtonText}
             </Button>
             <Button
-              data-testid={'cicd-edit-dialog-save'}
+              data-testid={`${toTestId('CiCdEditDialog', 'save-button')}`}
               bsStyle={'primary'}
               onClick={this.handleClick}
               disabled={
diff --git a/app/ui-react/packages/ui/src/Integration/CiCd/CiCdListEmptyState.tsx b/app/ui-react/packages/ui/src/Integration/CiCd/CiCdListEmptyState.tsx
index f8f0a26a5..df0e5db4d 100644
--- a/app/ui-react/packages/ui/src/Integration/CiCd/CiCdListEmptyState.tsx
+++ b/app/ui-react/packages/ui/src/Integration/CiCd/CiCdListEmptyState.tsx
@@ -1,5 +1,6 @@
 import { Button, EmptyState } from 'patternfly-react';
 import * as React from 'react';
+import { toTestId } from '../../utils';
 
 export interface ICiCdListEmptyState {
   onAddNew: () => void;
@@ -17,7 +18,7 @@ export class CiCdListEmptyState extends React.Component<ICiCdListEmptyState> {
         <EmptyState.Info>{this.props.i18nInfo}</EmptyState.Info>
         <EmptyState.Action>
           <Button
-            data-testid={'cicd-list-empty-state-add-new'}
+            data-testid={`${toTestId('CiCdListEmptyState', 'add-new-button')}`}
             bsStyle="primary"
             bsSize="large"
             onClick={this.props.onAddNew}
diff --git a/app/ui-react/packages/ui/src/Integration/CiCd/CiCdListItem.tsx b/app/ui-react/packages/ui/src/Integration/CiCd/CiCdListItem.tsx
index 36c9916f7..2dcc0efcb 100644
--- a/app/ui-react/packages/ui/src/Integration/CiCd/CiCdListItem.tsx
+++ b/app/ui-react/packages/ui/src/Integration/CiCd/CiCdListItem.tsx
@@ -1,6 +1,7 @@
 import { Button } from 'patternfly-react';
 import { ListViewItem } from 'patternfly-react';
 import * as React from 'react';
+import { toTestId } from '../../utils';
 
 export interface ICiCdListItemProps {
   onEditClicked: (name: string) => void;
@@ -38,13 +39,21 @@ export class CiCdListItem extends React.Component<ICiCdListItemProps> {
         actions={
           <div>
             <Button
-              data-testid={'cicd-list-item-edit'}
+              data-testid={`${toTestId(
+                'CiCdListItem',
+                this.props.name,
+                'create-button'
+              )}`}
               onClick={this.handleEditClicked}
             >
               {this.props.i18nEditButtonText}
             </Button>
             <Button
-              data-testid={'cicd-list-item-remove'}
+              data-testid={`${toTestId(
+                'CiCdListItem',
+                this.props.name,
+                'remove-button'
+              )}`}
               onClick={this.handleRemoveClicked}
             >
               {this.props.i18nRemoveButtonText}
diff --git a/app/ui-react/packages/ui/src/Integration/CiCd/CiCdListSkeleton.tsx b/app/ui-react/packages/ui/src/Integration/CiCd/CiCdListSkeleton.tsx
index d1a65c6b4..22dae3ef2 100644
--- a/app/ui-react/packages/ui/src/Integration/CiCd/CiCdListSkeleton.tsx
+++ b/app/ui-react/packages/ui/src/Integration/CiCd/CiCdListSkeleton.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import ContentLoader from 'react-content-loader';
+import { toTestId } from '../../utils';
 
 function getRandom(min: number, max: number) {
   return Math.random() * (max - min) + min;
@@ -34,7 +35,7 @@ export class CiCdListSkeleton extends React.PureComponent {
       <>
         <div
           className={'list-group-item'}
-          data-testid="environments-list-skeleton"
+          data-testid={`${toTestId('CiCdListSkeleton', 'item-0')}`}
         >
           <div>
             <ItemSkeleton />
@@ -42,7 +43,7 @@ export class CiCdListSkeleton extends React.PureComponent {
         </div>
         <div
           className={'list-group-item'}
-          data-testid="environments-list-skeleton"
+          data-testid={`${toTestId('CiCdListSkeleton', 'item-1')}`}
         >
           <div>
             <ItemSkeleton />
@@ -50,7 +51,7 @@ export class CiCdListSkeleton extends React.PureComponent {
         </div>
         <div
           className={'list-group-item'}
-          data-testid="environments-list-skeleton"
+          data-testid={`${toTestId('CiCdListSkeleton', 'item-2')}`}
         >
           <div>
             <ItemSkeleton />
diff --git a/app/ui-react/packages/ui/src/Integration/CiCd/CiCdListView.tsx b/app/ui-react/packages/ui/src/Integration/CiCd/CiCdListView.tsx
index a9ae6c4f1..284eff5e4 100644
--- a/app/ui-react/packages/ui/src/Integration/CiCd/CiCdListView.tsx
+++ b/app/ui-react/packages/ui/src/Integration/CiCd/CiCdListView.tsx
@@ -2,6 +2,7 @@ import { Button } from 'patternfly-react';
 import * as React from 'react';
 import { PageSection } from '../../Layout';
 import { IListViewToolbarProps, ListViewToolbar } from '../../Shared';
+import { toTestId } from '../../utils';
 
 export interface ICiCdListViewProps extends IListViewToolbarProps {
   i18nAddNewButtonText: string;
@@ -16,7 +17,7 @@ export class CiCdListView extends React.Component<ICiCdListViewProps> {
           <div className="form-group">
             {this.props.resultsCount !== 0 && (
               <Button
-                data-testid={'cicd-list-view-add-new'}
+                data-testid={`${toTestId('CiCdListView', 'add-new-button')}`}
                 className="btn btn-primary"
                 onClick={this.props.onAddNew}
               >
diff --git a/app/ui-react/packages/ui/src/Integration/CiCd/TagIntegrationDialog.tsx b/app/ui-react/packages/ui/src/Integration/CiCd/TagIntegrationDialog.tsx
index d82a2447f..06367bcec 100644
--- a/app/ui-react/packages/ui/src/Integration/CiCd/TagIntegrationDialog.tsx
+++ b/app/ui-react/packages/ui/src/Integration/CiCd/TagIntegrationDialog.tsx
@@ -1,6 +1,7 @@
 import { Button } from 'patternfly-react';
 import * as React from 'react';
 import { Dialog } from '../../Shared';
+import { toTestId } from '../../utils';
 import { ITagIntegrationEntry } from './CiCdUIModels';
 
 export interface ITagIntegrationDialogChildrenProps {
@@ -61,13 +62,16 @@ export class TagIntegrationDialog extends React.Component<
         footer={
           <>
             <Button
-              data-testid={'tag-integration-dialog-cancel'}
+              data-testid={`${toTestId(
+                'TagIntegrationDialog',
+                'cancel-button'
+              )}`}
               onClick={this.props.onHide}
             >
               {this.props.i18nCancelButtonText}
             </Button>
             <Button
-              data-testid={'tag-integration-dialog-save'}
+              data-testid={`${toTestId('TagIntegrationDialog', 'save-button')}`}
               bsStyle={'primary'}
               onClick={this.handleClick}
               disabled={this.state.disableSave}
diff --git a/app/ui-react/packages/ui/src/Integration/CiCd/TagIntegrationDialogEmptyState.tsx b/app/ui-react/packages/ui/src/Integration/CiCd/TagIntegrationDialogEmptyState.tsx
index 76c9dd091..3322d71f0 100644
--- a/app/ui-react/packages/ui/src/Integration/CiCd/TagIntegrationDialogEmptyState.tsx
+++ b/app/ui-react/packages/ui/src/Integration/CiCd/TagIntegrationDialogEmptyState.tsx
@@ -2,6 +2,7 @@ import * as H from '@syndesis/history';
 import { EmptyState } from 'patternfly-react';
 import * as React from 'react';
 import { ButtonLink } from '../../Layout';
+import { toTestId } from '../../utils';
 
 export interface ITagIntegrationDialogEmptyStateProps {
   href: H.LocationDescriptor;
@@ -28,7 +29,10 @@ export class TagIntegrationDialogEmptyState extends React.Component<
         <EmptyState.Info>{this.props.i18nInfo}</EmptyState.Info>
         <EmptyState.Action>
           <ButtonLink
-            data-testid={'tag-integration-dialog-empty-state-manage'}
+            data-testid={`${toTestId(
+              'TagIntegrationDialogEmptyState',
+              'manage-cicd-button'
+            )}`}
             as="primary"
             size="lg"
             href={this.props.href}
diff --git a/app/ui-react/packages/ui/src/Integration/CiCd/TagIntegrationListItem.tsx b/app/ui-react/packages/ui/src/Integration/CiCd/TagIntegrationListItem.tsx
index 31c298bc7..d51ea0a3d 100644
--- a/app/ui-react/packages/ui/src/Integration/CiCd/TagIntegrationListItem.tsx
+++ b/app/ui-react/packages/ui/src/Integration/CiCd/TagIntegrationListItem.tsx
@@ -1,5 +1,6 @@
 import { ListViewItem } from 'patternfly-react';
 import * as React from 'react';
+import { toTestId } from '../../utils';
 
 export interface ITagIntegrationListItemProps {
   selected: boolean;
@@ -22,7 +23,11 @@ export class TagIntegrationListItem extends React.Component<
       <ListViewItem
         checkboxInput={
           <input
-            data-testid={'tag-integration-list-item-selected'}
+            data-testid={`${toTestId(
+              'TagIntegrationListItem',
+              this.props.name,
+              'selected-input'
+            )}`}
             type="checkbox"
             defaultChecked={this.props.selected}
             onChange={this.handleChange}
diff --git a/app/ui-react/packages/ui/src/Integration/Details/IntegrationActions.tsx b/app/ui-react/packages/ui/src/Integration/Details/IntegrationActions.tsx
index 3e0d05481..e902d741f 100644
--- a/app/ui-react/packages/ui/src/Integration/Details/IntegrationActions.tsx
+++ b/app/ui-react/packages/ui/src/Integration/Details/IntegrationActions.tsx
@@ -3,6 +3,7 @@ import { DropdownKebab } from 'patternfly-react';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { ButtonLink } from '../../Layout';
+import { toTestId } from '../../utils';
 
 export interface IIntegrationAction {
   href?: H.LocationDescriptor;
@@ -23,7 +24,11 @@ export class IntegrationActions extends React.Component<
     return (
       <>
         <ButtonLink
-          data-testid={'integration-actions-view'}
+          data-testid={`${toTestId(
+            'IntegrationActions',
+            this.props.integrationId,
+            'view-button'
+          )}`}
           className="view-integration-btn"
           href={this.props.detailsHref}
           as={'default'}
@@ -38,7 +43,11 @@ export class IntegrationActions extends React.Component<
             <li role={'presentation'} key={idx}>
               {a.href ? (
                 <Link
-                  data-testid={`integration-actions-${idx}`}
+                  data-testid={`${toTestId(
+                    'IntegrationActions',
+                    this.props.integrationId,
+                    a.label.toString()
+                  )}`}
                   to={a.href}
                   onClick={a.onClick}
                   role={'menuitem'}
@@ -48,7 +57,11 @@ export class IntegrationActions extends React.Component<
                 </Link>
               ) : (
                 <a
-                  data-testid={`integration-actions-${idx}`}
+                  data-testid={`${toTestId(
+                    'IntegrationActions',
+                    this.props.integrationId,
+                    a.label.toString()
+                  )}`}
                   href={'javascript:void(0)'}
                   onClick={a.onClick}
                   role={'menuitem'}
diff --git a/app/ui-react/packages/ui/src/Integration/Details/IntegrationDetailBreadcrumb.tsx b/app/ui-react/packages/ui/src/Integration/Details/IntegrationDetailBreadcrumb.tsx
index 6bf2d1ee8..4fe4e8652 100644
--- a/app/ui-react/packages/ui/src/Integration/Details/IntegrationDetailBreadcrumb.tsx
+++ b/app/ui-react/packages/ui/src/Integration/Details/IntegrationDetailBreadcrumb.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { Breadcrumb, ButtonLink } from '../../Layout';
 import { IMenuActions } from '../../Shared';
+import { toTestId } from '../../utils';
 import './IntegrationDetailBreadcrumb.css';
 
 export interface IIntegrationDetailBreadcrumbProps {
@@ -30,14 +31,20 @@ export class IntegrationDetailBreadcrumb extends React.Component<
         actions={
           <>
             <ButtonLink
-              data-testid={'integration-detail-breadcrumb-export'}
+              data-testid={`${toTestId(
+                'IntegrationDetailBreadcrumb',
+                'export-button'
+              )}`}
               to={this.props.exportHref}
               onClick={this.props.exportAction}
               children={this.props.exportLabel}
             />
             &nbsp;&nbsp;
             <ButtonLink
-              data-testid={'integration-detail-breadcrumb-edit'}
+              data-testid={`${toTestId(
+                'IntegrationDetailBreadcrumb',
+                'edit-button'
+              )}`}
               className="btn btn-primary"
               href={this.props.editHref}
               children={this.props.editLabel}
@@ -51,7 +58,10 @@ export class IntegrationDetailBreadcrumb extends React.Component<
                     <li role={'presentation'} key={idx}>
                       {a.href ? (
                         <Link
-                          data-testid={`integration-detail-breadcrumb-${idx}`}
+                          data-testid={`${toTestId(
+                            'IntegrationDetailBreadcrumb',
+                            a.label.toString()
+                          )}`}
                           to={a.href}
                           onClick={a.onClick}
                           role={'menuitem'}
@@ -61,7 +71,10 @@ export class IntegrationDetailBreadcrumb extends React.Component<
                         </Link>
                       ) : (
                         <a
-                          data-testid={`integration-detail-breadcrumb-${idx}`}
+                          data-testid={`${toTestId(
+                            'IntegrationDetailBreadcrumb',
+                            a.label.toString()
+                          )}`}
                           href={'javascript:void(0)'}
                           onClick={a.onClick}
                           role={'menuitem'}
@@ -79,7 +92,10 @@ export class IntegrationDetailBreadcrumb extends React.Component<
       >
         <span>
           <Link
-            data-testid={'integration-detail-breadcrumb-home'}
+            data-testid={`${toTestId(
+              'IntegrationDetailBreadcrumb',
+              'home-link'
+            )}`}
             to={this.props.homeHref!}
           >
             {this.props.i18nHome}
@@ -87,7 +103,10 @@ export class IntegrationDetailBreadcrumb extends React.Component<
         </span>
         <span>
           <Link
-            data-testid={'integration-detail-breadcrumb-integrations'}
+            data-testid={`${toTestId(
+              'IntegrationDetailBreadcrumb',
+              'integrations-link'
+            )}`}
             to={this.props.integrationsHref!}
           >
             {this.props.i18nIntegrations}
diff --git a/app/ui-react/packages/ui/src/Integration/Details/IntegrationDetailHistoryListView.tsx b/app/ui-react/packages/ui/src/Integration/Details/IntegrationDetailHistoryListView.tsx
index cb82ac986..c73a326b3 100644
--- a/app/ui-react/packages/ui/src/Integration/Details/IntegrationDetailHistoryListView.tsx
+++ b/app/ui-react/packages/ui/src/Integration/Details/IntegrationDetailHistoryListView.tsx
@@ -2,6 +2,7 @@ import * as H from '@syndesis/history';
 import { Grid, ListView, ListViewItem } from 'patternfly-react';
 import * as React from 'react';
 import { ButtonLink, PageSection } from '../../Layout';
+import { toTestId } from '../../utils';
 import './IntegrationDetailHistoryListView.css';
 
 export interface IIntegrationDetailHistoryListViewProps {
@@ -43,17 +44,19 @@ export class IntegrationDetailHistoryListView extends React.Component<
                   actions={
                     <>
                       <ButtonLink
-                        data-testid={
-                          'integration-detail-history-list-view-publish'
-                        }
+                        data-testid={`${toTestId(
+                          'IntegrationDetailHistoryListView',
+                          'publish-button'
+                        )}`}
                         to={this.props.publishHref}
                         onClick={this.props.publishAction}
                         children={this.props.publishLabel}
                       />
                       <ButtonLink
-                        data-testid={
-                          'integration-detail-history-list-view-edit'
-                        }
+                        data-testid={`${toTestId(
+                          'IntegrationDetailHistoryListView',
+                          'edit-button'
+                        )}`}
                         href={this.props.editHref}
                         children={this.props.editLabel}
                       />
diff --git a/app/ui-react/packages/ui/src/Integration/Details/IntegrationDetailHistoryListViewItemActions.tsx b/app/ui-react/packages/ui/src/Integration/Details/IntegrationDetailHistoryListViewItemActions.tsx
index a7ecedd85..5014483ec 100644
--- a/app/ui-react/packages/ui/src/Integration/Details/IntegrationDetailHistoryListViewItemActions.tsx
+++ b/app/ui-react/packages/ui/src/Integration/Details/IntegrationDetailHistoryListViewItemActions.tsx
@@ -2,6 +2,7 @@ import { DropdownKebab } from 'patternfly-react';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { IMenuActions } from '../../Shared';
+import { toTestId } from '../../utils';
 
 export interface IIntegrationDetailHistoryListViewItemActionsProps {
   actions: IMenuActions[];
@@ -22,7 +23,10 @@ export class IntegrationDetailHistoryListViewItemActions extends React.Component
             <li role={'presentation'} key={index}>
               {a.href ? (
                 <Link
-                  data-testid={`integration-detail-history-list-view-item-actions-${index}`}
+                  data-testid={`${toTestId(
+                    'IntegrationDetailHistoryListViewItemActions',
+                    a.label.toString()
+                  )}`}
                   to={a.href}
                   onClick={a.onClick}
                   role={'menuitem'}
@@ -32,7 +36,10 @@ export class IntegrationDetailHistoryListViewItemActions extends React.Component
                 </Link>
               ) : (
                 <a
-                  data-testid={`integration-detail-history-list-view-item-actions-${index}`}
+                  data-testid={`${toTestId(
+                    'IntegrationDetailHistoryListViewItemActions',
+                    a.label.toString()
+                  )}`}
                   href={'javascript:void(0)'}
                   onClick={a.onClick}
                   role={'menuitem'}
diff --git a/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorNothingToConfigure.tsx b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorNothingToConfigure.tsx
index c985728f4..c3b88df6f 100644
--- a/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorNothingToConfigure.tsx
+++ b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorNothingToConfigure.tsx
@@ -2,6 +2,7 @@ import { Text } from '@patternfly/react-core';
 import * as H from '@syndesis/history';
 import * as React from 'react';
 import { ButtonLink, Container, PageSection } from '../../Layout';
+import { toTestId } from '../../utils';
 
 export interface IIntegrationEditorNothingToConfigureProps {
   /**
@@ -37,7 +38,10 @@ export class IntegrationEditorNothingToConfigure extends React.Component<
               </div>
               <div className="card-pf-footer">
                 <ButtonLink
-                  data-testid={'integration-editor-nothing-to-configure-back'}
+                  data-testid={`${toTestId(
+                    'IntegrationEditorNothingToConfigure',
+                    'back-button'
+                  )}`}
                   href={this.props.backActionHref}
                 >
                   <i className={'fa fa-chevron-left'} />{' '}
@@ -45,7 +49,10 @@ export class IntegrationEditorNothingToConfigure extends React.Component<
                 </ButtonLink>
                 &nbsp;
                 <ButtonLink
-                  data-testid={'integration-editor-nothing-to-configure-next'}
+                  data-testid={`${toTestId(
+                    'IntegrationEditorNothingToConfigure',
+                    'next-button'
+                  )}`}
                   onClick={this.props.submitForm}
                   as={'primary'}
                 >
diff --git a/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorStepsListItem.tsx b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorStepsListItem.tsx
index ef2353e3d..4769c00cf 100644
--- a/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorStepsListItem.tsx
+++ b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorStepsListItem.tsx
@@ -1,6 +1,7 @@
 import { ListView, Overlay, Popover } from 'patternfly-react';
 import * as React from 'react';
 import { ButtonLink } from '../../Layout';
+import { toTestId } from '../../utils';
 
 export interface IIntegrationEditorStepsListItemProps {
   stepName: string;
@@ -39,7 +40,11 @@ export const IntegrationEditorStepsListItem: React.FunctionComponent<
                 {props.shape}
                 {props.showWarning && (
                   <ButtonLink
-                    data-testid={'integration-editor-steps-list-item-warning'}
+                    data-testid={`${toTestId(
+                      'IntegrationEditorStepsListItem',
+                      props.stepName,
+                      'warning-button'
+                    )}`}
                     as={'link'}
                     onClick={toggleWarningPopover}
                     ref={itemRef}
diff --git a/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorWizard.tsx b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorWizard.tsx
index 5080188cc..1c39ba238 100644
--- a/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorWizard.tsx
+++ b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorWizard.tsx
@@ -4,6 +4,7 @@ import * as H from '@syndesis/history';
 import classnames from 'classnames';
 import * as React from 'react';
 import { ButtonLink, Loader } from '../../Layout';
+import { toTestId } from '../../utils';
 import './IntegrationEditorWizard.css';
 
 /**
@@ -95,7 +96,7 @@ export const IntegrationEditorWizard: React.FunctionComponent<
       </div>
       <div className="wizard-pf-footer integration-editor-wizard__footer">
         <ButtonLink
-          data-testid={'integration-editor-wizard-back'}
+          data-testid={`${toTestId('IntegrationEditorWizard', 'back-button')}`}
           onClick={onBack}
           href={backHref}
           className={'wizard-pf-back'}
@@ -103,7 +104,7 @@ export const IntegrationEditorWizard: React.FunctionComponent<
           <i className="fa fa-angle-left" /> Back
         </ButtonLink>
         <ButtonLink
-          data-testid={'integration-editor-wizard-next'}
+          data-testid={`${toTestId('IntegrationEditorWizard', 'next-button')}`}
           onClick={onNext}
           href={nextHref}
           as={'primary'}
@@ -120,7 +121,10 @@ export const IntegrationEditorWizard: React.FunctionComponent<
           )}
         </ButtonLink>
         <ButtonLink
-          data-testid={'integration-editor-wizard-cancel'}
+          data-testid={`${toTestId(
+            'IntegrationEditorWizard',
+            'cancel-button'
+          )}`}
           onClick={onCancel}
           href={cancelHref}
           className={'wizard-pf-cancel'}
diff --git a/app/ui-react/packages/ui/src/Integration/Editor/endpoint/DescribeDataShapeForm.tsx b/app/ui-react/packages/ui/src/Integration/Editor/endpoint/DescribeDataShapeForm.tsx
index 6c9dc2398..c8e0118f9 100644
--- a/app/ui-react/packages/ui/src/Integration/Editor/endpoint/DescribeDataShapeForm.tsx
+++ b/app/ui-react/packages/ui/src/Integration/Editor/endpoint/DescribeDataShapeForm.tsx
@@ -8,6 +8,7 @@ import {
 import * as React from 'react';
 import { ButtonLink, Container, PageSection } from '../../../Layout';
 import { TextEditor } from '../../../Shared';
+import { toTestId } from '../../../utils';
 
 const kinds = [
   {
@@ -75,7 +76,10 @@ export class DescribeDataShapeForm extends React.Component<
                       <FieldLevelHelp content={this.props.i18nSelectTypeHelp} />
                     </ControlLabel>
                     <FormControl
-                      data-testid={'describe-data-shape-form-kind-select'}
+                      data-testid={`${toTestId(
+                        'DescribeDataShapeForm',
+                        'kind-input'
+                      )}`}
                       componentClass="select"
                       value={this.props.kind}
                       onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
@@ -123,7 +127,10 @@ export class DescribeDataShapeForm extends React.Component<
                           />
                         </ControlLabel>
                         <FormControl
-                          data-testid={'describe-data-shape-form-name-text'}
+                          data-testid={`${toTestId(
+                            'DescribeDataShapeForm',
+                            'name-input'
+                          )}`}
                           type="text"
                           value={this.props.name}
                           onChange={(
@@ -142,9 +149,10 @@ export class DescribeDataShapeForm extends React.Component<
                         </ControlLabel>
                         <FormControl
                           type="text"
-                          data-testid={
-                            'describe-data-shape-form-description-text'
-                          }
+                          data-testid={`${toTestId(
+                            'DescribeDataShapeForm',
+                            'description-input'
+                          )}`}
                           value={this.props.description}
                           onChange={(
                             event: React.ChangeEvent<HTMLInputElement>
@@ -161,7 +169,10 @@ export class DescribeDataShapeForm extends React.Component<
                 {this.props.backActionHref && (
                   <>
                     <ButtonLink
-                      data-testid={'describe-data-shape-form-back-button'}
+                      data-testid={`${toTestId(
+                        'DescribeDataShapeForm',
+                        'back-button'
+                      )}`}
                       href={this.props.backActionHref}
                     >
                       <i className={'fa fa-chevron-left'} />{' '}
@@ -171,7 +182,10 @@ export class DescribeDataShapeForm extends React.Component<
                   </>
                 )}
                 <ButtonLink
-                  data-testid={'describe-data-shape-form-next-button'}
+                  data-testid={`${toTestId(
+                    'DescribeDataShapeForm',
+                    'next-button'
+                  )}`}
                   onClick={this.props.onNext}
                   as={'primary'}
                 >
diff --git a/app/ui-react/packages/ui/src/Integration/Editor/template/TemplateStepCard.tsx b/app/ui-react/packages/ui/src/Integration/Editor/template/TemplateStepCard.tsx
index 8c9f08e33..67014121e 100644
--- a/app/ui-react/packages/ui/src/Integration/Editor/template/TemplateStepCard.tsx
+++ b/app/ui-react/packages/ui/src/Integration/Editor/template/TemplateStepCard.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ButtonLink, Container, PageSection } from '../../../Layout';
+import { toTestId } from '../../../utils';
 
 export interface ITemplateStepCardProps {
   i18nDone: string;
@@ -19,7 +20,7 @@ export class TemplateStepCard extends React.Component<ITemplateStepCardProps> {
               </div>
               <div className="card-pf-footer">
                 <ButtonLink
-                  data-testid={'template-step-card-done'}
+                  data-testid={`${toTestId('TemplateStepCard', 'done-button')}`}
                   onClick={this.props.submitForm}
                   disabled={!this.props.isValid}
                   as={'primary'}
diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationFlowAddStep.tsx b/app/ui-react/packages/ui/src/Integration/IntegrationFlowAddStep.tsx
index 24f03da6e..4e31d26b6 100644
--- a/app/ui-react/packages/ui/src/Integration/IntegrationFlowAddStep.tsx
+++ b/app/ui-react/packages/ui/src/Integration/IntegrationFlowAddStep.tsx
@@ -1,6 +1,7 @@
 import * as H from '@syndesis/history';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import { toTestId } from '../utils';
 import './IntegrationFlowAddStep.css';
 
 export interface IIntegrationFlowAddStepProps {
@@ -66,7 +67,10 @@ export class IntegrationFlowAddStep extends React.Component<
             ref={this.containerRef}
           >
             <Link
-              data-testid={'integration-flow-add-step-add-step'}
+              data-testid={`${toTestId(
+                'IntegrationFlowAddStep',
+                'add-step-link'
+              )}`}
               to={this.props.addStepHref}
             >
               <i className="fa fa-plus" title={this.props.i18nAddStep} />
diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationStatusDetail.tsx b/app/ui-react/packages/ui/src/Integration/IntegrationStatusDetail.tsx
index 7edca7ddd..e38cb2648 100644
--- a/app/ui-react/packages/ui/src/Integration/IntegrationStatusDetail.tsx
+++ b/app/ui-react/packages/ui/src/Integration/IntegrationStatusDetail.tsx
@@ -1,6 +1,7 @@
 import { Spinner } from 'patternfly-react';
 import * as React from 'react';
 import { ProgressWithLink } from '../Shared/ProgressWithLink';
+import { toTestId } from '../utils';
 import { IntegrationState, PUBLISHED, UNPUBLISHED } from './models';
 
 import './IntegrationStatusDetail.css';
@@ -32,7 +33,7 @@ export class IntegrationStatusDetail extends React.Component<
     }
     return (
       <div
-        data-testid="integration-status-detail"
+        data-testid={`${toTestId('IntegrationStatusDetail', 'status-detail')}`}
         className={'integration-status-detail'}
       >
         {this.props.value && this.props.currentStep && this.props.totalSteps ? (
diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationVerticalFlow.tsx b/app/ui-react/packages/ui/src/Integration/IntegrationVerticalFlow.tsx
index 4bbc46dfb..0bccc23f6 100644
--- a/app/ui-react/packages/ui/src/Integration/IntegrationVerticalFlow.tsx
+++ b/app/ui-react/packages/ui/src/Integration/IntegrationVerticalFlow.tsx
@@ -1,6 +1,7 @@
 import classnames from 'classnames';
 import * as React from 'react';
 import { ButtonLink } from '../Layout';
+import { toTestId } from '../utils';
 import './IntegrationVerticalFlow.css';
 
 export interface IIntegrationVerticalFlowProps {
@@ -38,7 +39,10 @@ export const IntegrationVerticalFlow: React.FunctionComponent<
     >
       <div className="integration-vertical-flow__expand">
         <ButtonLink
-          data-testid={'integration-vertical-flow-expand-collapse'}
+          data-testid={`${toTestId(
+            'IntegrationVerticalFlow',
+            'expand-collapse-button'
+          )}`}
           className="integration-vertical-flow__toggle"
           onClick={toggleExpanded}
           as={'link'}
diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationsListItemUnreadable.tsx b/app/ui-react/packages/ui/src/Integration/IntegrationsListItemUnreadable.tsx
index 87f081d07..a9d2816e7 100644
--- a/app/ui-react/packages/ui/src/Integration/IntegrationsListItemUnreadable.tsx
+++ b/app/ui-react/packages/ui/src/Integration/IntegrationsListItemUnreadable.tsx
@@ -1,6 +1,7 @@
 import { ListView } from 'patternfly-react';
 import * as React from 'react';
 import { ButtonLink } from '../Layout';
+import { toTestId } from '../utils';
 
 export interface IIntegrationsListItemUnreadableProps {
   integrationName: string;
@@ -17,7 +18,10 @@ export const IntegrationsListItemUnreadable: React.FC<
       heading={integrationName}
       actions={
         <ButtonLink
-          data-testid={'integrations-list-item-unreadable-json'}
+          data-testid={`${toTestId(
+            'IntegrationsListItemUnreadable',
+            'json-button'
+          )}`}
           onClick={onClick}
         >
           Integration JSON
diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationsListSkeleton.tsx b/app/ui-react/packages/ui/src/Integration/IntegrationsListSkeleton.tsx
index aa5becdf4..e82b74b41 100644
--- a/app/ui-react/packages/ui/src/Integration/IntegrationsListSkeleton.tsx
+++ b/app/ui-react/packages/ui/src/Integration/IntegrationsListSkeleton.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import ContentLoader from 'react-content-loader';
+import { toTestId } from '../utils';
 
 function getRandom(min: number, max: number) {
   return Math.random() * (max - min) + min;
@@ -43,7 +44,7 @@ export class IntegrationsListSkeleton extends React.PureComponent {
       <>
         <div
           className={'list-group-item'}
-          data-testid="integration-list-skeleton"
+          data-testid={`${toTestId('IntegrationsListSkeleton', 'item-0')}`}
         >
           <div>
             <ItemSkeleton />
@@ -51,7 +52,7 @@ export class IntegrationsListSkeleton extends React.PureComponent {
         </div>
         <div
           className={'list-group-item'}
-          data-testid="integration-list-skeleton"
+          data-testid={`${toTestId('IntegrationsListSkeleton', 'item-1')}`}
         >
           <div>
             <ItemSkeleton />
@@ -59,7 +60,7 @@ export class IntegrationsListSkeleton extends React.PureComponent {
         </div>
         <div
           className={'list-group-item'}
-          data-testid="integration-list-skeleton"
+          data-testid={`${toTestId('IntegrationsListSkeleton', 'item-2')}`}
         >
           <div>
             <ItemSkeleton />
diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationsListView.tsx b/app/ui-react/packages/ui/src/Integration/IntegrationsListView.tsx
index 53f2c1428..3a8e13fb6 100644
--- a/app/ui-react/packages/ui/src/Integration/IntegrationsListView.tsx
+++ b/app/ui-react/packages/ui/src/Integration/IntegrationsListView.tsx
@@ -6,6 +6,7 @@ import {
   ListViewToolbar,
   SimplePageHeader,
 } from '../Shared';
+import { toTestId } from '../utils';
 
 export interface IIntegrationsListViewProps extends IListViewToolbarProps {
   linkToManageCiCd: H.LocationDescriptor;
@@ -32,19 +33,28 @@ export class IntegrationsListView extends React.Component<
           <ListViewToolbar {...this.props}>
             <div className="form-group">
               <ButtonLink
-                data-testid={'integrations-list-view-manage-cicd'}
+                data-testid={`${toTestId(
+                  'IntegrationsListView',
+                  'manage-cicd-button'
+                )}`}
                 href={this.props.linkToManageCiCd}
               >
                 {this.props.i18nManageCiCd}
               </ButtonLink>
               <ButtonLink
-                data-testid={'integrations-list-view-import'}
+                data-testid={`${toTestId(
+                  'IntegrationsListView',
+                  'import-button'
+                )}`}
                 href={this.props.linkToIntegrationImport}
               >
                 {this.props.i18nImport}
               </ButtonLink>
               <ButtonLink
-                data-testid={'integrations-list-view-create'}
+                data-testid={`${toTestId(
+                  'IntegrationsListView',
+                  'create-button'
+                )}`}
                 href={this.props.linkToIntegrationCreation}
                 as={'primary'}
               >
diff --git a/app/ui-react/packages/ui/src/Settings/OAuth/OAuthAppExpanderBody.tsx b/app/ui-react/packages/ui/src/Settings/OAuth/OAuthAppExpanderBody.tsx
index ba2275503..6b7d876c3 100644
--- a/app/ui-react/packages/ui/src/Settings/OAuth/OAuthAppExpanderBody.tsx
+++ b/app/ui-react/packages/ui/src/Settings/OAuth/OAuthAppExpanderBody.tsx
@@ -1,5 +1,6 @@
 import { Alert, Button, Col, Row } from 'patternfly-react';
 import * as React from 'react';
+import { toTestId } from '../../utils';
 
 export interface IOAuthAppExpanderBodyProps {
   showSuccess: boolean;
@@ -42,7 +43,10 @@ export class OAuthAppExpanderBody extends React.Component<
           <Col xs={12} md={8}>
             <>
               <Button
-                data-testid={'oauth-app-expander-body-save'}
+                data-testid={`${toTestId(
+                  'OAuthAppExpanderBody',
+                  'save-button'
+                )}`}
                 bsStyle="primary"
                 onClick={this.props.onSave}
                 disabled={this.props.disableSave}
@@ -50,7 +54,10 @@ export class OAuthAppExpanderBody extends React.Component<
                 {this.props.i18nSaveButtonText}
               </Button>{' '}
               <Button
-                data-testid={'oauth-app-expander-body-remove'}
+                data-testid={`${toTestId(
+                  'OAuthAppExpanderBody',
+                  'remove-button'
+                )}`}
                 onClick={this.props.onRemove}
                 disabled={this.props.disableRemove}
               >
diff --git a/app/ui-react/packages/ui/src/Shared/AggregatedMetricCard.tsx b/app/ui-react/packages/ui/src/Shared/AggregatedMetricCard.tsx
index 04b174cdc..2afe75f7a 100644
--- a/app/ui-react/packages/ui/src/Shared/AggregatedMetricCard.tsx
+++ b/app/ui-react/packages/ui/src/Shared/AggregatedMetricCard.tsx
@@ -6,6 +6,7 @@ import {
   Icon,
 } from 'patternfly-react';
 import * as React from 'react';
+import { toTestId } from '../utils';
 
 export interface IAggregatedMetricProps {
   title: string;
@@ -26,23 +27,35 @@ export class AggregatedMetricCard extends React.PureComponent<
       <Card accented={true} aggregated={true} matchHeight={true}>
         <Card.Title>
           <AggregateStatusCount>
-            <span data-testid="aggregate-total-count">
+            <span
+              data-testid={`${toTestId('AggregatedMetricCard', 'total-count')}`}
+            >
               {this.formatNumber(this.props.total)}
             </span>
-            <span data-testid="aggregate-title"> {this.props.title}</span>
+            <span data-testid={`${toTestId('AggregatedMetricCard', 'title')}`}>
+              {' '}
+              {this.props.title}
+            </span>
           </AggregateStatusCount>
         </Card.Title>
         <Card.Body>
           <AggregateStatusNotifications>
             <AggregateStatusNotification>
               <Icon type="pf" name="ok" />
-              <span data-testid="aggregate-ok-count">
+              <span
+                data-testid={`${toTestId('AggregatedMetricCard', 'ok-count')}`}
+              >
                 {this.formatNumber(this.props.ok)}
               </span>{' '}
             </AggregateStatusNotification>
             <AggregateStatusNotification>
               <Icon type="pf" name="error-circle-o" />
-              <span data-testid="aggregate-error-count">
+              <span
+                data-testid={`${toTestId(
+                  'AggregatedMetricCard',
+                  'error-count'
+                )}`}
+              >
                 {this.formatNumber(this.props.error)}
               </span>
             </AggregateStatusNotification>
diff --git a/app/ui-react/packages/ui/src/Shared/DndFileChooser.tsx b/app/ui-react/packages/ui/src/Shared/DndFileChooser.tsx
index bf58d3f64..f6abbaa9a 100644
--- a/app/ui-react/packages/ui/src/Shared/DndFileChooser.tsx
+++ b/app/ui-react/packages/ui/src/Shared/DndFileChooser.tsx
@@ -1,6 +1,7 @@
 import { Grid, Icon } from 'patternfly-react';
 import * as React from 'react';
 import { Container } from '../Layout/Container';
+import { toTestId } from '../utils';
 import './DndFileChooser.css';
 import { INotification, INotificationType } from './Notifications';
 import { WithDropzone } from './WithDropzone';
@@ -138,7 +139,14 @@ export class DndFileChooser extends React.Component<
       return (
         <ul>
           {this.state.files.map((file, index) => (
-            <li data-testid={`dnd-file-chooser-${index}`} key={index}>
+            <li
+              data-testid={`${toTestId(
+                'DndFileChooser',
+                file.name,
+                'list-item'
+              )}`}
+              key={index}
+            >
               {file.name}
             </li>
           ))}
@@ -178,7 +186,11 @@ export class DndFileChooser extends React.Component<
         <ul>
           {this.props.i18nUploadSuccessMessages!.map((message, idx) => (
             <li
-              data-testid={`dnd-file-chooser-success-message-${idx}`}
+              data-testid={`${toTestId(
+                'DndFileChooser',
+                message,
+                'success-message'
+              )}`}
               key={'success' + idx}
               className="dnd-file-chooser__uploadMessage"
             >
@@ -188,7 +200,11 @@ export class DndFileChooser extends React.Component<
           ))}
           {this.props.i18nUploadFailedMessages!.map((message, idx) => (
             <li
-              data-testid={`dnd-file-chooser-failed-message-${idx}`}
+              data-testid={`${toTestId(
+                'DndFileChooser',
+                message,
+                'failed-message'
+              )}`}
               key={'fail' + idx}
               className="dnd-file-chooser__uploadMessage"
             >
diff --git a/app/ui-react/packages/ui/src/Shared/HelpDropdown.tsx b/app/ui-react/packages/ui/src/Shared/HelpDropdown.tsx
index c4cc5b334..2c6280056 100644
--- a/app/ui-react/packages/ui/src/Shared/HelpDropdown.tsx
+++ b/app/ui-react/packages/ui/src/Shared/HelpDropdown.tsx
@@ -8,6 +8,7 @@ import {
 import { HelpIcon } from '@patternfly/react-icons';
 import classNames from 'classnames';
 import * as React from 'react';
+import { toTestId } from '../utils';
 
 export interface IHelpDropdownProps {
   className?: string;
@@ -60,7 +61,11 @@ export class HelpDropdown extends React.Component<
     } = this.props;
     const dropdownItems = [
       <DropdownItem
-        data-testid={'help-dropdown-integration-tutorials'}
+        data-testid={`${toTestId(
+          'HelpDropdown',
+          'integration-tutorials',
+          'dropdown-item'
+        )}`}
         key="sampleIntegrationTutorials"
         component="a"
         onClick={launchSampleIntegrationTutorials}
@@ -68,7 +73,11 @@ export class HelpDropdown extends React.Component<
         Sample Integration Tutorials
       </DropdownItem>,
       <DropdownItem
-        data-testid={'help-dropdown-user-guide'}
+        data-testid={`${toTestId(
+          'HelpDropdown',
+          'user-guide',
+          'dropdown-item'
+        )}`}
         key="userGuide"
         component="a"
         onClick={launchUserGuide}
@@ -76,7 +85,11 @@ export class HelpDropdown extends React.Component<
         User Guide
       </DropdownItem>,
       <DropdownItem
-        data-testid={'help-dropdown-connectors-guide'}
+        data-testid={`${toTestId(
+          'HelpDropdown',
+          'connectors-guide',
+          'dropdown-item'
+        )}`}
         key="connectorsGuide"
         component="a"
         onClick={launchConnectorsGuide}
@@ -84,7 +97,7 @@ export class HelpDropdown extends React.Component<
         Connectors Guide
       </DropdownItem>,
       <DropdownItem
-        data-testid={'help-dropdown-support'}
+        data-testid={`${toTestId('HelpDropdown', 'support', 'dropdown-item')}`}
         key="support"
         component="a"
         onClick={launchSupportPage}
@@ -92,7 +105,11 @@ export class HelpDropdown extends React.Component<
         Support
       </DropdownItem>,
       <DropdownItem
-        data-testid={'help-dropdown-contact-us'}
+        data-testid={`${toTestId(
+          'HelpDropdown',
+          'contact-us',
+          'dropdown-item'
+        )}`}
         key="contactUs"
         component="a"
         onClick={launchContactUs}
@@ -100,7 +117,7 @@ export class HelpDropdown extends React.Component<
         Contact Us
       </DropdownItem>,
       <DropdownItem
-        data-testid={'help-dropdown-about'}
+        data-testid={`${toTestId('HelpDropdown', 'about', 'dropdown-item')}`}
         key="action"
         component="a"
         onClick={launchAboutModal}
diff --git a/app/ui-react/packages/ui/src/Shared/ListViewToolbar.tsx b/app/ui-react/packages/ui/src/Shared/ListViewToolbar.tsx
index cb7cc40cf..45ab04961 100644
--- a/app/ui-react/packages/ui/src/Shared/ListViewToolbar.tsx
+++ b/app/ui-react/packages/ui/src/Shared/ListViewToolbar.tsx
@@ -1,5 +1,6 @@
 import { Filter, FormControl, Sort, Toolbar } from 'patternfly-react';
 import * as React from 'react';
+import { toTestId } from '../utils';
 import './ListViewToolbar.css';
 
 export interface IFilterValue {
@@ -98,7 +99,7 @@ export class ListViewToolbar extends React.Component<IListViewToolbarProps> {
                 ))}
               </Filter.List>
               <a
-                data-testid={'list-view-toolbar-clear-filters'}
+                data-testid={`${toTestId('ListViewToolbar', 'clear-filters')}`}
                 onClick={this.props.onClearFilters}
               >
                 Clear All Filters
diff --git a/app/ui-react/packages/ui/src/Shared/ProgressWithLink.tsx b/app/ui-react/packages/ui/src/Shared/ProgressWithLink.tsx
index bc102cadb..3bcfb146d 100644
--- a/app/ui-react/packages/ui/src/Shared/ProgressWithLink.tsx
+++ b/app/ui-react/packages/ui/src/Shared/ProgressWithLink.tsx
@@ -1,6 +1,6 @@
 import { Icon, ProgressBar } from 'patternfly-react';
 import * as React from 'react';
-
+import { toTestId } from '../utils';
 import './ProgressWithLink.css';
 
 export interface IProgressWithLinkProps {
@@ -18,14 +18,14 @@ export class ProgressWithLink extends React.PureComponent<
     return (
       <div className="progress-link">
         <div>
-          <i data-testid="progress-link-value">
+          <i data-testid={`${toTestId('ProgressWithLink', 'value')}`}>
             {this.props.value} ( {this.props.currentStep} /{' '}
             {this.props.totalSteps} )
           </i>
           {this.props.logUrl && (
-            <span data-testid="progress-log-link" className="pull-right">
+            <span className="pull-right">
               <a
-                data-testid={'progress-with-link-log-url'}
+                data-testid={`${toTestId('ProgressWithLink', 'log-url')}`}
                 target="_blank"
                 href={this.props.logUrl}
               >
diff --git a/app/ui-react/packages/ui/src/Shared/TextEditor.tsx b/app/ui-react/packages/ui/src/Shared/TextEditor.tsx
index 74731a453..f41d6460f 100644
--- a/app/ui-react/packages/ui/src/Shared/TextEditor.tsx
+++ b/app/ui-react/packages/ui/src/Shared/TextEditor.tsx
@@ -1,6 +1,7 @@
 import * as CodeMirror from 'codemirror';
 import * as React from 'react';
 import { UnControlled as ReactCodeMirror } from 'react-codemirror2';
+import { toTestId } from '../utils';
 
 import 'codemirror/addon/display/placeholder.js';
 import 'codemirror/addon/lint/lint.css';
@@ -26,7 +27,12 @@ export class TextEditor extends React.Component<ITextEditorProps> {
     const options = { ...this.props.options };
     return (
       <>
-        <div data-testid={this.props.id || 'codemirror'}>
+        <div
+          data-testid={`${toTestId(
+            'TextEditor',
+            this.props.id || 'codemirror'
+          )}`}
+        >
           <ReactCodeMirror
             value={this.props.value}
             options={options}
diff --git a/app/ui-react/packages/ui/src/Shared/UnrecoverableError.tsx b/app/ui-react/packages/ui/src/Shared/UnrecoverableError.tsx
index 1e142311c..14f359fe9 100644
--- a/app/ui-react/packages/ui/src/Shared/UnrecoverableError.tsx
+++ b/app/ui-react/packages/ui/src/Shared/UnrecoverableError.tsx
@@ -3,6 +3,7 @@ import { EmptyState } from 'patternfly-react';
 import { useState } from 'react';
 import * as React from 'react';
 import { ButtonLink, Container } from '../Layout';
+import { toTestId } from '../utils';
 
 export interface IUnrecoverableErrorProps {
   i18nTitle: string;
@@ -36,7 +37,7 @@ export const UnrecoverableError: React.FC<IUnrecoverableErrorProps> = ({
         <EmptyState.Help>{i18nHelp}</EmptyState.Help>
         <EmptyState.Action>
           <ButtonLink
-            data-testid={'unrecoverable-error-refresh'}
+            data-testid={`${toTestId('UnrecoverableError', 'refresh-button')}`}
             href={'.'}
             as={'primary'}
             size={'lg'}
@@ -47,14 +48,20 @@ export const UnrecoverableError: React.FC<IUnrecoverableErrorProps> = ({
         <EmptyState.Action secondary={true}>
           {error && (
             <ButtonLink
-              data-testid={'unrecoverable-error-show-error'}
+              data-testid={`${toTestId(
+                'UnrecoverableError',
+                'show-error-button'
+              )}`}
               onClick={toggleErrorInfo}
             >
               {i18nShowErrorInfoLabel}
             </ButtonLink>
           )}
           <a
-            data-testid={'unrecoverable-error-report-issue'}
+            data-testid={`${toTestId(
+              'UnrecoverableError',
+              'report-issue-link'
+            )}`}
             className={'btn btn-default'}
             href={
               'https://github.com/syndesisio/syndesis/issues/new?template=simple.md&labels=cat/bug&title=Error%20report'
diff --git a/app/ui-react/packages/ui/src/index.ts b/app/ui-react/packages/ui/src/index.ts
index a519ee52a..2242a58ff 100644
--- a/app/ui-react/packages/ui/src/index.ts
+++ b/app/ui-react/packages/ui/src/index.ts
@@ -9,3 +9,4 @@ export * from './Layout';
 export * from './Settings';
 export * from './Shared';
 export * from './Support';
+export * from './utils';
diff --git a/app/ui-react/packages/ui/src/utils/index.ts b/app/ui-react/packages/ui/src/utils/index.ts
new file mode 100644
index 000000000..6667613e4
--- /dev/null
+++ b/app/ui-react/packages/ui/src/utils/index.ts
@@ -0,0 +1 @@
+export * from './testIdGenerator';
diff --git a/app/ui-react/packages/ui/src/utils/testIdGenerator.ts b/app/ui-react/packages/ui/src/utils/testIdGenerator.ts
new file mode 100644
index 000000000..986ab0c87
--- /dev/null
+++ b/app/ui-react/packages/ui/src/utils/testIdGenerator.ts
@@ -0,0 +1,20 @@
+/**
+ * Generates an identifier suitable to use as a `data-testid`. Value arguments are separated by a
+ * dash character.
+ * @param values the values used to generate a test identifier
+ * @returns a test identifier
+ */
+export function toTestId(...values: string[]): string {
+  return values.map(generateId).join('-');
+}
+
+/**
+ * Replaces all non-alphanumeric characters with a dash and lowercases all alpha characters.
+ * @param value the value whose ID is being generated
+ * @returns the test ID
+ */
+function generateId(value: string): string {
+  return value
+    ? value.replace(/[^a-zA-Z0-9]+/g, '-').toLowerCase()
+    : ((value || '') as string);
+}
diff --git a/app/ui-react/packages/ui/stories/Customization/ApiConnectorDetailCard.stories.tsx b/app/ui-react/packages/ui/stories/Customization/ApiConnectorDetailCard.stories.tsx
index 3b19cb2fa..6326a88c1 100644
--- a/app/ui-react/packages/ui/stories/Customization/ApiConnectorDetailCard.stories.tsx
+++ b/app/ui-react/packages/ui/stories/Customization/ApiConnectorDetailCard.stories.tsx
@@ -2,7 +2,10 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { ApiConnectorDetailCard } from '../../src';
 
-const stories = storiesOf('Customization/ApiConnectorDetailCard', module);
+const stories = storiesOf(
+  'Customization/ApiClientConnector/ApiConnectorDetailCard',
+  module
+);
 
 const description = 'An OpenAPI 2.0 version of the Beer API.';
 const icon =
diff --git a/app/ui-react/packages/ui/stories/Customization/ApiConnectorDetailsForm.stories.tsx b/app/ui-react/packages/ui/stories/Customization/ApiConnectorDetailsForm.stories.tsx
index 1257ed743..3e4ed517b 100644
--- a/app/ui-react/packages/ui/stories/Customization/ApiConnectorDetailsForm.stories.tsx
+++ b/app/ui-react/packages/ui/stories/Customization/ApiConnectorDetailsForm.stories.tsx
@@ -4,7 +4,10 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { ApiConnectorDetailsForm } from '../../src';
 
-const stories = storiesOf('Customization/ApiConnectorDetailsForm', module);
+const stories = storiesOf(
+  'Customization/ApiClientConnector/ApiConnectorDetailsForm',
+  module
+);
 
 const cancelEditingText = 'cancel editing called';
 const cancelLabel = 'Cancel';
diff --git a/app/ui-react/packages/ui/stories/Customization/ApiConnectorListItem.stories.tsx b/app/ui-react/packages/ui/stories/Customization/ApiConnectorListItem.stories.tsx
index cd724ed89..a64a2fa1c 100644
--- a/app/ui-react/packages/ui/stories/Customization/ApiConnectorListItem.stories.tsx
+++ b/app/ui-react/packages/ui/stories/Customization/ApiConnectorListItem.stories.tsx
@@ -5,7 +5,10 @@ import * as React from 'react';
 import { MemoryRouter } from 'react-router';
 import { ApiConnectorListItem } from '../../src';
 
-const stories = storiesOf('Customization/ApiConnectorListItem', module);
+const stories = storiesOf(
+  'Customization/ApiClientConnector/ApiConnectorListItem',
+  module
+);
 
 const apiConnectorId = 'beer-api-2.0';
 const apiDescription = 'An OpenAPI 2.0 version of the Beer API';
diff --git a/app/ui-react/packages/ui/stories/Customization/ApiConnectorListView.stories.tsx b/app/ui-react/packages/ui/stories/Customization/ApiConnectorListView.stories.tsx
index 418b8d6a4..05a089afc 100644
--- a/app/ui-react/packages/ui/stories/Customization/ApiConnectorListView.stories.tsx
+++ b/app/ui-react/packages/ui/stories/Customization/ApiConnectorListView.stories.tsx
@@ -5,7 +5,10 @@ import * as React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { ApiConnectorListItem, ApiConnectorListView } from '../../src';
 
-const stories = storiesOf('Customization/ApiConnectorListView', module);
+const stories = storiesOf(
+  'Customization/ApiClientConnector/ApiConnectorListView',
+  module
+);
 
 const connectors = [
   <ApiConnectorListItem
diff --git a/app/ui-react/packages/ui/stories/Customization/ApiConnectorReview.stories.tsx b/app/ui-react/packages/ui/stories/Customization/ApiConnectorReview.stories.tsx
index 42ad8f58d..ab73ef293 100644
--- a/app/ui-react/packages/ui/stories/Customization/ApiConnectorReview.stories.tsx
+++ b/app/ui-react/packages/ui/stories/Customization/ApiConnectorReview.stories.tsx
@@ -2,7 +2,10 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { ApiConnectorReview } from '../../src';
 
-const stories = storiesOf('Customization/ApiConnectorReview', module);
+const stories = storiesOf(
+  'Customization/ApiClientConnector/ApiConnectorReview',
+  module
+);
 
 stories.add('with description', () => (
   <ApiConnectorReview
diff --git a/app/ui-react/packages/ui/tests/AggregatedMetricCard.spec.tsx b/app/ui-react/packages/ui/tests/AggregatedMetricCard.spec.tsx
index f9d7e4ce6..7aa5aca37 100644
--- a/app/ui-react/packages/ui/tests/AggregatedMetricCard.spec.tsx
+++ b/app/ui-react/packages/ui/tests/AggregatedMetricCard.spec.tsx
@@ -9,18 +9,26 @@ export default describe('AggregatedMetricCard', () => {
 
   it('Should have the A Title title', function() {
     const { getByTestId } = render(testComponent);
-    expect(getByTestId('aggregate-title')).toHaveTextContent('A Title');
+    expect(getByTestId('aggregatedmetriccard-title')).toHaveTextContent(
+      'A Title'
+    );
   });
   it('Should have 5 errors', function() {
     const { getByTestId } = render(testComponent);
-    expect(getByTestId('aggregate-error-count')).toHaveTextContent('5');
+    expect(getByTestId('aggregatedmetriccard-error-count')).toHaveTextContent(
+      '5'
+    );
   });
   it('Should have 10 ok', function() {
     const { getByTestId } = render(testComponent);
-    expect(getByTestId('aggregate-ok-count')).toHaveTextContent('10');
+    expect(getByTestId('aggregatedmetriccard-ok-count')).toHaveTextContent(
+      '10'
+    );
   });
   it('Should have 15 total', function() {
     const { getByTestId } = render(testComponent);
-    expect(getByTestId('aggregate-total-count')).toHaveTextContent('15');
+    expect(getByTestId('aggregatedmetriccard-total-count')).toHaveTextContent(
+      '15'
+    );
   });
 });
diff --git a/app/ui-react/packages/ui/tests/ConnectionCard.spec.tsx b/app/ui-react/packages/ui/tests/ConnectionCard.spec.tsx
index ce697bd18..c4d35ae21 100644
--- a/app/ui-react/packages/ui/tests/ConnectionCard.spec.tsx
+++ b/app/ui-react/packages/ui/tests/ConnectionCard.spec.tsx
@@ -31,8 +31,8 @@ export default describe('ConnectionCard', () => {
 
   it('Should have the Sample connection title', () => {
     const { getByTestId } = render(testComponent);
-    expect(getByTestId('connection-card-title')).toHaveTextContent(
-      'Sample connection'
-    );
+    expect(
+      getByTestId('connectioncard-sample-connection-details-link')
+    ).toHaveTextContent('Sample connection');
   });
 });
diff --git a/app/ui-react/packages/ui/tests/IntegrationStatusDetail.spec.tsx b/app/ui-react/packages/ui/tests/IntegrationStatusDetail.spec.tsx
index 2d2639c31..0342e9449 100644
--- a/app/ui-react/packages/ui/tests/IntegrationStatusDetail.spec.tsx
+++ b/app/ui-react/packages/ui/tests/IntegrationStatusDetail.spec.tsx
@@ -40,20 +40,22 @@ export default describe('IntegrationStatusDetail', () => {
 
   it('Should show the starting state', () => {
     const { getByTestId } = render(testComponentPublishing);
-    expect(getByTestId('integration-status-detail')).toHaveTextContent(
-      'Starting...'
-    );
+    expect(
+      getByTestId('integrationstatusdetail-status-detail')
+    ).toHaveTextContent('Starting...');
   });
 
   it('Should show the detailed status', () => {
     const { getByTestId } = render(testComponentPublishingDetailed);
-    expect(getByTestId('integration-status-detail')).toHaveTextContent('');
+    expect(
+      getByTestId('integrationstatusdetail-status-detail')
+    ).toHaveTextContent('');
   });
 
   it('Should show the stopping state', () => {
     const { getByTestId } = render(testComponentUnpublishing);
-    expect(getByTestId('integration-status-detail')).toHaveTextContent(
-      'Stopping...'
-    );
+    expect(
+      getByTestId('integrationstatusdetail-status-detail')
+    ).toHaveTextContent('Stopping...');
   });
 });
diff --git a/app/ui-react/packages/ui/tests/ProgressWithLink.spec.tsx b/app/ui-react/packages/ui/tests/ProgressWithLink.spec.tsx
index 6de91d304..0e0d54b2e 100644
--- a/app/ui-react/packages/ui/tests/ProgressWithLink.spec.tsx
+++ b/app/ui-react/packages/ui/tests/ProgressWithLink.spec.tsx
@@ -26,23 +26,25 @@ export default describe('IntegrationProgress', () => {
 
   it('Should show the progress value and steps', () => {
     const { getByTestId } = render(testComponent);
-    expect(getByTestId('progress-link-value')).toHaveTextContent(
+    expect(getByTestId('progresswithlink-value')).toHaveTextContent(
       'Deploying ( 2 / 4 )'
     );
   });
   it('Should show the log link when supplied', () => {
     const { queryByTestId } = render(testComponent);
-    expect(queryByTestId('progress-log-link')).toBeDefined();
-    expect(queryByTestId('progress-log-link')).toHaveTextContent('View Logs');
+    expect(queryByTestId('progresswithlink-log-url')).toBeDefined();
+    expect(queryByTestId('progresswithlink-log-url')).toHaveTextContent(
+      'View Logs'
+    );
   });
   it('Should show the progress value and steps', () => {
     const { getByTestId } = render(testComponentNoLog);
-    expect(getByTestId('progress-link-value')).toHaveTextContent(
+    expect(getByTestId('progresswithlink-value')).toHaveTextContent(
       'Assembling ( 1 / 4 )'
     );
   });
   it('Should not show the log link if not supplied', () => {
     const { queryByTestId } = render(testComponentNoLog);
-    expect(queryByTestId('progess-log-link')).toEqual(null);
+    expect(queryByTestId('progresswithlink-log-url')).toEqual(null);
   });
 });
diff --git a/app/ui-react/syndesis/src/app/UI.tsx b/app/ui-react/syndesis/src/app/UI.tsx
index e1f6398bc..b82daf3d2 100644
--- a/app/ui-react/syndesis/src/app/UI.tsx
+++ b/app/ui-react/syndesis/src/app/UI.tsx
@@ -9,7 +9,7 @@ import {
   PfDropdownItem,
   PfVerticalNavItem,
 } from '@syndesis/ui';
-import { AboutModal, AboutModalContent, Loader } from '@syndesis/ui';
+import { AboutModal, AboutModalContent, Loader, toTestId } from '@syndesis/ui';
 import { WithLoader, WithRouter } from '@syndesis/utils';
 import { useState } from 'react';
 import * as React from 'react';
@@ -88,7 +88,7 @@ export const UI: React.FunctionComponent<IAppUIProps> = ({ routes }) => {
             <>
               <div className="pull-right toast-pf-action">
                 <ButtonLink
-                  data-testid={'ui-refresh-app'}
+                  data-testid={`${toTestId('UI', 'reload-button')}`}
                   onClick={refreshApp}
                   as={'link'}
                   style={{ padding: 0, border: 0 }}
@@ -210,7 +210,10 @@ export const UI: React.FunctionComponent<IAppUIProps> = ({ routes }) => {
                                         <button
                                           type="button"
                                           role="menuitem"
-                                          data-testid={'ui-logout-app'}
+                                          data-testid={`${toTestId(
+                                            'UI',
+                                            'logout-link'
+                                          )}`}
                                           className="pf-c-dropdown__menu-item"
                                         >
                                           {t('Logout')}
@@ -228,9 +231,10 @@ export const UI: React.FunctionComponent<IAppUIProps> = ({ routes }) => {
                                   label={t((route as IAppRoute).label)}
                                   to={(route as IAppRoute).to}
                                   key={index}
-                                  data-testid={`navbar-link-${
+                                  data-testid={`${toTestId(
+                                    'UI',
                                     (route as IAppRoute).to
-                                  }`}
+                                  )}`}
                                 />
                               ) : (
                                 <PfVerticalNavItem
@@ -245,9 +249,10 @@ export const UI: React.FunctionComponent<IAppUIProps> = ({ routes }) => {
                                         label={t(subRoute.label)}
                                         to={subRoute.to}
                                         key={subIndex}
-                                        data-testid={`navbar-link-${
+                                        data-testid={`${toTestId(
+                                          'UI',
                                           subRoute.to
-                                        }`}
+                                        )}`}
                                       />
                                     )
                                   )}
@@ -260,7 +265,9 @@ export const UI: React.FunctionComponent<IAppUIProps> = ({ routes }) => {
                                   isProductBuild ? fuseOnlineLogo : syndesisLogo
                                 }
                                 alt={productName}
-                                style={{ minWidth: '164px' }}
+                                style={{
+                                  minWidth: '164px',
+                                }}
                               />
                             }
                             logoHref={'/'}
diff --git a/app/ui-react/syndesis/src/modules/apiClientConnectors/pages/ApiConnectorDetailsPage.tsx b/app/ui-react/syndesis/src/modules/apiClientConnectors/pages/ApiConnectorDetailsPage.tsx
index af192668f..3bfaffe85 100644
--- a/app/ui-react/syndesis/src/modules/apiClientConnectors/pages/ApiConnectorDetailsPage.tsx
+++ b/app/ui-react/syndesis/src/modules/apiClientConnectors/pages/ApiConnectorDetailsPage.tsx
@@ -7,6 +7,7 @@ import {
   Container,
   PageLoader,
   PageSection,
+  toTestId,
 } from '@syndesis/ui';
 import { WithLoader, WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
@@ -212,17 +213,19 @@ export default class ApiConnectorDetailsPage extends React.Component<
                                         <>
                                           <Breadcrumb>
                                             <Link
-                                              data-testid={
-                                                'api-connector-details-page-home'
-                                              }
+                                              data-testid={toTestId(
+                                                'ApiConnectorDetailsPage',
+                                                'home-link'
+                                              )}
                                               to={resolvers.dashboard.root()}
                                             >
                                               {t('shared:Home')}
                                             </Link>
                                             <Link
-                                              data-testid={
-                                                'api-connector-details-page-api-connectors'
-                                              }
+                                              data-testid={toTestId(
+                                                'ApiConnectorDetailsPage',
+                                                'api-connectors-link'
+                                              )}
                                               to={resolvers.apiClientConnectors.list()}
                                             >
                                               {t('apiConnectorsPageTitle')}
@@ -268,7 +271,9 @@ export default class ApiConnectorDetailsPage extends React.Component<
                                                   )}
                                                   i18nErrorsHeading={t(
                                                     'reviewErrorsHeading',
-                                                    { count: 0 }
+                                                    {
+                                                      count: 0,
+                                                    }
                                                   )} // TODO fix count
                                                   i18nImportedHeading={t(
                                                     'reviewImportedHeading'
@@ -292,7 +297,9 @@ export default class ApiConnectorDetailsPage extends React.Component<
                                                   )}
                                                   i18nWarningsHeading={t(
                                                     'reviewWarningsHeading',
-                                                    { count: 0 }
+                                                    {
+                                                      count: 0,
+                                                    }
                                                   )} // TODO fix count
                                                 />
                                               ) : (
@@ -311,7 +318,9 @@ export default class ApiConnectorDetailsPage extends React.Component<
                                                   )}
                                                   i18nOperationsHtmlMessage={t(
                                                     'reviewOperationsMessage',
-                                                    { count: 0 }
+                                                    {
+                                                      count: 0,
+                                                    }
                                                   )}
                                                   i18nTitle={t(
                                                     'reviewActionsTitle'
diff --git a/app/ui-react/syndesis/src/modules/connections/ConnectionsCreatorApp.tsx b/app/ui-react/syndesis/src/modules/connections/ConnectionsCreatorApp.tsx
index 215269108..ba95faf7a 100644
--- a/app/ui-react/syndesis/src/modules/connections/ConnectionsCreatorApp.tsx
+++ b/app/ui-react/syndesis/src/modules/connections/ConnectionsCreatorApp.tsx
@@ -1,4 +1,4 @@
-import { Breadcrumb, PageSection } from '@syndesis/ui';
+import { Breadcrumb, PageSection, toTestId } from '@syndesis/ui';
 import * as React from 'react';
 import { Route, Switch } from 'react-router';
 import { Link } from 'react-router-dom';
@@ -14,7 +14,10 @@ export default class ConnectionsCreatorApp extends React.Component {
         <WithClosedNavigation>
           <Breadcrumb>
             <Link
-              data-testid={'connections-creator-app-connections'}
+              data-testid={`${toTestId(
+                'ConnectionsCreatorApp',
+                'connections-link'
+              )}`}
               to={resolvers.connections()}
             >
               Connections
diff --git a/app/ui-react/syndesis/src/modules/connections/pages/ConnectionDetailsPage.tsx b/app/ui-react/syndesis/src/modules/connections/pages/ConnectionDetailsPage.tsx
index 20828c827..79313d2fd 100644
--- a/app/ui-react/syndesis/src/modules/connections/pages/ConnectionDetailsPage.tsx
+++ b/app/ui-react/syndesis/src/modules/connections/pages/ConnectionDetailsPage.tsx
@@ -10,6 +10,7 @@ import {
   ConnectionDetailsForm,
   ConnectionDetailsHeader,
   PageLoader,
+  toTestId,
 } from '@syndesis/ui';
 import { WithLoader, WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
@@ -235,17 +236,19 @@ export class ConnectionDetailsPage extends React.Component<
                                             <>
                                               <Breadcrumb>
                                                 <Link
-                                                  data-testid={
-                                                    'connection-details-page-home'
-                                                  }
+                                                  data-testid={toTestId(
+                                                    'ConnectionDetailsPage',
+                                                    'home-link'
+                                                  )}
                                                   to={resolvers.dashboard.root()}
                                                 >
                                                   {t('shared:Home')}
                                                 </Link>
                                                 <Link
-                                                  data-testid={
-                                                    'connection-details-page-connections'
-                                                  }
+                                                  data-testid={toTestId(
+                                                    'ConnectionDetailsPage',
+                                                    'connections-link'
+                                                  )}
                                                   to={resolvers.connections.connections()}
                                                 >
                                                   {t('shared:Connections')}
diff --git a/app/ui-react/syndesis/src/modules/connections/pages/create/ConfigurationPage.tsx b/app/ui-react/syndesis/src/modules/connections/pages/create/ConfigurationPage.tsx
index dcfceb202..8ed1d4024 100644
--- a/app/ui-react/syndesis/src/modules/connections/pages/create/ConfigurationPage.tsx
+++ b/app/ui-react/syndesis/src/modules/connections/pages/create/ConfigurationPage.tsx
@@ -6,6 +6,7 @@ import {
   ConnectorConfigurationForm,
   Loader,
   PageLoader,
+  toTestId,
 } from '@syndesis/ui';
 import { WithLoader, WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
@@ -82,9 +83,10 @@ export default class ConfigurationPage extends React.Component {
                               isNextDisabled={isSubmitting}
                               extraButtons={
                                 <ButtonLink
-                                  data-testid={
-                                    'configuration-page-validate-form'
-                                  }
+                                  data-testid={toTestId(
+                                    'ConfigurationPage',
+                                    'validate-button'
+                                  )}
                                   onClick={validateForm}
                                   disabled={!isValid || isValidating}
                                 >
diff --git a/app/ui-react/syndesis/src/modules/dashboard/pages/DashboardPage.tsx b/app/ui-react/syndesis/src/modules/dashboard/pages/DashboardPage.tsx
index 3b8f2dfc3..563ca0843 100644
--- a/app/ui-react/syndesis/src/modules/dashboard/pages/DashboardPage.tsx
+++ b/app/ui-react/syndesis/src/modules/dashboard/pages/DashboardPage.tsx
@@ -13,6 +13,7 @@ import {
   RecentUpdatesItem,
   RecentUpdatesSkeleton,
   TopIntegrationsCard,
+  toTestId,
   UptimeMetric,
 } from '@syndesis/ui';
 import { toShortDateAndTimeString } from '@syndesis/utils';
@@ -139,7 +140,12 @@ export default () => (
                       linkToConnections={resolvers.connections.connections()}
                       linkToConnectionCreation={resolvers.connections.create.selectConnector()}
                       integrationsOverview={
-                        <div data-testid="total-integrations">
+                        <div
+                          data-testid={toTestId(
+                            'DashboardPage',
+                            'total-integrations'
+                          )}
+                        >
                           <AggregatedMetricCard
                             title={t('titleTotalIntegrations')}
                             total={integrationsData.totalCount}
@@ -152,7 +158,12 @@ export default () => (
                         </div>
                       }
                       connectionsOverview={
-                        <div data-testid="total-connections">
+                        <div
+                          data-testid={toTestId(
+                            'DashboardPage',
+                            'total-connections'
+                          )}
+                        >
                           <ConnectionsMetric
                             i18nTitle={t('titleTotalConnections', {
                               count:
@@ -162,7 +173,12 @@ export default () => (
                         </div>
                       }
                       messagesOverview={
-                        <div data-testid="total-messages">
+                        <div
+                          data-testid={toTestId(
+                            'DashboardPage',
+                            'total-messages'
+                          )}
+                        >
                           <AggregatedMetricCard
                             title={t('titleTotalMessages')}
                             total={metricsData.messages!}
@@ -172,7 +188,12 @@ export default () => (
                         </div>
                       }
                       uptimeOverview={
-                        <div data-testid="metrics-uptime">
+                        <div
+                          data-testid={toTestId(
+                            'DashboardPage',
+                            'metrics-uptime'
+                          )}
+                        >
                           <UptimeMetric
                             start={parseInt(metricsData.start!, 10)}
                             durationDifference={toDurationDifferenceString(
diff --git a/app/ui-react/syndesis/src/modules/data/ViewCreateApp.tsx b/app/ui-react/syndesis/src/modules/data/ViewCreateApp.tsx
index 15a43a297..238464773 100644
--- a/app/ui-react/syndesis/src/modules/data/ViewCreateApp.tsx
+++ b/app/ui-react/syndesis/src/modules/data/ViewCreateApp.tsx
@@ -1,5 +1,5 @@
 import { RestDataService } from '@syndesis/models';
-import { Breadcrumb } from '@syndesis/ui';
+import { Breadcrumb, toTestId } from '@syndesis/ui';
 import { WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
 import { Route, Switch } from 'react-router';
@@ -22,19 +22,19 @@ export default class ViewCreateApp extends React.Component {
           <WithClosedNavigation>
             <Breadcrumb>
               <Link
-                data-testid={'view-create-home'}
+                data-testid={toTestId('ViewCreateApp', 'home-link')}
                 to={resolvers.dashboard.root()}
               >
                 {i18n.t('shared:Home')}
               </Link>
               <Link
-                data-testid={'view-create-virtualizations'}
+                data-testid={toTestId('ViewCreateApp', 'virtualizations-link')}
                 to={resolvers.data.root()}
               >
                 {i18n.t('shared:DataVirtualizations')}
               </Link>
               <Link
-                data-testid={'view-create-virtualization'}
+                data-testid={toTestId('ViewCreateApp', 'virtualization-link')}
                 to={resolvers.data.virtualizations.views.root({
                   virtualization,
                 })}
diff --git a/app/ui-react/syndesis/src/modules/data/ViewsImportApp.tsx b/app/ui-react/syndesis/src/modules/data/ViewsImportApp.tsx
index dd5140fac..75abd95d5 100644
--- a/app/ui-react/syndesis/src/modules/data/ViewsImportApp.tsx
+++ b/app/ui-react/syndesis/src/modules/data/ViewsImportApp.tsx
@@ -1,5 +1,5 @@
 import { RestDataService } from '@syndesis/models';
-import { Breadcrumb } from '@syndesis/ui';
+import { Breadcrumb, toTestId } from '@syndesis/ui';
 import { WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
 import { Route, Switch } from 'react-router';
@@ -22,19 +22,19 @@ export default class ViewsImportApp extends React.Component {
           <WithClosedNavigation>
             <Breadcrumb>
               <Link
-                data-testid={'views-import-app-home'}
+                data-testid={toTestId('ViewsImportApp', 'home-link')}
                 to={resolvers.dashboard.root()}
               >
                 {i18n.t('shared:Home')}
               </Link>
               <Link
-                data-testid={'views-import-app-virtualizations'}
+                data-testid={toTestId('ViewsImportApp', 'virtualizations-link')}
                 to={resolvers.data.root()}
               >
                 {i18n.t('shared:DataVirtualizations')}
               </Link>
               <Link
-                data-testid={'views-import-app-virtualization'}
+                data-testid={toTestId('ViewsImportApp', 'virtualization-link')}
                 to={resolvers.data.virtualizations.views.root({
                   virtualization,
                 })}
diff --git a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationCreatePage.tsx b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationCreatePage.tsx
index 49fd65942..adc9b37a9 100644
--- a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationCreatePage.tsx
+++ b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationCreatePage.tsx
@@ -1,6 +1,6 @@
 import { WithVirtualizationHelpers } from '@syndesis/api';
 import { AutoForm, IFormDefinition } from '@syndesis/auto-form';
-import { Breadcrumb, PageSection } from '@syndesis/ui';
+import { Breadcrumb, PageSection, toTestId } from '@syndesis/ui';
 import { WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
 import { Translation } from 'react-i18next';
@@ -83,17 +83,19 @@ export class VirtualizationCreatePage extends React.Component {
                               <>
                                 <Breadcrumb>
                                   <Link
-                                    data-testid={
-                                      'virtualization-create-page-home'
-                                    }
+                                    data-testid={toTestId(
+                                      'VirtualizationCreatePage',
+                                      'home-link'
+                                    )}
                                     to={resolvers.dashboard.root()}
                                   >
                                     {t('shared:Home')}
                                   </Link>
                                   <Link
-                                    data-testid={
-                                      'virtualization-create-page-virtualizations'
-                                    }
+                                    data-testid={toTestId(
+                                      'VirtualizationCreatePage',
+                                      'virtualizations-link'
+                                    )}
                                     to={resolvers.data.root()}
                                   >
                                     {t('shared:DataVirtualizations')}
@@ -126,9 +128,10 @@ export class VirtualizationCreatePage extends React.Component {
                                         {fields}
                                         <button
                                           type="submit"
-                                          data-testid={
-                                            'virtualization-create-page-create'
-                                          }
+                                          data-testid={toTestId(
+                                            'VirtualizationCreatePage',
+                                            'create-button'
+                                          )}
                                           className="btn btn-primary"
                                         >
                                           {t('shared:Create')}
diff --git a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationMetricsPage.tsx b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationMetricsPage.tsx
index fb2143935..ae20eac1a 100644
--- a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationMetricsPage.tsx
+++ b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationMetricsPage.tsx
@@ -1,5 +1,5 @@
 import { RestDataService } from '@syndesis/models';
-import { Breadcrumb, PageSection, ViewHeader } from '@syndesis/ui';
+import { Breadcrumb, PageSection, toTestId, ViewHeader } from '@syndesis/ui';
 import { WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
 import { Translation } from 'react-i18next';
@@ -38,15 +38,19 @@ export class VirtualizationMetricsPage extends React.Component {
                 <>
                   <Breadcrumb>
                     <Link
-                      data-testid={'virtualization-metrics-page-home'}
+                      data-testid={toTestId(
+                        'VirtualizationMetricsPage',
+                        'home-link'
+                      )}
                       to={resolvers.dashboard.root()}
                     >
                       {t('shared:Home')}
                     </Link>
                     <Link
-                      data-testid={
-                        'virtualization-metrics-page-virtualizations'
-                      }
+                      data-testid={toTestId(
+                        'VirtualizationMetricsPage',
+                        'virtualizations-link'
+                      )}
                       to={resolvers.data.root()}
                     >
                       {t('shared:DataVirtualizations')}
diff --git a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationRelationshipPage.tsx b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationRelationshipPage.tsx
index bdbfa0fad..7394fa481 100644
--- a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationRelationshipPage.tsx
+++ b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationRelationshipPage.tsx
@@ -1,5 +1,5 @@
 import { RestDataService } from '@syndesis/models';
-import { Breadcrumb, PageSection, ViewHeader } from '@syndesis/ui';
+import { Breadcrumb, PageSection, toTestId, ViewHeader } from '@syndesis/ui';
 import { WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
 import { Translation } from 'react-i18next';
@@ -38,15 +38,19 @@ export class VirtualizationRelationshipPage extends React.Component {
                 <>
                   <Breadcrumb>
                     <Link
-                      data-testid={'virtualization-relationship-page-home'}
+                      data-testid={toTestId(
+                        'VirtualizationRelationshipPage',
+                        'home-link'
+                      )}
                       to={resolvers.dashboard.root()}
                     >
                       {t('shared:Home')}
                     </Link>
                     <Link
-                      data-testid={
-                        'virtualization-relationship-page-virtualizations'
-                      }
+                      data-testid={toTestId(
+                        'VirtualizationRelationshipPage',
+                        'virtualizations-link'
+                      )}
                       to={resolvers.data.root()}
                     >
                       {t('shared:DataVirtualizations')}
diff --git a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationSqlClientPage.tsx b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationSqlClientPage.tsx
index 27a8003d8..11df37c5b 100644
--- a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationSqlClientPage.tsx
+++ b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationSqlClientPage.tsx
@@ -1,6 +1,6 @@
 import { WithViewEditorStates } from '@syndesis/api';
 import { RestDataService, ViewEditorState } from '@syndesis/models';
-import { Breadcrumb, PageSection, ViewHeader } from '@syndesis/ui';
+import { Breadcrumb, PageSection, toTestId, ViewHeader } from '@syndesis/ui';
 import { WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
 import { Translation } from 'react-i18next';
@@ -50,15 +50,19 @@ export class VirtualizationSqlClientPage extends React.Component<
               <>
                 <Breadcrumb>
                   <Link
-                    data-testid={'virtualization-sql-client-page-home'}
+                    data-testid={toTestId(
+                      'VirtualizationSqlClientPage',
+                      'home-link'
+                    )}
                     to={resolvers.dashboard.root()}
                   >
                     {t('shared:Home')}
                   </Link>
                   <Link
-                    data-testid={
-                      'virtualization-sql-client-page-virtualizations'
-                    }
+                    data-testid={toTestId(
+                      'VirtualizationSqlClientPage',
+                      'virtualizations-link'
+                    )}
                     to={resolvers.data.root()}
                   >
                     {t('shared:DataVirtualizations')}
diff --git a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationViewsPage.tsx b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationViewsPage.tsx
index 7a7ccc4ee..fbb1a7128 100644
--- a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationViewsPage.tsx
+++ b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationViewsPage.tsx
@@ -1,7 +1,7 @@
 import { WithViewEditorStates, WithVirtualizationHelpers } from '@syndesis/api';
 import { RestDataService } from '@syndesis/models';
 import { ViewDefinition, ViewEditorState } from '@syndesis/models';
-import { Breadcrumb, PageSection, ViewHeader } from '@syndesis/ui';
+import { Breadcrumb, PageSection, toTestId, ViewHeader } from '@syndesis/ui';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import i18n from '../../../i18n';
@@ -114,15 +114,19 @@ export class VirtualizationViewsPage extends React.Component<
                       <>
                         <Breadcrumb>
                           <Link
-                            data-testid={'virtualization-views-page-home'}
+                            data-testid={toTestId(
+                              'VirtualizationViewsPage',
+                              'home-link'
+                            )}
                             to={resolvers.dashboard.root()}
                           >
                             {t('shared:Home')}
                           </Link>
                           <Link
-                            data-testid={
-                              'virtualization-views-page-virtualizations'
-                            }
+                            data-testid={toTestId(
+                              'VirtualizationViewsPage',
+                              'virtualizations-link'
+                            )}
                             to={resolvers.data.root()}
                           >
                             {t('shared:DataVirtualizations')}
diff --git a/app/ui-react/syndesis/src/modules/extensions/pages/ExtensionDetailsPage.tsx b/app/ui-react/syndesis/src/modules/extensions/pages/ExtensionDetailsPage.tsx
index be74ca7d5..f9da18051 100644
--- a/app/ui-react/syndesis/src/modules/extensions/pages/ExtensionDetailsPage.tsx
+++ b/app/ui-react/syndesis/src/modules/extensions/pages/ExtensionDetailsPage.tsx
@@ -7,6 +7,7 @@ import {
   ExtensionSupports,
   IAction,
   PageLoader,
+  toTestId,
 } from '@syndesis/ui';
 import { WithLoader, WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
@@ -92,15 +93,19 @@ export default class ExtensionDetailsPage extends React.Component {
                               <>
                                 <Breadcrumb>
                                   <Link
-                                    data-testid={'extension-details-page-home'}
+                                    data-testid={toTestId(
+                                      'ExtensionDetailsPage',
+                                      'home-link'
+                                    )}
                                     to={resolvers.dashboard.root()}
                                   >
                                     {t('shared:Home')}
                                   </Link>
                                   <Link
-                                    data-testid={
-                                      'extension-details-page-extensions'
-                                    }
+                                    data-testid={toTestId(
+                                      'ExtensionDetailsPage',
+                                      'extensions-link'
+                                    )}
                                     to={resolvers.extensions.list()}
                                   >
                                     {t('shared:Extensions')}
diff --git a/app/ui-react/syndesis/src/modules/extensions/pages/ExtensionImportPage.tsx b/app/ui-react/syndesis/src/modules/extensions/pages/ExtensionImportPage.tsx
index d039a7c75..f93680eae 100644
--- a/app/ui-react/syndesis/src/modules/extensions/pages/ExtensionImportPage.tsx
+++ b/app/ui-react/syndesis/src/modules/extensions/pages/ExtensionImportPage.tsx
@@ -8,6 +8,7 @@ import {
   IImportAction,
   Loader,
   PageSection,
+  toTestId,
 } from '@syndesis/ui';
 import { WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
@@ -174,7 +175,10 @@ export default class ExtensionImportPage extends React.Component<
                             <Breadcrumb
                               actions={
                                 <ButtonLink
-                                  data-testid={'extension-import-page-cancel'}
+                                  data-testid={toTestId(
+                                    'ExtensionImportPage',
+                                    'cancel-button'
+                                  )}
                                   className={'extension-import-page__action'}
                                   href={resolvers.extensions.list()}
                                   as={'default'}
@@ -184,13 +188,19 @@ export default class ExtensionImportPage extends React.Component<
                               }
                             >
                               <Link
-                                data-testid={'extension-import-page-home'}
+                                data-testid={toTestId(
+                                  'ExtensionImportPage',
+                                  'home-link'
+                                )}
                                 to={resolvers.dashboard.root()}
                               >
                                 {t('shared:Home')}
                               </Link>
                               <Link
-                                data-testid={'extension-import-page-extensions'}
+                                data-testid={toTestId(
+                                  'ExtensionImportPage',
+                                  'extensions-link'
+                                )}
                                 to={resolvers.extensions.list()}
                               >
                                 {t('shared:Extensions')}
diff --git a/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx b/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx
index 6e267a37c..0c5274eb9 100644
--- a/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx
+++ b/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx
@@ -1,7 +1,7 @@
 import { ALL_STEPS, createStep, DATA_MAPPER } from '@syndesis/api';
 import * as H from '@syndesis/history';
 import { StepKind } from '@syndesis/models';
-import { Breadcrumb } from '@syndesis/ui';
+import { Breadcrumb, toTestId } from '@syndesis/ui';
 import * as React from 'react';
 import { Translation } from 'react-i18next';
 import { Route, Switch } from 'react-router';
@@ -134,7 +134,10 @@ export const IntegrationCreatorApp: React.FunctionComponent = () => {
     <WithClosedNavigation>
       <Breadcrumb>
         <Link
-          data-testid={'integration-creator-app-new-integration'}
+          data-testid={toTestId(
+            'IntegrationCreatorApp',
+            'new-integration-link'
+          )}
           to={resolvers.list()}
         >
           Integrations
diff --git a/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx b/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx
index b7d36d0d4..0ac53bd93 100644
--- a/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx
+++ b/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx
@@ -1,7 +1,7 @@
 import { ALL_STEPS, createStep, DATA_MAPPER } from '@syndesis/api';
 import * as H from '@syndesis/history';
 import { StepKind } from '@syndesis/models';
-import { Breadcrumb } from '@syndesis/ui';
+import { Breadcrumb, toTestId } from '@syndesis/ui';
 import { WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
 import { Translation } from 'react-i18next';
@@ -142,13 +142,19 @@ export const IntegrationEditorApp: React.FunctionComponent = () => {
             <WithClosedNavigation>
               <Breadcrumb>
                 <Link
-                  data-testid={'integration-editor-app-integrations'}
+                  data-testid={toTestId(
+                    'IntegrationEditorApp',
+                    'integrations-link'
+                  )}
                   to={resolvers.list()}
                 >
                   {t('shared:Integrations')}
                 </Link>
                 <Link
-                  data-testid={'integration-editor-app-integration'}
+                  data-testid={toTestId(
+                    'IntegrationEditorApp',
+                    'integration-link'
+                  )}
                   to={resolvers.integration.details({
                     integrationId: integration.id!,
                   })}
diff --git a/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx
index 011523c1c..4a1f21207 100644
--- a/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx
+++ b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx
@@ -7,6 +7,7 @@ import {
   IntegrationEditorStepsListItem,
   IntegrationFlowAddStep,
   PageSection,
+  toTestId,
 } from '@syndesis/ui';
 import * as React from 'react';
 import { Translation } from 'react-i18next';
@@ -103,9 +104,10 @@ export class IntegrationEditorStepAdder extends React.Component<
                         s.previousStepShouldDefineDataShape ? (
                           <>
                             <a
-                              data-testid={
-                                'integration-editor-step-adder-define-data-type'
-                              }
+                              data-testid={toTestId(
+                                'IntegrationEditorStepAdder',
+                                'define-data-type-link'
+                              )}
                               href={'/todo'}
                             >
                               Define the data type
@@ -115,9 +117,10 @@ export class IntegrationEditorStepAdder extends React.Component<
                         ) : (
                           <>
                             <Link
-                              data-testid={
-                                'integration-editor-step-adder-add-step-before-connection'
-                              }
+                              data-testid={toTestId(
+                                'IntegrationEditorStepAdder',
+                                'add-step-before-connection-link'
+                              )}
                               to={this.props.addDataMapperStepHref(idx)}
                             >
                               Add a data mapping step
@@ -129,9 +132,10 @@ export class IntegrationEditorStepAdder extends React.Component<
                       actions={
                         <>
                           <ButtonLink
-                            data-testid={
-                              'integration-editor-step-adder-configure'
-                            }
+                            data-testid={toTestId(
+                              'IntegrationEditorStepAdder',
+                              'configure-button'
+                            )}
                             href={this.props.configureStepHref(
                               idx,
                               this.props.steps[idx]
@@ -141,9 +145,10 @@ export class IntegrationEditorStepAdder extends React.Component<
                           </ButtonLink>
                           {!restrictedDelete && (
                             <ButtonLink
-                              data-testid={
-                                'integration-editor-step-adder-delete'
-                              }
+                              data-testid={toTestId(
+                                'IntegrationEditorStepAdder',
+                                'delete-button'
+                              )}
                               onClick={() => this.props.onDelete(idx, s)}
                               as={'danger'}
                             >
diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/dataMapper/DataMapperPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/dataMapper/DataMapperPage.tsx
index 6d3b06a8a..5bac2d1a4 100644
--- a/app/ui-react/syndesis/src/modules/integrations/components/editor/dataMapper/DataMapperPage.tsx
+++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/dataMapper/DataMapperPage.tsx
@@ -6,7 +6,12 @@ import {
 import { DataMapperAdapter } from '@syndesis/atlasmap-adapter';
 import * as H from '@syndesis/history';
 import { Action, Integration } from '@syndesis/models';
-import { ButtonLink, IntegrationEditorLayout, PageSection } from '@syndesis/ui';
+import {
+  ButtonLink,
+  IntegrationEditorLayout,
+  PageSection,
+  toTestId,
+} from '@syndesis/ui';
 import { WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
 import { AppContext } from '../../../../../app';
@@ -140,7 +145,10 @@ export const DataMapperPage: React.FunctionComponent<
                   }
                   extraActions={
                     <ButtonLink
-                      data-testid={'data-mapper-page-save-mapping'}
+                      data-testid={toTestId(
+                        'DataMapperPage',
+                        'save-mapping-button'
+                      )}
                       onClick={saveMappingStep}
                       disabled={!mappings}
                       as={'primary'}
diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/endpoint/SelectActionPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/endpoint/SelectActionPage.tsx
index 3987851e5..e8b5511ba 100644
--- a/app/ui-react/syndesis/src/modules/integrations/components/editor/endpoint/SelectActionPage.tsx
+++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/endpoint/SelectActionPage.tsx
@@ -6,6 +6,7 @@ import {
   IntegrationEditorChooseAction,
   IntegrationEditorLayout,
   PageLoader,
+  toTestId,
 } from '@syndesis/ui';
 import { WithLoader, WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
@@ -93,7 +94,10 @@ export class SelectActionPage extends React.Component<ISelectActionPageProps> {
                                   }
                                   actions={
                                     <ButtonLink
-                                      data-testid={'select-action-page-select'}
+                                      data-testid={toTestId(
+                                        'SelectActionPage',
+                                        'select-button'
+                                      )}
                                       href={this.props.selectHref(
                                         a.id!,
                                         { connectionId, flowId, position },
diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/template/WithTemplater.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/template/WithTemplater.tsx
index 8747ba2e1..23628b190 100644
--- a/app/ui-react/syndesis/src/modules/integrations/components/editor/template/WithTemplater.tsx
+++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/template/WithTemplater.tsx
@@ -5,6 +5,7 @@ import {
   TemplateStepTemplateEditor,
   TemplateStepTypeSelector,
   TemplateType,
+  toTestId,
   WithDropzone,
 } from '@syndesis/ui';
 import { key } from '@syndesis/utils';
@@ -186,7 +187,7 @@ export class WithTemplater extends React.Component<
                     template file,
                     {/* eslint-disable-next-line */ ' '}
                     <a
-                      data-testid={'unrecoverable-error-show-error'}
+                      data-testid={toTestId('WithTemplater', 'show-error-link')}
                       onClick={this.handleClickBrowse}
                     >
                       browse to upload
diff --git a/app/ui-react/syndesis/src/modules/integrations/pages/cicd/ManageCiCdPage.tsx b/app/ui-react/syndesis/src/modules/integrations/pages/cicd/ManageCiCdPage.tsx
index b81747fe6..e70a9edcf 100644
--- a/app/ui-react/syndesis/src/modules/integrations/pages/cicd/ManageCiCdPage.tsx
+++ b/app/ui-react/syndesis/src/modules/integrations/pages/cicd/ManageCiCdPage.tsx
@@ -10,6 +10,7 @@ import {
   IFilterType,
   ISortType,
   TagNameValidationError,
+  toTestId,
 } from '@syndesis/ui';
 import { WithListViewToolbarHelpers, WithLoader } from '@syndesis/utils';
 import * as React from 'react';
@@ -116,7 +117,10 @@ export class ManageCiCdPage extends React.Component<{}, IManageCiCdPageState> {
                           <PageTitle title={t('integrations:ManageCiCd')} />
                           <Breadcrumb>
                             <Link
-                              data-testid={'manage-cicd-page-integrations'}
+                              data-testid={toTestId(
+                                'ManageCiCdPage',
+                                'integrations-link'
+                              )}
                               to={resolvers.list()}
                             >
                               {t('shared:Integrations')}
diff --git a/app/ui-react/syndesis/src/modules/integrations/pages/import/ImportPage.tsx b/app/ui-react/syndesis/src/modules/integrations/pages/import/ImportPage.tsx
index 3af840765..609ac181d 100644
--- a/app/ui-react/syndesis/src/modules/integrations/pages/import/ImportPage.tsx
+++ b/app/ui-react/syndesis/src/modules/integrations/pages/import/ImportPage.tsx
@@ -1,5 +1,5 @@
 import { WithIntegrationHelpers } from '@syndesis/api';
-import { Breadcrumb, ImportPageUI } from '@syndesis/ui';
+import { Breadcrumb, ImportPageUI, toTestId } from '@syndesis/ui';
 import * as React from 'react';
 import { Translation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -67,7 +67,7 @@ export class ImportPage extends React.Component<{}, IImportPageState> {
                   <PageTitle title={t('shared:Import')} />
                   <Breadcrumb>
                     <Link
-                      data-testid={'import-page-integrations'}
+                      data-testid={toTestId('ImportPage', 'integrations-link')}
                       to={resolvers.list()}
                     >
                       {t('shared:Integrations')}
diff --git a/app/ui-react/syndesis/src/modules/support/components/SelectiveIntegrationList.tsx b/app/ui-react/syndesis/src/modules/support/components/SelectiveIntegrationList.tsx
index 24c24beb5..bb65127ba 100644
--- a/app/ui-react/syndesis/src/modules/support/components/SelectiveIntegrationList.tsx
+++ b/app/ui-react/syndesis/src/modules/support/components/SelectiveIntegrationList.tsx
@@ -6,6 +6,7 @@ import {
   IntegrationsListItemBasic,
   ISortType,
   ListViewToolbar,
+  toTestId,
 } from '@syndesis/ui';
 import { WithListViewToolbarHelpers } from '@syndesis/utils';
 import * as React from 'react';
@@ -100,9 +101,10 @@ export const SelectiveIntegrationList: React.FunctionComponent<
                         integrationName={si.name}
                         checkboxComponent={
                           <input
-                            data-testid={
-                              'selective-integration-list-integrations'
-                            }
+                            data-testid={toTestId(
+                              'SelectiveIntegrationList',
+                              'integrations-input'
+                            )}
                             type="checkbox"
                             defaultValue={si.name}
                             onChange={event => onIntegrationChecked(event)}
diff --git a/app/ui-react/syndesis/src/modules/support/pages/SupportPage.tsx b/app/ui-react/syndesis/src/modules/support/pages/SupportPage.tsx
index 8c354cd9b..ebc1fa4a0 100644
--- a/app/ui-react/syndesis/src/modules/support/pages/SupportPage.tsx
+++ b/app/ui-react/syndesis/src/modules/support/pages/SupportPage.tsx
@@ -4,6 +4,7 @@ import {
   PageLoader,
   PageSection,
   SimplePageHeader,
+  toTestId,
 } from '@syndesis/ui';
 import { WithLoader } from '@syndesis/utils';
 import * as React from 'react';
@@ -69,7 +70,10 @@ export const SupportPage: React.FunctionComponent = () => {
                                   <div className="radio">
                                     <label htmlFor="alllogs">
                                       <input
-                                        data-testid={'support-page-all-logs'}
+                                        data-testid={toTestId(
+                                          'SupportPage',
+                                          'all-logs-input'
+                                        )}
                                         type="radio"
                                         id="alllogs"
                                         value="alllogs"
@@ -88,9 +92,10 @@ export const SupportPage: React.FunctionComponent = () => {
                                   <div className="radio">
                                     <label htmlFor="specificlogs">
                                       <input
-                                        data-testid={
-                                          'support-page-specific-logs'
-                                        }
+                                        data-testid={toTestId(
+                                          'SupportPage',
+                                          'specific-logs-input'
+                                        )}
                                         type="radio"
                                         id="specificlogs"
                                         value="specificlogs"
@@ -141,7 +146,10 @@ export const SupportPage: React.FunctionComponent = () => {
                                       };
                                       return (
                                         <button
-                                          data-testid={'support-page-download'}
+                                          data-testid={toTestId(
+                                            'SupportPage',
+                                            'download-button'
+                                          )}
                                           className="btn btn-primary"
                                           disabled={
                                             isEmpty(integrationsToDl) &&