diff --git a/webpack/components/AnsibleHostDetail/AnsibleHostDetail.js b/webpack/components/AnsibleHostDetail/AnsibleHostDetail.js
index e8f93e669..df0ff6b77 100644
--- a/webpack/components/AnsibleHostDetail/AnsibleHostDetail.js
+++ b/webpack/components/AnsibleHostDetail/AnsibleHostDetail.js
@@ -29,6 +29,7 @@ const AnsibleHostDetail = ({
           >
             {SECONDARY_TABS.map(({ key, title }) => (
               <Tab
+                ouiaId={`ansible-host-details-tabs-${title}`}
                 key={key}
                 eventKey={key}
                 title={<TabTitleText>{title}</TabTitleText>}
diff --git a/webpack/components/AnsibleHostDetail/components/JobsTab/NewRecurringJobModal.js b/webpack/components/AnsibleHostDetail/components/JobsTab/NewRecurringJobModal.js
index 774010379..a8999c98c 100644
--- a/webpack/components/AnsibleHostDetail/components/JobsTab/NewRecurringJobModal.js
+++ b/webpack/components/AnsibleHostDetail/components/JobsTab/NewRecurringJobModal.js
@@ -90,6 +90,7 @@ const NewRecurringJobModal = props => {
             <br />
             {__('For more advanced scheduling options')}{' '}
             <Button
+              ouiaId="view-remote-execution-page"
               variant="link"
               isInline
               onClick={() =>
diff --git a/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/index.js b/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/index.js
index f82e34c23..7998445d9 100644
--- a/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/index.js
+++ b/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/index.js
@@ -30,9 +30,17 @@ const AllRolesModal = ({ hostGlobalId, onClose, history }) => {
 
   const paginationKeys = { page: 'page', perPage: 'per_page' };
 
-  const wrapper = child => <Modal {...baseModalProps}>{child}</Modal>;
+  const wrapper = child => (
+    <Modal ouiaId="modal-ansible-roles" {...baseModalProps}>
+      {child}
+    </Modal>
+  );
 
-  const loadingWrapper = child => <Modal {...baseModalProps}>{child}</Modal>;
+  const loadingWrapper = child => (
+    <Modal ouiaId="loading-modal-ansible-roles" {...baseModalProps}>
+      {child}
+    </Modal>
+  );
 
   const useFetchFn = () =>
     useQuery(allAnsibleRolesQuery, {
diff --git a/webpack/components/AnsibleHostDetail/components/RolesTab/EditRolesModal/index.js b/webpack/components/AnsibleHostDetail/components/RolesTab/EditRolesModal/index.js
index 8f4a11716..2931edcd7 100644
--- a/webpack/components/AnsibleHostDetail/components/RolesTab/EditRolesModal/index.js
+++ b/webpack/components/AnsibleHostDetail/components/RolesTab/EditRolesModal/index.js
@@ -44,12 +44,20 @@ const EditRolesModal = ({
   ];
 
   const emptyWrapper = child => (
-    <Modal {...baseModalProps} actions={actions}>
+    <Modal
+      ouiaId="empty-edit-modal-ansible-roles"
+      {...baseModalProps}
+      actions={actions}
+    >
       {child}
     </Modal>
   );
 
-  const loadingWrapper = child => <Modal {...baseModalProps}>{child}</Modal>;
+  const loadingWrapper = child => (
+    <Modal ouiaId="loading-edit-modal-ansible-roles" {...baseModalProps}>
+      {child}
+    </Modal>
+  );
 
   const variables = {
     id: encodeId('Host', hostId),
diff --git a/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariables.js b/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariables.js
index 3e495e95b..320c05f47 100644
--- a/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariables.js
+++ b/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariables.js
@@ -92,11 +92,12 @@ const ImportRolesAndVariablesTable = ({
   );
 
   const renderSelectAll = () => (
-    <Toolbar>
+    <Toolbar ouiaId="ansible-roles-and-variables-table-toolbar">
       <ToolbarContent>
         <ToolbarGroup variant="icon-button-group">
           <ToolbarItem>
             <Checkbox
+              ouiaId="ansible-roles-and-variables-table-select-all-checkbox"
               isChecked={isChecked}
               onChange={SelectAll}
               aria-label="select all checkbox"
@@ -115,6 +116,7 @@ const ImportRolesAndVariablesTable = ({
       <br />
       <br />
       <Button
+        ouiaId="ansible-roles-variables-submit"
         variant="primary"
         onClick={() => onSubmit(rows, proxy)}
         isLoading={isImporting}
@@ -122,7 +124,12 @@ const ImportRolesAndVariablesTable = ({
       >
         {__('Submit')}
       </Button>
-      <Button variant="secondary" onClick={onCancel} isDisabled={isImporting}>
+      <Button
+        ouiaId="ansible-roles-variables-cancel"
+        variant="secondary"
+        onClick={onCancel}
+        isDisabled={isImporting}
+      >
         {__('Cancel')}
       </Button>
     </div>
@@ -132,6 +139,7 @@ const ImportRolesAndVariablesTable = ({
     <div id="import-ansible-roles-variables">
       {renderSelectAll()}
       <Table
+        ouiaId="ansible-roles-and-variables-table"
         aria-label="import roles and variables"
         onSelect={onSelect}
         rows={paginatedRows}
diff --git a/webpack/formHelper.js b/webpack/formHelper.js
index e15111bbc..99f1f26d5 100644
--- a/webpack/formHelper.js
+++ b/webpack/formHelper.js
@@ -58,6 +58,7 @@ export const SelectField = ({
       validated={valid}
     >
       <FormSelect
+        ouiaId={`select-${fieldProps.name}`}
         {...fieldProps}
         className="without_select2"
         aria-label={fieldProps.name}