diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-footer.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-footer.html
index 3052636851..611dcce61b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-footer.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-footer.html
@@ -1,4 +1,4 @@
-<div class="umb-tab-buttons umb-editor-drawer">
+<div data-element="editor-footer" class="umb-tab-buttons umb-editor-drawer">
 
     <div class="umb-editor-drawer-content" ng-transclude>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
index 3d2510a273..ace7754202 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
@@ -6,7 +6,7 @@
 
             <div class="umb-panel-header-left-side" ng-class="{'-top-position': tabs || !icon && hideDescription}">
               
-              <ng-form data-element=="editor-icon" name="iconForm">
+              <ng-form data-element="editor-icon" name="iconForm">
                  <div class="umb-panel-header-icon" ng-if="!hideIcon" ng-click="openIconPicker()" ng-class="{'-placeholder': $parent.icon==='' || $parent.icon===null}" title="{{$parent.icon}}">
                      <i class="icon {{$parent.icon}}"  ng-if="$parent.icon!=='' && $parent.icon!==null"></i>
                      <div class="umb-panel-header-icon-text" ng-if="$parent.icon==='' || $parent.icon===null">
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
index a11dee1ec9..f414d60c39 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
@@ -34,7 +34,7 @@
 
     <ul class="umb-group-builder__groups" ui-sortable="sortableOptionsGroup" ng-model="model.groups">
 
-        <li ng-repeat="tab in model.groups" ng-class="{'umb-group-builder__group-sortable': sortingMode}" data-element="group-{{$index}}">
+        <li ng-repeat="tab in model.groups" ng-class="{'umb-group-builder__group-sortable': sortingMode}" data-element="group-{{tab.name}}">
 
             <!-- TAB INIT STATE -->
             <a href="" class="umb-group-builder__group -placeholder" hotkey="alt+shift+t" ng-click="addGroup(tab)" ng-if="tab.tabState=='init' && !sortingMode" data-element="group-add">
@@ -110,7 +110,7 @@
 
                 <ul class="umb-group-builder__properties" ui-sortable="sortableOptionsProperty" ng-model="tab.properties">
 
-                    <li ng-class="{'umb-group-builder__property-sortable': sortingMode && !property.inherited}" ng-repeat="property in tab.properties">
+                    <li data-element="property-{{property.alias}}" ng-class="{'umb-group-builder__property-sortable': sortingMode && !property.inherited}" ng-repeat="property in tab.properties">
 
                         <!-- Init property / Property placeholder / add new property -->
                         <a href=""
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
index 3ef1430cd3..8d33600594 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
@@ -3,9 +3,9 @@
     <p ng-if="(images|filter:{trashed:true}).length == 1"><localize key="mediaPicker_pickedTrashedItem"></localize></p>
     <p ng-if="(images|filter:{trashed:true}).length > 1"><localize key="mediaPicker_pickedTrashedItems"></localize></p>
 
-    <div class="flex error">
+    <div data-element="sortable-thumbnails" class="flex error">
         <ul ui-sortable="sortableOptions" ng-model="images" class="umb-sortable-thumbnails">
-            <li style="width: 120px; height: 100px; overflow: hidden;" ng-repeat="image in images">
+            <li data-element="sortable-thumbnail-{{$index}}" style="width: 120px; height: 100px; overflow: hidden;" ng-repeat="image in images">
 
                 <!-- IMAGE -->
                 <img ng-class="{'trashed': image.trashed}" ng-src="{{image.thumbnail}}" alt="" ng-show="image.thumbnail" title="{{image.trashed ? 'Trashed: ' + image.name : image.name}}" />
@@ -20,24 +20,24 @@
                     <small>{{image.name}}</small>
                 </span>
 
-                <div class="umb-sortable-thumbnails__actions">
-                    <a class="umb-sortable-thumbnails__action" href="" ng-click="goToItem(image)">
+                <div class="umb-sortable-thumbnails__actions" data-element="sortable-thumbnail-actions">
+                    <a class="umb-sortable-thumbnails__action" data-element="action-edit" href="" ng-click="goToItem(image)">
                         <i class="icon icon-edit"></i>
                     </a>
-                    <a class="umb-sortable-thumbnails__action -red" href="" ng-click="remove($index)">
+                    <a class="umb-sortable-thumbnails__action -red" data-element="action-remove" href="" ng-click="remove($index)">
                         <i class="icon icon-delete"></i>
                     </a>
                 </div>
-
             </li>
 
         </ul>
-        <a href="#" class="add-link" ng-click="add()" ng-class="{'add-link-square': images.length === 0}" ng-if="showAdd()" prevent-default>
+        <a data-element="sortable-thumbnails-add" href="#" class="add-link" ng-click="add()" ng-class="{'add-link-square': images.length === 0}" ng-if="showAdd()" prevent-default>
             <i class="icon icon-add large"></i>
         </a>
     </div>
 
     <umb-overlay
+        data-element="overlay-media-picker"
         ng-if="mediaPickerOverlay.show"
         model="mediaPickerOverlay"
         position="right"