diff --git a/app/cdap/components/DataPrep/AutoComplete/index.js b/app/cdap/components/DataPrep/AutoComplete/index.js
index e4542e3f539..33d21056027 100644
--- a/app/cdap/components/DataPrep/AutoComplete/index.js
+++ b/app/cdap/components/DataPrep/AutoComplete/index.js
@@ -26,9 +26,12 @@ import classnames from 'classnames';
 import NamespaceStore from 'services/NamespaceStore';
 import ee from 'event-emitter';
 import globalEvents from 'services/global-events';
+import { getDataTestid } from '../../../testids/TestidsProvider';
 
 require('./AutoComplete.scss');
 
+const TESTID_PREFIX = 'features.dataprep.workspace.cli.autocomplete';
+
 export default class DataPrepAutoComplete extends Component {
   constructor(props) {
     super(props);
@@ -219,6 +222,7 @@ export default class DataPrepAutoComplete extends Component {
         className={classnames('dataprep-auto-complete-container', {
           'has-error': this.props.hasError,
         })}
+        data-testid={getDataTestid(`${TESTID_PREFIX}.container`)}
       >
         {this.state.activeResults.map((row, index) => {
           return (
@@ -228,14 +232,26 @@ export default class DataPrepAutoComplete extends Component {
               })}
               key={row.uniqueId}
               onClick={this.handleRowClick.bind(this, row)}
+              data-testid={getDataTestid(`${TESTID_PREFIX}.directive.name`, row.item.directive)}
             >
-              <div className="directive-title">
+              <div
+                className="directive-title"
+                data-testid={getDataTestid(`${TESTID_PREFIX}.directive.title`)}
+              >
                 <strong>{row.item.directive}</strong>
               </div>
-              <div className="directive-description">{row.item.description}</div>
+              <div
+                className="directive-description"
+                data-testid={getDataTestid(`${TESTID_PREFIX}.directive.description`)}
+              >
+                {row.item.description}
+              </div>
 
               {this.state.matchedmatched || this.state.activeResults.length === 1 ? (
-                <div className="directive-usage">
+                <div
+                  className="directive-usage"
+                  data-testid={getDataTestid(`${TESTID_PREFIX}.directive.usage`)}
+                >
                   <span>Usage: </span>
                   <pre>{row.item.usage}</pre>
                 </div>
diff --git a/app/cdap/components/DataPrep/ColumnActionsDropdown/index.js b/app/cdap/components/DataPrep/ColumnActionsDropdown/index.js
index 04cf85e8b80..1186b080d18 100644
--- a/app/cdap/components/DataPrep/ColumnActionsDropdown/index.js
+++ b/app/cdap/components/DataPrep/ColumnActionsDropdown/index.js
@@ -27,6 +27,7 @@ import isEqual from 'lodash/isEqual';
 import DataPrepStore from 'components/DataPrep/store';
 import ScrollableList from 'components/shared/ScrollableList';
 import { Theme } from 'services/ThemeHelper';
+import { getDataTestid } from '../../../testids/TestidsProvider';
 
 // Directives List
 import ParseDirective from 'components/DataPrep/Directives/Parse';
@@ -57,6 +58,7 @@ import MapToTargetDirective from 'components/DataPrep/Directives/MapToTarget';
 import ee from 'event-emitter';
 
 require('./ColumnActionsDropdown.scss');
+const TESTID_PREFIX = 'features.dataprep.workspace.dataTable.head.directivesDropdown';
 
 export default class ColumnActionsDropdown extends Component {
   constructor(props) {
@@ -86,6 +88,7 @@ export default class ColumnActionsDropdown extends Component {
         id: uuidV4(),
         tag: ParseDirective,
         requiredColCount: 1,
+        testid: 'parse-directive',
       },
       {
         tag: 'divider',
@@ -97,6 +100,7 @@ export default class ColumnActionsDropdown extends Component {
           id: uuidV4(),
           tag: MapToTargetDirective,
           requiredColCount: 1,
+          testid: 'map-to-target-directive',
         },
         {
           tag: 'divider',
@@ -108,11 +112,13 @@ export default class ColumnActionsDropdown extends Component {
         id: uuidV4(),
         tag: SetCharacterEncoding,
         requiredColCount: 1,
+        testid: 'set-character-encoding-directive',
       },
       {
         id: uuidV4(),
         tag: ChangeDataTypeDirective,
         requiredColCount: 1,
+        testid: 'change-data-type-directive',
       },
       {
         tag: 'divider',
@@ -121,16 +127,19 @@ export default class ColumnActionsDropdown extends Component {
         id: uuidV4(),
         tag: Format,
         requiredColCount: 1,
+        testid: 'format-directive',
       },
       {
         id: uuidV4(),
         tag: Calculate,
         requiredColCount: 0,
+        testid: 'calculate-directive',
       },
       {
         id: uuidV4(),
         tag: CustomTransform,
         requiredColCount: 1,
+        testid: 'custom-transform-directive',
       },
       {
         tag: 'divider',
@@ -139,21 +148,25 @@ export default class ColumnActionsDropdown extends Component {
         id: uuidV4(),
         tag: FilterDirective,
         requiredColCount: 1,
+        testid: 'filter-directive',
       },
       {
         id: uuidV4(),
         tag: MarkAsError,
         requiredColCount: 1,
+        testid: 'mark-as-error-directive',
       },
       {
         id: uuidV4(),
         tag: FindAndReplaceDirective,
         requiredColCount: 1,
+        testid: 'find-and-replace-directive',
       },
       {
         id: uuidV4(),
         tag: FillNullOrEmpty,
         requiredColCount: 1,
+        testid: 'fill-null-or-empty-directive',
       },
       {
         tag: 'divider',
@@ -162,26 +175,31 @@ export default class ColumnActionsDropdown extends Component {
         id: uuidV4(),
         tag: CopyColumnDirective,
         requiredColCount: 1,
+        testid: 'copy-column-directive',
       },
       {
         id: uuidV4(),
         tag: DropColumnDirective,
         requiredColCount: 0,
+        testid: 'drop-column-directive',
       },
       {
         id: uuidV4(),
         tag: KeepColumnDirective,
         requiredColCount: 0,
+        testid: 'keep-column-directive',
       },
       {
         id: uuidV4(),
         tag: MergeColumnsDirective,
         requiredColCount: 2,
+        testid: 'merge-column-directive',
       },
       {
         id: uuidV4(),
         tag: SwapColumnsDirective,
         requiredColCount: 2,
+        testid: 'swap-column-directive',
       },
       {
         tag: 'divider',
@@ -190,21 +208,25 @@ export default class ColumnActionsDropdown extends Component {
         id: uuidV4(),
         tag: ExtractFields,
         requiredColCount: 1,
+        testid: 'extract-fields-directive',
       },
       {
         id: uuidV4(),
         tag: Explode,
         requiredColCount: 0,
+        testid: 'explode-directive',
       },
       {
         id: uuidV4(),
         tag: DefineVariableDirective,
         requiredColCount: 1,
+        testid: 'define-variable-directive',
       },
       {
         id: uuidV4(),
         tag: SetCounterDirective,
         requiredColCount: 1,
+        testid: 'set-counter-directive',
       },
       {
         tag: 'divider',
@@ -213,21 +235,25 @@ export default class ColumnActionsDropdown extends Component {
         id: uuidV4(),
         tag: MaskData,
         requiredColCount: 1,
+        testid: 'mask-data-directive',
       },
       {
         id: uuidV4(),
         tag: EncodeDecode,
         requiredColCount: 1,
+        testid: 'encode-decode-directive',
       },
       {
         id: uuidV4(),
         tag: Decode,
         requiredColCount: 1,
+        testid: 'decode-directive',
       },
       {
         id: uuidV4(),
         tag: Hash,
         requiredColCount: 1,
+        testid: 'hash-directive',
       }
     );
     this.eventEmitter = ee(ee);
@@ -391,6 +417,7 @@ export default class ColumnActionsDropdown extends Component {
                   key={directive.id}
                   onClick={!disabled ? this.directiveClick.bind(this, directive.id) : undefined}
                   className={classnames({ disabled: disabled })}
+                  data-testid={getDataTestid(`${TESTID_PREFIX}.menu`, directive.testid)}
                 >
                   <Tag
                     column={column}
@@ -420,6 +447,7 @@ export default class ColumnActionsDropdown extends Component {
           onClick={this.toggleDropdown}
           id={`dataprep-action-${this.dropdownId}`}
           disabled={this.props.disabled}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.toggleButton`)}
         />
         <UncontrolledTooltip
           target={`dataprep-action-${this.dropdownId}`}
diff --git a/app/cdap/components/DataPrep/DataPrepCLI/index.js b/app/cdap/components/DataPrep/DataPrepCLI/index.js
index c421982023e..6ac931a26e4 100644
--- a/app/cdap/components/DataPrep/DataPrepCLI/index.js
+++ b/app/cdap/components/DataPrep/DataPrepCLI/index.js
@@ -20,8 +20,11 @@ import DataPrepAutoComplete from 'components/DataPrep/AutoComplete';
 import { execute } from 'components/DataPrep/store/DataPrepActionCreator';
 import DataPrepStore from 'components/DataPrep/store';
 import DataPrepActions from 'components/DataPrep/store/DataPrepActions';
+import { getDataTestid } from '../../../testids/TestidsProvider';
 require('./DataPrepCLI.scss');
 
+const TESTID_PREFIX = 'features.dataprep.workspace.cli';
+
 export default class DataPrepCLI extends Component {
   static propTypes = {
     disabled: PropTypes.bool,
@@ -163,6 +166,7 @@ export default class DataPrepCLI extends Component {
               ref={(ref) => (this.directiveRef = ref)}
               onPaste={this.handlePaste}
               disabled={this.props.disabled}
+              data-testid={getDataTestid(`${TESTID_PREFIX}.input`)}
             />
           </div>
         </div>
diff --git a/app/cdap/components/DataPrep/DataPrepContentWrapper/index.js b/app/cdap/components/DataPrep/DataPrepContentWrapper/index.js
index 62b3dc32d9e..3333f60ceb0 100644
--- a/app/cdap/components/DataPrep/DataPrepContentWrapper/index.js
+++ b/app/cdap/components/DataPrep/DataPrepContentWrapper/index.js
@@ -29,6 +29,7 @@ import LoadingSVGCentered from 'components/shared/LoadingSVGCentered';
 import DataPrepSidePanel from 'components/DataPrep/DataPrepSidePanel';
 import classnames from 'classnames';
 import T from 'i18n-react';
+import { getDataTestid } from '../../../testids/TestidsProvider';
 require('./DataPrepContentWrapper.scss');
 
 const DataPrepVisualization = Loadable({
@@ -39,6 +40,7 @@ const DataPrepVisualization = Loadable({
   loading: LoadingSVGCentered,
 });
 const PREFIX = 'features.DataPrep.TopPanel';
+const TESTID_PREFIX = 'features.dataprep.workspace.topPanel';
 const DEFAULTVIEW = 'data';
 const DEFAULTSTORESTATE = { view: DEFAULTVIEW };
 const view = (state = DEFAULTVIEW, action = defaultAction) => {
@@ -66,6 +68,7 @@ function ContentSwitch({ onSwitchChange, activeTab }) {
           active: activeTab === 'data',
         })}
         onClick={onSwitchChange.bind(null, 'data')}
+        data-testid={getDataTestid(`${TESTID_PREFIX}.tabs.data`)}
       >
         {T.translate(`${PREFIX}.Tabs.dataprep`)}
       </div>
@@ -74,6 +77,7 @@ function ContentSwitch({ onSwitchChange, activeTab }) {
           active: activeTab === 'viz',
         })}
         onClick={onSwitchChange.bind(null, 'viz')}
+        data-testid={getDataTestid(`${TESTID_PREFIX}.tabs.viz`)}
       >
         {T.translate(`${PREFIX}.Tabs.dataviz`)}
       </div>
diff --git a/app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/ColumnsTabDetail.js b/app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/ColumnsTabDetail.js
index 81cede0b4a3..d0d833ae433 100644
--- a/app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/ColumnsTabDetail.js
+++ b/app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/ColumnsTabDetail.js
@@ -18,8 +18,11 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import T from 'i18n-react';
+import { getDataTestid } from '../../../../testids/TestidsProvider';
 
 const PREFIX = 'features.DataPrep.DataPrepSidePanel.ColumnsTab.ColumnDetail';
+const TESTID_PREFIX = 'features.dataprep.workspace.columnsPanel.list.column';
+
 export default function ColumnsTabDetail({ columnInfo }) {
   let { types } = columnInfo;
   if (!types) {
@@ -29,7 +32,10 @@ export default function ColumnsTabDetail({ columnInfo }) {
   return (
     <tr className="column-tab-details">
       <td colSpan="6">
-        <table className="table statistics-table">
+        <table
+          className="table statistics-table"
+          data-testid={getDataTestid(`${TESTID_PREFIX}.details`)}
+        >
           <thead>
             <tr>
               <th>{T.translate(`${PREFIX}.Header.inferredType`)}</th>
diff --git a/app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/ColumnsTabRow.js b/app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/ColumnsTabRow.js
index 897d61379d4..e26c84fa287 100644
--- a/app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/ColumnsTabRow.js
+++ b/app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/ColumnsTabRow.js
@@ -21,6 +21,9 @@ import { preventPropagation } from 'services/helpers';
 import isEqual from 'lodash/isEqual';
 import classnames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
+import { getDataTestid } from '../../../../testids/TestidsProvider';
+
+const TESTID_PREFIX = 'features.dataprep.workspace.columnsPanel.list.column';
 
 class ColumnsTabRow extends Component {
   constructor(props) {
@@ -78,6 +81,7 @@ class ColumnsTabRow extends Component {
           })}
           onClick={this.props.onShowDetails}
           ref={this.props.innerRef}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.listRow`, this.props.columnName)}
         >
           <td />
           <td>
@@ -87,12 +91,15 @@ class ColumnsTabRow extends Component {
                 'fa-square-o': !this.state.selected,
                 'fa-check-square': this.state.selected,
               })}
+              data-testid={getDataTestid(`${TESTID_PREFIX}.selectToggle`)}
             />
           </td>
           <td>
             <span>{this.props.index + 1}</span>
           </td>
-          <td className="column-name">{this.props.columnName}</td>
+          <td className="column-name" data-testid={getDataTestid(`${TESTID_PREFIX}.name`)}>
+            {this.props.columnName}
+          </td>
           <td className="text-right non-null">
             <span>{`${nonNull}%`}</span>
           </td>
diff --git a/app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/index.js b/app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/index.js
index 21e7617490d..33f781afa86 100644
--- a/app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/index.js
+++ b/app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/index.js
@@ -26,7 +26,10 @@ import findIndex from 'lodash/findIndex';
 import T from 'i18n-react';
 import ColumnActions from 'components/DataPrep/Directives/ColumnActions';
 import IconSVG from 'components/shared/IconSVG';
+import { getDataTestid } from '../../../../testids/TestidsProvider';
+
 const PREFIX = 'features.DataPrep.DataPrepSidePanel.ColumnsTab';
+const TESTID_PREFIX = 'features.dataprep.workspace.columnsPanel';
 
 require('./ColumnsTab.scss');
 
@@ -141,14 +144,25 @@ export default class ColumnsTab extends Component {
   renderDropdown() {
     return (
       <UncontrolledDropdown className="columns-tab-toggle-all-dropdown">
-        <DropdownToggle className="columns-tab-dropdown-toggle">
+        <DropdownToggle
+          className="columns-tab-dropdown-toggle"
+          data-testid={getDataTestid(`${TESTID_PREFIX}.list.header.actionsDropdownToggle`)}
+        >
           <IconSVG name="icon-caret-square-o-down" />
         </DropdownToggle>
         <DropdownMenu>
-          <DropdownItem className="toggle-all-option" onClick={this.clearAllColumns}>
+          <DropdownItem
+            className="toggle-all-option"
+            onClick={this.clearAllColumns}
+            data-testid={getDataTestid(`${TESTID_PREFIX}.list.header.unselectAllToggle`)}
+          >
             {T.translate(`${PREFIX}.toggle.clearAll`)}
           </DropdownItem>
-          <DropdownItem className="toggle-all-option" onClick={this.selectAllColumns}>
+          <DropdownItem
+            className="toggle-all-option"
+            onClick={this.selectAllColumns}
+            data-testid={getDataTestid(`${TESTID_PREFIX}.list.header.selectAllToggle`)}
+          >
             {T.translate(`${PREFIX}.toggle.selectAll`)}
           </DropdownItem>
         </DropdownMenu>
@@ -300,12 +314,17 @@ export default class ColumnsTab extends Component {
               value={this.state.searchText}
               onChange={this.handleChangeSearch}
               ref={(ref) => (this.searchBox = ref)}
+              data-testid={getDataTestid(`${TESTID_PREFIX}.search.input`)}
             />
 
             {this.state.searchText.length === 0 ? (
               <span className="fa fa-search" />
             ) : (
-              <span className="fa fa-times-circle" onClick={this.clearSearch} />
+              <span
+                className="fa fa-times-circle"
+                onClick={this.clearSearch}
+                data-testid={getDataTestid(`${TESTID_PREFIX}.search.clearButton`)}
+              />
             )}
           </div>
           <ColumnActions />
diff --git a/app/cdap/components/DataPrep/DataPrepSidePanel/DirectivesTab/index.js b/app/cdap/components/DataPrep/DataPrepSidePanel/DirectivesTab/index.js
index 31cd2f7dfa8..a89b8fac0f2 100644
--- a/app/cdap/components/DataPrep/DataPrepSidePanel/DirectivesTab/index.js
+++ b/app/cdap/components/DataPrep/DataPrepSidePanel/DirectivesTab/index.js
@@ -21,8 +21,12 @@ import DirectivesTabRow from 'components/DataPrep/DataPrepSidePanel/DirectivesTa
 import fileDownload from 'js-file-download';
 import { execute } from 'components/DataPrep/store/DataPrepActionCreator';
 import T from 'i18n-react';
+import { getDataTestid } from '../../../../testids/TestidsProvider';
 
 require('./DirectivesTab.scss');
+
+const TESTID_PREFIX = 'features.dataprep.workspace.transformationsPanel';
+
 export default class DirectivesTab extends Component {
   constructor(props) {
     super(props);
@@ -101,7 +105,11 @@ export default class DirectivesTab extends Component {
         <div className="directives-tab-header">
           <span>#</span>
           <span>{T.translate('features.DataPrep.DataPrepSidePanel.DirectivesTab.label')}</span>
-          <button className="btn btn-link float-right" onClick={this.download}>
+          <button
+            className="btn btn-link float-right"
+            onClick={this.download}
+            data-testid={getDataTestid(`${TESTID_PREFIX}.downloadButton`)}
+          >
             <span className="fa fa-download" />
           </button>
         </div>
diff --git a/app/cdap/components/DataPrep/DataPrepSidePanel/index.js b/app/cdap/components/DataPrep/DataPrepSidePanel/index.js
index bb17ae7430a..47a5e71f77a 100644
--- a/app/cdap/components/DataPrep/DataPrepSidePanel/index.js
+++ b/app/cdap/components/DataPrep/DataPrepSidePanel/index.js
@@ -23,9 +23,11 @@ import TargetTab from 'components/DataPrep/DataPrepSidePanel/TargetTab';
 import DirectivesTab from 'components/DataPrep/DataPrepSidePanel/DirectivesTab';
 import T from 'i18n-react';
 import If from 'components/shared/If';
+import { getDataTestid } from '../../../testids/TestidsProvider';
 
 require('./DataPrepSidePanel.scss');
 const PREFIX = 'features.DataPrep.DataPrepSidePanel';
+const TESTID_PREFIX = 'features.dataprep.workspace.rightSidePanel';
 
 export default class DataPrepSidePanel extends Component {
   constructor(props) {
@@ -123,6 +125,7 @@ export default class DataPrepSidePanel extends Component {
             <div
               className={classnames('tab', { active: this.state.activeTab === 1 })}
               onClick={this.setActiveTab.bind(this, 1)}
+              data-testid={getDataTestid(`${TESTID_PREFIX}.tabs.columns`)}
             >
               {T.translate(`${PREFIX}.columnsTabLabel`, {
                 columnsCount: this.state.headers.length,
@@ -131,6 +134,7 @@ export default class DataPrepSidePanel extends Component {
             <div
               className={classnames('tab', { active: this.state.activeTab === 2 })}
               onClick={this.setActiveTab.bind(this, 2)}
+              data-testid={getDataTestid(`${TESTID_PREFIX}.tabs.transformations`)}
             >
               {T.translate(`${PREFIX}.directivesTabLabel`, {
                 directivesCount: this.state.directives.length,
diff --git a/app/cdap/components/DataPrep/DataPrepTable/DataType/index.js b/app/cdap/components/DataPrep/DataPrepTable/DataType/index.js
index 9a136521d9a..dc06936b6b4 100644
--- a/app/cdap/components/DataPrep/DataPrepTable/DataType/index.js
+++ b/app/cdap/components/DataPrep/DataPrepTable/DataType/index.js
@@ -20,8 +20,10 @@ import T from 'i18n-react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import DataPrepStore from 'components/DataPrep/store';
+import { getDataTestid } from '../../../../testids/TestidsProvider';
 
 const PREFIX = 'features.DataPrep.DataPrepTable.DataType';
+const TESTID_PREFIX = 'features.dataprep.workspace.dataTable';
 
 export default class DataType extends Component {
   constructor(props) {
@@ -54,6 +56,7 @@ export default class DataType extends Component {
         className={classnames('col-type', {
           'data-type-updated': this.state.highlightedDataType === this.props.columnName,
         })}
+        data-testid={getDataTestid(`${TESTID_PREFIX}.head.dataType`)}
       >
         {types[this.props.columnName] || T.translate(`${PREFIX}.unknown`)}
       </div>
diff --git a/app/cdap/components/DataPrep/DataPrepTable/index.js b/app/cdap/components/DataPrep/DataPrepTable/index.js
index b0bb12dd541..f680c31175e 100644
--- a/app/cdap/components/DataPrep/DataPrepTable/index.js
+++ b/app/cdap/components/DataPrep/DataPrepTable/index.js
@@ -33,6 +33,8 @@ import DataQuality from 'components/DataPrep/DataPrepTable/DataQuality';
 import DataType from 'components/DataPrep/DataPrepTable/DataType';
 import Page500 from 'components/500';
 import Page404 from 'components/404';
+import { getDataTestid } from '../../../testids/TestidsProvider';
+
 // Lazy load polyfill in safari as InteresectionObservers are not implemented there yet.
 (async function() {
   typeof IntersectionObserver === 'undefined'
@@ -41,6 +43,7 @@ import Page404 from 'components/404';
 })();
 
 const PREFIX = 'features.DataPrep.DataPrepTable';
+const TESTID_PREFIX = 'features.dataprep.workspace.dataTable';
 const DEFAULT_WINDOW_SIZE = 100;
 export default class DataPrepTable extends Component {
   static propTypes = {
@@ -287,6 +290,7 @@ export default class DataPrepTable extends Component {
                     dropdownOpened: this.state.columnDropdownOpen === head.name,
                   })}
                   key={head.name}
+                  data-testid={getDataTestid(`${TESTID_PREFIX}.head.col`, index + 1)}
                 >
                   <DataQuality columnInfo={this.state.columns[head.name]} />
                   <div className="column-wrapper-container">
@@ -303,6 +307,7 @@ export default class DataPrepTable extends Component {
                         <span
                           className="header-text"
                           onClick={this.switchToEditColumnName.bind(this, head)}
+                          data-testid={getDataTestid(`${TESTID_PREFIX}.head.columnName`)}
                         >
                           <span>{head.name}</span>
                         </span>
@@ -314,6 +319,7 @@ export default class DataPrepTable extends Component {
                             onWarning={this.showWarningMessage.bind(this, index)}
                             allowSpace={false}
                             shouldSelect={true}
+                            dataTestid={getDataTestid(`${TESTID_PREFIX}.head.columnNameInput`)}
                           />
                           {head.showDuplicateWarning || head.showInvalidWarning ? (
                             <WarningContainer
@@ -346,6 +352,7 @@ export default class DataPrepTable extends Component {
                           'fa-square-o': !this.columnIsSelected(head.name),
                           'fa-check-square': this.columnIsSelected(head.name),
                         })}
+                        data-testid={getDataTestid(`${TESTID_PREFIX}.head.columnSelectToggle`)}
                       />
                     </div>
                   </div>
@@ -358,10 +365,20 @@ export default class DataPrepTable extends Component {
           {data.slice(0, this.state.windowSize).map((row) => {
             return (
               <tr key={row.uniqueId} id={`dataprep-${row.scrollId}`}>
-                <td>{row.scrollId + 1}</td>
+                <td
+                  data-testid={getDataTestid(`${TESTID_PREFIX}.body.cell`, `${row.scrollId + 1}-0`)}
+                >
+                  {row.scrollId + 1}
+                </td>
                 {headers.map((head, i) => {
                   return (
-                    <td key={i}>
+                    <td
+                      key={i}
+                      data-testid={getDataTestid(
+                        `${TESTID_PREFIX}.body.cell`,
+                        `${row.scrollId + 1}-${i + 1}`
+                      )}
+                    >
                       <div>{row[head.name]}</div>
                     </td>
                   );
diff --git a/app/cdap/components/DataPrep/Directives/ColumnActions/index.js b/app/cdap/components/DataPrep/Directives/ColumnActions/index.js
index 88345b9b23c..6c69749bb13 100644
--- a/app/cdap/components/DataPrep/Directives/ColumnActions/index.js
+++ b/app/cdap/components/DataPrep/Directives/ColumnActions/index.js
@@ -24,9 +24,12 @@ import DataPrepActions from 'components/DataPrep/store/DataPrepActions';
 import Bulkset from 'components/DataPrep/Directives/ColumnActions/Bulkset';
 import ReplaceColumns from 'components/DataPrep/Directives/ColumnActions/ReplaceColumns';
 import T from 'i18n-react';
+import { getDataTestid } from '../../../../testids/TestidsProvider';
 require('./ColumnActions.scss');
 
 const PREFIX = 'features.DataPrep.Directives.ColumnActions';
+const TESTID_PREFIX = 'features.dataprep.workspace.columnsPanel.actionsDropdown';
+
 export default class ColumnActions extends Component {
   constructor(props) {
     super(props);
@@ -96,7 +99,7 @@ export default class ColumnActions extends Component {
     return (
       <div className="columns-actions-dropdown">
         <UncontrolledDropdown className="collapsed-dropdown-toggle">
-          <DropdownToggle>
+          <DropdownToggle data-testid={getDataTestid(`${TESTID_PREFIX}.dropdownToggle`)}>
             <span>{T.translate('features.DataPrep.Directives.ColumnActions.label')}</span>
             <IconSVG name="icon-chevron-down" />
           </DropdownToggle>
@@ -107,6 +110,7 @@ export default class ColumnActions extends Component {
                   key={i}
                   title={directive.name}
                   onClick={this.setActiveDirective.bind(this, i)}
+                  data-testid={getDataTestid(`${TESTID_PREFIX}.directive`, directive.name)}
                 >
                   {directive.label}
                 </DropdownItem>
diff --git a/app/cdap/components/DataPrep/Directives/Parse/Modals/CSVModal.js b/app/cdap/components/DataPrep/Directives/Parse/Modals/CSVModal.js
index 2075a248155..eda683204a8 100644
--- a/app/cdap/components/DataPrep/Directives/Parse/Modals/CSVModal.js
+++ b/app/cdap/components/DataPrep/Directives/Parse/Modals/CSVModal.js
@@ -22,8 +22,10 @@ import classnames from 'classnames';
 import T from 'i18n-react';
 import MouseTrap from 'mousetrap';
 import DeprecatedMessage from 'components/shared/DeprecatedMessage';
+import { getDataTestid } from '../../../../../testids/TestidsProvider';
 
 const PREFIX = 'features.DataPrep.Directives.Parse';
+const TESTID_PREFIX = 'features.dataprep.directives.parse.modal.csv';
 
 const OPTIONS_MAP = {
   COMMA: ',',
@@ -97,6 +99,7 @@ export default class CSVModal extends Component {
           onChange={this.handleCustomDelimiterChange}
           placeholder={T.translate(`${PREFIX}.Parsers.CSV.customPlaceholder`)}
           autoFocus
+          data-testid={getDataTestid(`${TESTID_PREFIX}.customDelimeterInput`)}
         />
       </div>
     );
@@ -117,9 +120,15 @@ export default class CSVModal extends Component {
         className="dataprep-parse-modal cdap-modal"
       >
         <ModalHeader>
-          <span>{T.translate(`${PREFIX}.modalTitle`, { parser: 'CSV' })}</span>
-
-          <div className="close-section float-right" onClick={this.props.toggle}>
+          <span data-testid={getDataTestid(`${TESTID_PREFIX}.title`)}>
+            {T.translate(`${PREFIX}.modalTitle`, { parser: 'CSV' })}
+          </span>
+
+          <div
+            className="close-section float-right"
+            onClick={this.props.toggle}
+            data-testid={getDataTestid(`${TESTID_PREFIX}.closeButton`)}
+          >
             <span className="fa fa-times" />
           </div>
         </ModalHeader>
@@ -131,7 +140,11 @@ export default class CSVModal extends Component {
           <div className="list-options">
             {options.map((option) => {
               return (
-                <div key={option} onClick={this.selectDelimiter.bind(this, option)}>
+                <div
+                  key={option}
+                  onClick={this.selectDelimiter.bind(this, option)}
+                  data-testid={getDataTestid(`${TESTID_PREFIX}.option`, option)}
+                >
                   <span
                     className={classnames('fa', {
                       'fa-circle-o': option !== this.state.delimiter,
@@ -146,7 +159,10 @@ export default class CSVModal extends Component {
             {this.renderCustomText()}
           </div>
           <div className="optional-config">
-            <span onClick={this.toggleSetFirstRow}>
+            <span
+              onClick={this.toggleSetFirstRow}
+              data-testid={getDataTestid(`${TESTID_PREFIX}.firstRowAsHeaderToggle`)}
+            >
               <span
                 className={classnames('fa', {
                   'fa-square-o': !this.state.firstRowHeader,
@@ -160,10 +176,19 @@ export default class CSVModal extends Component {
         </ModalBody>
 
         <ModalFooter>
-          <button className="btn btn-primary" onClick={this.apply} disabled={disabled}>
+          <button
+            className="btn btn-primary"
+            onClick={this.apply}
+            disabled={disabled}
+            data-testid={getDataTestid(`${TESTID_PREFIX}.applyButton`)}
+          >
             {T.translate('features.DataPrep.Directives.apply')}
           </button>
-          <button className="btn btn-secondary" onClick={this.props.toggle}>
+          <button
+            className="btn btn-secondary"
+            onClick={this.props.toggle}
+            data-testid={getDataTestid(`${TESTID_PREFIX}.cancelButton`)}
+          >
             {T.translate('features.DataPrep.Directives.cancel')}
           </button>
         </ModalFooter>
diff --git a/app/cdap/components/DataPrep/Directives/Parse/Modals/LogModal.js b/app/cdap/components/DataPrep/Directives/Parse/Modals/LogModal.js
index 80f55c07f6a..fdeba249d95 100644
--- a/app/cdap/components/DataPrep/Directives/Parse/Modals/LogModal.js
+++ b/app/cdap/components/DataPrep/Directives/Parse/Modals/LogModal.js
@@ -21,8 +21,10 @@ import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import classnames from 'classnames';
 import T from 'i18n-react';
 import MouseTrap from 'mousetrap';
+import { getDataTestid } from '../../../../../testids/TestidsProvider';
 
 const PREFIX = 'features.DataPrep.Directives.Parse';
+const TESTID_PREFIX = 'features.dataprep.directives.parse.modal.log';
 
 const OPTIONS_MAP = {
   COMMON: 'common',
@@ -87,6 +89,7 @@ export default class LogModal extends Component {
           onChange={this.handleCustomFormatChange}
           placeholder={T.translate(`${PREFIX}.Parsers.LOG.customPlaceholder`)}
           autoFocus
+          data-testid={getDataTestid(`${TESTID_PREFIX}.customLogFormatInput`)}
         />
       </div>
     );
@@ -107,9 +110,15 @@ export default class LogModal extends Component {
         className="dataprep-parse-modal cdap-modal"
       >
         <ModalHeader>
-          <span>{T.translate(`${PREFIX}.modalTitle`, { parser: 'Log' })}</span>
-
-          <div className="close-section float-right" onClick={this.props.toggle}>
+          <span data-testid={getDataTestid(`${TESTID_PREFIX}.title`)}>
+            {T.translate(`${PREFIX}.modalTitle`, { parser: 'Log' })}
+          </span>
+
+          <div
+            className="close-section float-right"
+            onClick={this.props.toggle}
+            data-testid={getDataTestid(`${TESTID_PREFIX}.closeButton`)}
+          >
             <span className="fa fa-times" />
           </div>
         </ModalHeader>
@@ -121,7 +130,11 @@ export default class LogModal extends Component {
           <div className="list-options">
             {options.map((option) => {
               return (
-                <div key={option} onClick={this.selectFormat.bind(this, option)}>
+                <div
+                  key={option}
+                  onClick={this.selectFormat.bind(this, option)}
+                  data-testid={getDataTestid(`${TESTID_PREFIX}.option`, option)}
+                >
                   <span
                     className={classnames('fa', {
                       'fa-circle-o': option !== this.state.format,
@@ -138,10 +151,19 @@ export default class LogModal extends Component {
         </ModalBody>
 
         <ModalFooter>
-          <button className="btn btn-primary" onClick={this.apply} disabled={disabled}>
+          <button
+            className="btn btn-primary"
+            onClick={this.apply}
+            disabled={disabled}
+            data-testid={getDataTestid(`${TESTID_PREFIX}.applyButton`)}
+          >
             {T.translate('features.DataPrep.Directives.apply')}
           </button>
-          <button className="btn btn-secondary" onClick={this.props.toggle}>
+          <button
+            className="btn btn-secondary"
+            onClick={this.props.toggle}
+            data-testid={getDataTestid(`${TESTID_PREFIX}.cancelButton`)}
+          >
             {T.translate('features.DataPrep.Directives.cancel')}
           </button>
         </ModalFooter>
diff --git a/app/cdap/components/DataPrep/Directives/Parse/Modals/XmlToJsonModal.tsx b/app/cdap/components/DataPrep/Directives/Parse/Modals/XmlToJsonModal.tsx
index 3cce9069992..9a743cfa708 100644
--- a/app/cdap/components/DataPrep/Directives/Parse/Modals/XmlToJsonModal.tsx
+++ b/app/cdap/components/DataPrep/Directives/Parse/Modals/XmlToJsonModal.tsx
@@ -19,8 +19,10 @@ import T from 'i18n-react';
 import Mousetrap from 'mousetrap';
 import classnames from 'classnames';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { getDataTestid } from '../../../../../testids/TestidsProvider';
 
 const PREFIX = 'features.DataPrep.Directives.Parse';
+const TESTID_PREFIX = 'features.dataprep.directives.parse.modal.xmlToJson';
 
 interface IXmlToJsonProps {
   toggle(): void;
@@ -62,8 +64,14 @@ export default function XmlToJsonModal({ toggle, onApply }: IXmlToJsonProps) {
       autoFocus={false}
     >
       <ModalHeader>
-        <span>{T.translate(`${PREFIX}.modalTitle`, { parser: parserTitle })}</span>
-        <div className="close-section float-right" onClick={toggle}>
+        <span data-testid={getDataTestid(`${TESTID_PREFIX}.title`)}>
+          {T.translate(`${PREFIX}.modalTitle`, { parser: parserTitle })}
+        </span>
+        <div
+          className="close-section float-right"
+          onClick={toggle}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.closeButton`)}
+        >
           <span className="fa fa-times" />
         </div>
       </ModalHeader>
@@ -81,11 +89,15 @@ export default function XmlToJsonModal({ toggle, onApply }: IXmlToJsonProps) {
             value={depthValue}
             onChange={onDepthChange}
             autoFocus
+            data-testid={getDataTestid(`${TESTID_PREFIX}.depthInput`)}
           />
         </div>
         <br />
         <div className="optional-config">
-          <span onClick={toggleKeepStrings}>
+          <span
+            onClick={toggleKeepStrings}
+            data-testid={getDataTestid(`${TESTID_PREFIX}.keepStringsToggle`)}
+          >
             <span
               className={classnames('fa', {
                 'fa-square-o': !keepStrings,
@@ -98,10 +110,18 @@ export default function XmlToJsonModal({ toggle, onApply }: IXmlToJsonProps) {
       </ModalBody>
 
       <ModalFooter>
-        <button className="btn btn-primary" onClick={handleApply}>
+        <button
+          className="btn btn-primary"
+          onClick={handleApply}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.applyButton`)}
+        >
           {T.translate('features.DataPrep.Directives.apply')}
         </button>
-        <button className="btn btn-secondary" onClick={toggle}>
+        <button
+          className="btn btn-secondary"
+          onClick={toggle}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.cancelButton`)}
+        >
           {T.translate('features.DataPrep.Directives.cancel')}
         </button>
       </ModalFooter>
diff --git a/app/cdap/components/DataPrep/Directives/Parse/index.js b/app/cdap/components/DataPrep/Directives/Parse/index.js
index c5761d3306e..e9d0221bcef 100644
--- a/app/cdap/components/DataPrep/Directives/Parse/index.js
+++ b/app/cdap/components/DataPrep/Directives/Parse/index.js
@@ -31,8 +31,10 @@ import XmlToJsonModal from 'components/DataPrep/Directives/Parse/Modals/XmlToJso
 import DataPrepStore from 'components/DataPrep/store';
 import DataPrepActions from 'components/DataPrep/store/DataPrepActions';
 import { setPopoverOffset } from 'components/DataPrep/helper';
+import { getDataTestid } from '../../../../testids/TestidsProvider';
 
 const SUFFIX = 'features.DataPrep.Directives.Parse';
+const TESTID_PREFIX = 'features.dataprep.directives.parse';
 
 require('./ParseDirective.scss');
 
@@ -252,7 +254,7 @@ export default class ParseDirective extends Component {
         <div className="parse-options">
           {this.PARSE_OPTIONS.map((option) => {
             return (
-              <div key={option} className="option" onClick={this.selectParse.bind(this, option)}>
+              <div key={option} className="option" onClick={this.selectParse.bind(this, option)} data-testid={getDataTestid(`${TESTID_PREFIX}.option`, option)}>
                 {T.translate(`${SUFFIX}.Parsers.${option}.label`)}
               </div>
             );
@@ -271,6 +273,7 @@ export default class ParseDirective extends Component {
         className={classnames('parse-directive clearfix action-item', {
           active: this.props.isOpen,
         })}
+        data-testid={getDataTestid(`${TESTID_PREFIX}.title`)}
       >
         <span>{T.translate(`${SUFFIX}.title`)}</span>
 
diff --git a/app/cdap/components/DataPrep/TopPanel/index.js b/app/cdap/components/DataPrep/TopPanel/index.js
index eba1d6187eb..2491de0ce60 100644
--- a/app/cdap/components/DataPrep/TopPanel/index.js
+++ b/app/cdap/components/DataPrep/TopPanel/index.js
@@ -30,6 +30,7 @@ import IconSVG from 'components/shared/IconSVG';
 import DataPrepPlusButton from 'components/DataPrep/TopPanel/PlusButton';
 import { Theme } from 'services/ThemeHelper';
 import classnames from 'classnames';
+import { getDataTestid } from '../../../testids/TestidsProvider';
 
 const SchemaModal = Loadable({
   loader: () =>
@@ -58,6 +59,7 @@ const IngestDataFromDataPrep = Loadable({
 
 require('./TopPanel.scss');
 const PREFIX = 'features.DataPrep.TopPanel';
+const TESTID_PREFIX = 'features.dataprep.workspace.topPanel';
 
 export default class DataPrepTopPanel extends Component {
   constructor(props) {
@@ -179,11 +181,13 @@ export default class DataPrepTopPanel extends Component {
         isNil(this.state.workspaceInfo) ||
         objectQuery(this.state, 'workspaceInfo', 'properties', 'connection') === 'upload',
       disabledTooltip: T.translate(`${PREFIX}.copyToCDAPDatasetBtn.disabledTooltip`),
+      dataTestid: getDataTestid(`${TESTID_PREFIX}.actionButtons.moreDropdownMenu.ingestData`),
     },
     {
       label: T.translate(`${PREFIX}.viewSchemaBtnLabel`),
       iconName: 'icon-info-circle',
       onClick: this.toggleSchemaModal,
+      dataTestid: getDataTestid(`${TESTID_PREFIX}.actionButtons.moreDropdownMenu.viewSchema`),
     },
   ];
 
@@ -198,15 +202,26 @@ export default class DataPrepTopPanel extends Component {
 
     return (
       <div className="data-prep-name">
-        <div className="connection-type truncate" title={connectionInfo}>
+        <div
+          className="connection-type truncate"
+          title={connectionInfo}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.connectionType`)}
+        >
           {connectionInfo}
         </div>
 
         <div className="title_bar">
-          <div className="title" title={workspaceName}>
+          <div
+            className="title"
+            title={workspaceName}
+            data-testid={getDataTestid(`${TESTID_PREFIX}.workspaceName`)}
+          >
             {workspaceName}
           </div>
-          <div className="row_column_count">
+          <div
+            className="row_column_count"
+            data-testid={getDataTestid(`${TESTID_PREFIX}.rowsColumnsCount`)}
+          >
             {T.translate('features.DataPrep.TopPanel.columns')}: {dataprep.headers.length} |{' '}
             {T.translate('features.DataPrep.TopPanel.rows')}: {dataprep.data.length}
           </div>
@@ -253,6 +268,7 @@ export default class DataPrepTopPanel extends Component {
           })}
           title={menuItem.label}
           onClick={isDisabled ? preventPropagation : menuItem.onClick}
+          data-testid={menuItem.dataTestid}
           {...props}
         >
           {getMenuItem(menuItem)}
@@ -272,7 +288,11 @@ export default class DataPrepTopPanel extends Component {
   renderMenu() {
     return (
       <Popover
-        target={() => <span>{T.translate('features.DataPrep.TopPanel.more')}</span>}
+        target={() => (
+          <span data-testid={getDataTestid(`${TESTID_PREFIX}.actionButtons.moreDropdownButton`)}>
+            {T.translate('features.DataPrep.TopPanel.more')}
+          </span>
+        )}
         targetDimension={{ width: '31px', height: '31px' }}
         className="more-dropdown"
         placement="bottom"
@@ -296,6 +316,7 @@ export default class DataPrepTopPanel extends Component {
             ? 'disabled'
             : false
         }
+        data-testid={getDataTestid(`${TESTID_PREFIX}.actionButtons.apply`)}
       >
         {this.state.onSubmitLoading ? <IconSVG name="icon-spinner" className="fa-spin" /> : null}
         <span>{T.translate(`${PREFIX}.applyBtnLabel`)}</span>
@@ -306,7 +327,11 @@ export default class DataPrepTopPanel extends Component {
   renderUpgradeBtn() {
     return (
       <div className="upgrade-button">
-        <button className="btn btn-info" onClick={this.toggleUpgradeModal}>
+        <button
+          className="btn btn-info"
+          onClick={this.toggleUpgradeModal}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.actionButtons.upgradeButton`)}
+        >
           <span className="fa fa-wrench fa-fw" />
           {T.translate(`${PREFIX}.upgradeBtnLabel`)}
         </button>
@@ -330,7 +355,11 @@ export default class DataPrepTopPanel extends Component {
           {this.state.higherVersion ? this.renderUpgradeBtn() : null}
           {this.props.mode === 'ROUTED_WORKSPACE' ? this.renderApplyBtn() : null}
           {this.props.mode !== 'ROUTED_WORKSPACE' ? (
-            <button className="btn btn-primary" onClick={this.toggleAddToPipelineModal}>
+            <button
+              className="btn btn-primary"
+              onClick={this.toggleAddToPipelineModal}
+              data-testid={getDataTestid(`${TESTID_PREFIX}.actionButtons.createPipeline`)}
+            >
               {T.translate(`${PREFIX}.addToPipelineBtnLabel`)}
             </button>
           ) : null}
diff --git a/app/cdap/components/DataPrep/WorkspaceTabs/WorkspaceTab/index.js b/app/cdap/components/DataPrep/WorkspaceTabs/WorkspaceTab/index.js
index 75a6e915820..93b139e941b 100644
--- a/app/cdap/components/DataPrep/WorkspaceTabs/WorkspaceTab/index.js
+++ b/app/cdap/components/DataPrep/WorkspaceTabs/WorkspaceTab/index.js
@@ -20,10 +20,12 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import NamespaceStore from 'services/NamespaceStore';
 import IconSVG from 'components/shared/IconSVG';
+import { getDataTestid } from '../../../../testids/TestidsProvider';
 
 require('./WorkspaceTab.scss');
 
 const MAX_NAME_WIDTH = 140;
+const TESTID_PREFIX = 'features.dataprep.workspaceTabs.workspaceTab';
 
 export default class WorkspaceTab extends Component {
   constructor(props) {
@@ -79,11 +81,18 @@ export default class WorkspaceTab extends Component {
         className="workspace-tab active clearfix"
         title={workspace.workspaceName}
       >
-        <span className="display-name-container float-left">
+        <span
+          className="display-name-container float-left"
+          data-testid={getDataTestid(`${TESTID_PREFIX}.name`, workspace.workspaceName)}
+        >
           {this.state.overflow ? this.renderOverflow() : this.renderName()}
         </span>
 
-        <span className="fa fa-fw delete-workspace float-right" onClick={this.props.onDelete}>
+        <span
+          className="fa fa-fw delete-workspace float-right"
+          onClick={this.props.onDelete}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.closeButton`, workspace.workspaceName)}
+        >
           <IconSVG name="icon-close" />
         </span>
       </div>
@@ -95,13 +104,20 @@ export default class WorkspaceTab extends Component {
 
     return (
       <div id={workspace.id} className="workspace-tab clearfix" title={workspace.workspaceName}>
-        <span className="display-name-container float-left">
+        <span
+          className="display-name-container float-left"
+          data-testid={getDataTestid(`${TESTID_PREFIX}.name`, workspace.id)}
+        >
           <Link to={`/ns/${this.namespace}/wrangler/${workspace.workspaceId}`}>
             {this.state.overflow ? this.renderOverflow() : this.renderName()}
           </Link>
         </span>
 
-        <span className="fa fa-fw delete-workspace float-right" onClick={this.props.onDelete}>
+        <span
+          className="fa fa-fw delete-workspace float-right"
+          onClick={this.props.onDelete}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.closeButton`, workspace.id)}
+        >
           <IconSVG name="icon-close" />
         </span>
       </div>
diff --git a/app/cdap/components/Home/HomeActions/ActionCard.tsx b/app/cdap/components/Home/HomeActions/ActionCard.tsx
index 238398d39b3..cba606c26b1 100644
--- a/app/cdap/components/Home/HomeActions/ActionCard.tsx
+++ b/app/cdap/components/Home/HomeActions/ActionCard.tsx
@@ -90,6 +90,7 @@ interface IActionCardProps extends WithStyles<typeof styles> {
     description: string;
     links: ILink[];
     experiment?: string;
+    dataTestId?: string;
   };
 }
 
@@ -115,14 +116,24 @@ const ActionCardView: React.FC<IActionCardProps> = ({ config, classes }) => {
 
           if (isNativeLink) {
             return (
-              <a href={url} key={link.label} className={classes.link}>
+              <a
+                href={url}
+                key={link.label}
+                className={classes.link}
+                data-testid={config.dataTestId}
+              >
                 {link.label}
               </a>
             );
           } else {
             url = url.slice(linkPrefix.length);
             return (
-              <Link to={url} key={link.label} className={classes.link}>
+              <Link
+                to={url}
+                key={link.label}
+                className={classes.link}
+                data-testid={config.dataTestId}
+              >
                 {link.label}
               </Link>
             );
diff --git a/app/cdap/components/Home/HomeActions/ActionConfig.ts b/app/cdap/components/Home/HomeActions/ActionConfig.ts
index 409df04447f..c837b78ad95 100644
--- a/app/cdap/components/Home/HomeActions/ActionConfig.ts
+++ b/app/cdap/components/Home/HomeActions/ActionConfig.ts
@@ -16,7 +16,9 @@
 
 import T from 'i18n-react';
 import { Theme } from 'services/ThemeHelper';
+import { getDataTestid } from '../../../testids/TestidsProvider';
 const PREFIX = 'features.Home';
+const TESTID_PREFIX = 'features.home';
 
 interface ILink {
   label: string;
@@ -30,6 +32,7 @@ interface IAction {
   links: ILink[];
   experiment?: string;
   featureFlag?: boolean;
+  dataTestId?: string;
 }
 
 export const ActionConfig: IAction[] = [
@@ -49,6 +52,7 @@ export const ActionConfig: IAction[] = [
     img: '/cdap_assets/img/cleanse_data.svg',
     title: T.translate(`${PREFIX}.Wrangler.title`).toString(),
     description: T.translate(`${PREFIX}.Wrangler.description`).toString(),
+    dataTestId: getDataTestid(`${TESTID_PREFIX}.wrangler.pageLink`),
     links: [
       {
         label: T.translate(`${PREFIX}.Wrangler.linkLabel`).toString(),
diff --git a/app/cdap/components/TextboxOnValium/index.js b/app/cdap/components/TextboxOnValium/index.js
index a8e09b5d285..4339474e59f 100644
--- a/app/cdap/components/TextboxOnValium/index.js
+++ b/app/cdap/components/TextboxOnValium/index.js
@@ -115,6 +115,7 @@ export default class TextboxOnValium extends Component {
         value={this.state.textValue}
         onKeyPress={this.handleKeyPress}
         onKeyUp={!this.props.onKeyUp ? this.handleKeyPress : this.props.onKeyUp}
+        data-testid={this.props.dataTestid}
       />
     );
   }
@@ -124,6 +125,7 @@ TextboxOnValium.defaultProps = {
   allowSpace: true,
   validCharacterRegex: null,
   disabled: false,
+  dataTestid: '',
 };
 
 TextboxOnValium.propTypes = {
@@ -138,4 +140,5 @@ TextboxOnValium.propTypes = {
   shouldSelect: PropTypes.bool,
   validCharacterRegex: PropTypes.object, // regex expression
   disabled: PropTypes.bool,
+  dataTestid: PropTypes.string,
 };
diff --git a/app/cdap/components/shared/ScrollableList/index.js b/app/cdap/components/shared/ScrollableList/index.js
index e9824613b53..11dfe787c2d 100644
--- a/app/cdap/components/shared/ScrollableList/index.js
+++ b/app/cdap/components/shared/ScrollableList/index.js
@@ -20,8 +20,10 @@ import React, { Component } from 'react';
 import IconSVG from 'components/shared/IconSVG';
 import findIndex from 'lodash/findIndex';
 import classnames from 'classnames';
+import { getDataTestid } from '../../../testids/TestidsProvider';
 
 require('./ScrollableList.scss');
+const TESTID_PREFIX = 'common.components.scrollableList';
 
 export default class ScrollableList extends Component {
   constructor(props) {
@@ -161,6 +163,7 @@ export default class ScrollableList extends Component {
         onClick={this.scrollDown}
         onMouseEnter={this.onMouseEnter.bind(this, this.scrollDown)}
         onMouseOut={this.onMouseOut}
+        data-testid={getDataTestid(`${TESTID_PREFIX}.scrollDownButton`)}
       >
         <IconSVG name="icon-caret-down" />
       </div>
@@ -175,6 +178,7 @@ export default class ScrollableList extends Component {
         onClick={this.scrollUp}
         onMouseEnter={this.onMouseEnter.bind(this, this.scrollUp)}
         onMouseOut={this.onMouseOut}
+        data-testid={getDataTestid(`${TESTID_PREFIX}.scrollUpButton`)}
       >
         <IconSVG name="icon-caret-up" />
       </div>
diff --git a/app/cdap/testids/testids.yaml b/app/cdap/testids/testids.yaml
index ae0727174a8..a59d11356d4 100644
--- a/app/cdap/testids/testids.yaml
+++ b/app/cdap/testids/testids.yaml
@@ -8,6 +8,11 @@
 # Please do not modify this comment section at the top.
 # This section is added by the testid-yaml-loader.
 
+common:
+  components:
+    scrollableList:
+      scrollDownButton: ~
+      scrollUpButton: ~
 features:
   administration:
     configuration:
@@ -20,6 +25,100 @@ features:
       tab: ~
     tethering:
       tab: ~
+  dataprep:
+    directives:
+      parse:
+        modal:
+          csv:
+            applyButton: ~
+            cancelButton: ~
+            closeButton: ~
+            customDelimeterInput: ~
+            firstRowAsHeaderToggle: ~
+            option: ~
+            title: ~
+          log:
+            applyButton: ~
+            cancelButton: ~
+            closeButton: ~
+            customLogFormatInput: ~
+            option: ~
+            title: ~
+          xmlToJson:
+            applyButton: ~
+            cancelButton: ~
+            closeButton: ~
+            depthInput: ~
+            keepStringsToggle: ~
+            title: ~
+        option: ~
+        title: ~
+    workspace:
+      cli:
+        autocomplete:
+          container: ~
+          directive:
+            description: ~
+            name: ~
+            title: ~
+            usage: ~
+        input: ~
+      columnsPanel:
+        actionsDropdown:
+          directive: ~
+          dropdownToggle: ~
+        list:
+          column:
+            details: ~
+            listRow: ~
+            name: ~
+            selectToggle: ~
+          header:
+            actionsDropdownToggle: ~
+            selectAllToggle: ~
+            unselectAllToggle: ~
+        search:
+          clearButton: ~
+          input: ~
+      dataTable:
+        body:
+          cell: ~
+        head:
+          col: ~
+          columnName: ~
+          columnNameInput: ~
+          columnSelectToggle: ~
+          dataType: ~
+          directivesDropdown:
+            menu: ~
+            toggleButton: ~
+      rightSidePanel:
+        tabs:
+          columns: ~
+          transformations: ~
+      topPanel:
+        actionButtons:
+          apply: ~
+          createPipeline: ~
+          moreDropdownButton: ~
+          moreDropdownMenu:
+            ingestData: ~
+            viewSchema: ~
+          upgradeButton: ~
+        connectionType: ~
+        rowsColumnsCount: ~
+        tabs:
+          data: ~
+          viz: ~
+        workspaceName: ~
+      transformationsPanel:
+        downloadButton: ~
+        list:
+          directive: ~
+    workspaceTabs:
+      workspaceTab:
+        closeButton: ~
+        name: ~
   entityListView:
     allEntities: ~
     entity:
@@ -32,3 +131,6 @@ features:
         truncate: ~
       named: ~
     justAdded: ~
+  home:
+    wrangler:
+      pageLink: ~