From e79a5f4117281ce40a62ce94ac3d384bf1671f53 Mon Sep 17 00:00:00 2001
From: Norbert Csaba Herczeg <noherczeg@gmail.com>
Date: Thu, 16 Mar 2023 13:15:05 +0100
Subject: [PATCH] JNG-4639: qa friendly elements (#29)

---
 .../ui/generator/react/UiGeneralHelper.java   |  7 ++--
 .../components-api/components/MenuTree.ts.hbs |  1 +
 .../dialog/ConfirmationDialog.ts.hbs          |  1 +
 .../dialog/DialogContext.ts.hbs               |  5 +--
 .../components-api/dialog/FilterDialog.ts.hbs | 11 ++++++-
 .../components/ApplicationSelector.tsx.hbs    |  6 ++--
 .../src/components/CustomBreadcrumb.tsx.hbs   |  2 +-
 .../src/components/DropdownButton.tsx.hbs     |  5 +--
 .../actor/src/components/Hero.tsx.hbs         |  8 ++---
 .../actor/src/components/Logo.tsx.hbs         |  1 +
 .../actor/src/components/ModeledTabs.tsx.hbs  | 14 ++++----
 .../actor/src/components/PageHeader.tsx.hbs   |  2 +-
 .../dialog/ConfirmationDialog.tsx.hbs         |  9 ++---
 .../components/dialog/DialogProvider.tsx.hbs  |  8 +++--
 .../components/dialog/FilterDialog.tsx.hbs    | 33 +++++++++++--------
 .../src/components/dialog/RangeDialog.tsx.hbs | 15 +++++----
 .../table/table-row-actions.tsx.hbs           | 14 +++++---
 .../widgets/TrinaryLogicCombobox.tsx.hbs      |  6 ++--
 .../fragments/action/range-call.fragment.hbs  |  1 +
 .../fragments/relation/column.fragment.hbs    |  2 +-
 .../table/filter-option.fragment.hbs          |  1 +
 .../resources/actor/src/layout/Footer.tsx.hbs |  2 +-
 .../resources/actor/src/layout/Header.tsx.hbs |  2 +-
 .../actor/src/layout/Navigator.tsx.hbs        |  6 ++--
 .../resources/actor/src/menu-items.tsx.hbs    |  2 ++
 .../actor/src/pages/access/create.hbs         |  2 +-
 .../actor/src/pages/access/table.hbs          | 13 +++++---
 .../resources/actor/src/pages/access/view.hbs | 12 ++++---
 .../pages/actions/action/add-action.tsx.hbs   |  1 +
 .../output-view/output-view.tsx.hbs           |  3 +-
 .../without-input-form.fragment.hbs           |  1 +
 .../actions/action/filter-action.tsx.hbs      |  8 ++---
 .../actionForm/createActionForm.tsx.hbs       |  6 ++--
 .../operationInputActionForm.tsx.hbs          |  6 ++--
 .../actor/src/pages/operation-output/view.hbs | 12 ++++---
 .../actor/src/pages/page-fallback.hbs         |  4 ++-
 .../actor/src/pages/relation/table.hbs        | 16 +++++----
 .../actor/src/pages/relation/view.hbs         | 12 ++++---
 .../actor/src/pages/widgets/actiongroup.hbs   |  4 ++-
 .../src/pages/widgets/binarytypeinput.hbs     |  4 +--
 .../actor/src/pages/widgets/button.hbs        |  4 +--
 .../actor/src/pages/widgets/dateinput.hbs     |  1 +
 .../actor/src/pages/widgets/datetimeinput.hbs |  1 +
 .../src/pages/widgets/enumerationcombo.hbs    |  4 +--
 .../src/pages/widgets/enumerationradio.hbs    |  4 +--
 .../actor/src/pages/widgets/flex/column.hbs   |  4 +--
 .../actor/src/pages/widgets/flex/row.hbs      |  4 +--
 .../actor/src/pages/widgets/formatted.hbs     |  2 +-
 .../actor/src/pages/widgets/label.hbs         |  2 +-
 .../actor/src/pages/widgets/link.hbs          |  3 +-
 .../actor/src/pages/widgets/numericinput.hbs  |  2 +-
 .../actor/src/pages/widgets/switch.hbs        |  8 ++---
 .../actor/src/pages/widgets/tabcontroller.hbs |  3 +-
 .../actor/src/pages/widgets/table.hbs         |  7 ++--
 .../actor/src/pages/widgets/text.hbs          |  2 +-
 .../actor/src/pages/widgets/textarea.hbs      |  2 +-
 .../actor/src/pages/widgets/textinput.hbs     |  2 +-
 .../actor/src/pages/widgets/timeinput.hbs     |  1 +
 .../src/pages/widgets/trinarylogiccombo.hbs   |  2 +-
 .../actor/src/utilities/interfaces.ts.hbs     |  2 +-
 .../src/utilities/table-row-actions.tsx.hbs   |  1 +
 61 files changed, 205 insertions(+), 124 deletions(-)

diff --git a/judo-ui-react/src/main/java/hu/blackbelt/judo/ui/generator/react/UiGeneralHelper.java b/judo-ui-react/src/main/java/hu/blackbelt/judo/ui/generator/react/UiGeneralHelper.java
index 9cfead5a..a06e3566 100644
--- a/judo-ui-react/src/main/java/hu/blackbelt/judo/ui/generator/react/UiGeneralHelper.java
+++ b/judo-ui-react/src/main/java/hu/blackbelt/judo/ui/generator/react/UiGeneralHelper.java
@@ -5,15 +5,14 @@
 import hu.blackbelt.judo.meta.ui.Application;
 import hu.blackbelt.judo.meta.ui.NavigationItem;
 import hu.blackbelt.judo.meta.ui.Sort;
-import hu.blackbelt.judo.meta.ui.Stretch;
 import hu.blackbelt.judo.meta.ui.data.*;
 import lombok.extern.java.Log;
 import org.eclipse.emf.ecore.EObject;
-import org.eclipse.emf.ecore.xmi.XMIResource;
 
 import java.util.Collection;
 import java.util.stream.Collectors;
 
+import static hu.blackbelt.judo.ui.generator.typescript.rest.commons.UiCommonsHelper.getXMIID;
 import static java.util.Arrays.stream;
 
 @Log
@@ -75,6 +74,10 @@ public static String fqClass(String fqName) {
                 .collect(Collectors.joining());
     }
 
+    public static String createId(EObject element) {
+        return fqClass(getXMIID(element).replaceAll("@", ""));
+    }
+
     public static Boolean isNavItemAGroup(NavigationItem navigationItem) {
         return navigationItem.getTarget() == null;
     }
diff --git a/judo-ui-react/src/main/resources/actor/src/components-api/components/MenuTree.ts.hbs b/judo-ui-react/src/main/resources/actor/src/components-api/components/MenuTree.ts.hbs
index 84203fa9..6fafe55f 100644
--- a/judo-ui-react/src/main/resources/actor/src/components-api/components/MenuTree.ts.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components-api/components/MenuTree.ts.hbs
@@ -5,6 +5,7 @@
 // Template name: {{ template.templateName }}
 
 export type MenuItem = {
+  id: string;
   icon?: string;
   label: string;
   to?: string;
diff --git a/judo-ui-react/src/main/resources/actor/src/components-api/dialog/ConfirmationDialog.ts.hbs b/judo-ui-react/src/main/resources/actor/src/components-api/dialog/ConfirmationDialog.ts.hbs
index 5eaeb89a..ec4567a5 100644
--- a/judo-ui-react/src/main/resources/actor/src/components-api/dialog/ConfirmationDialog.ts.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components-api/dialog/ConfirmationDialog.ts.hbs
@@ -7,6 +7,7 @@
 import type { ReactNode } from 'react';
 
 export interface ConfirmationDialogProps {
+  id: string,
   confirmationMessage: string | ReactNode;
   title: string | ReactNode;
   resolve: (value: boolean) => void;
diff --git a/judo-ui-react/src/main/resources/actor/src/components-api/dialog/DialogContext.ts.hbs b/judo-ui-react/src/main/resources/actor/src/components-api/dialog/DialogContext.ts.hbs
index bfc1153d..2f6c4c28 100644
--- a/judo-ui-react/src/main/resources/actor/src/components-api/dialog/DialogContext.ts.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components-api/dialog/DialogContext.ts.hbs
@@ -18,10 +18,11 @@ export interface PageDialogProviderContext {
 }
 
 export interface ConfirmDialogProviderContext {
-  openConfirmDialog: (confirmationMessage: string | ReactNode, title?: string | ReactNode) => Promise<boolean>;
+  openConfirmDialog: (id: string, confirmationMessage: string | ReactNode, title?: string | ReactNode) => Promise<boolean>;
 }
 
 export interface OpenRangeDialogProps<T extends JudoStored<T>, U extends QueryCustomizer<T>> {
+  id: string;
   columns: GridColumns<T>;
   defaultSortField: GridSortItem;
   rangeCall: (queryCustomizer: U) => Promise<Array<T>>;
@@ -38,5 +39,5 @@ export interface RangeDialogProviderContext {
 }
 
 export interface FilterDialogProviderContext {
-  openFilterDialog: (filterOptions: FilterOption[], filters?: Filter[]) => Promise<Filter[]>;
+  openFilterDialog: (id: string, filterOptions: FilterOption[], filters?: Filter[]) => Promise<Filter[]>;
 }
diff --git a/judo-ui-react/src/main/resources/actor/src/components-api/dialog/FilterDialog.ts.hbs b/judo-ui-react/src/main/resources/actor/src/components-api/dialog/FilterDialog.ts.hbs
index 2dcd4624..c37c8407 100644
--- a/judo-ui-react/src/main/resources/actor/src/components-api/dialog/FilterDialog.ts.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components-api/dialog/FilterDialog.ts.hbs
@@ -7,6 +7,7 @@
 import { _BooleanOperation, _EnumerationOperation, _NumericOperation, _StringOperation } from '@judo/data-api-common';
 
 export interface FilterOption {
+  id: string;
   attributeName: string;
   label?: string;
   filterType: FilterType;
@@ -32,12 +33,15 @@ export type FilterBy = {
 };
 
 export interface Filter {
-  id: number;
+  id: string;
+  operationId: string;
+  valueId: string;
   filterOption: FilterOption;
   filterBy: FilterBy;
 }
 
 export interface FilterDialogProps {
+  id: string;
   filters?: Filter[];
   filterOptions: FilterOption[];
   resolve: (value: any) => void;
@@ -46,16 +50,21 @@ export interface FilterDialogProps {
 }
 
 export interface FilterOperatorProps {
+  operatorId: string;
+  valueId: string;
   filter: Filter;
   setFilterOperator: (filter: Filter, newOperator: Operation) => void;
 }
 
 export interface FilterInputProps {
+  operatorId: string;
+  valueId: string;
   filter: Filter;
   setFilterValue: (filter: Filter, newValue: any) => void;
 }
 
 export interface FilterProps {
+  id: string;
   filter: Filter;
   closeHandler: (filter: Filter) => void;
   setFilterValue: (filter: Filter, newValue: any) => void;
diff --git a/judo-ui-react/src/main/resources/actor/src/components/ApplicationSelector.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/ApplicationSelector.tsx.hbs
index 04636469..86cd7451 100644
--- a/judo-ui-react/src/main/resources/actor/src/components/ApplicationSelector.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components/ApplicationSelector.tsx.hbs
@@ -28,11 +28,11 @@ export function ApplicationSelector() {
 
     return (
         <>
-            <Button variant="text" sx={ { width: '100%' } } onClick={handleClickListItem} endIcon={<MdiIcon path="chevron_down" />}>
+            <Button id="application-selector" variant="text" sx={ { width: '100%' } } onClick={handleClickListItem} endIcon={<MdiIcon path="chevron_down" />}>
                 <Typography sx={ { fontWeight: 500 } }>{ t('applications.{{ application.actor.simpleName }}', { defaultValue: '{{ application.actor.simpleName }}' }) as string }</Typography>
             </Button>
             <Menu
-                id="app-selector-menu"
+                id="application-selector-menu"
                 anchorEl={anchorEl}
                 open={applicationSelectorOpen}
                 onClose={handleClose}
@@ -45,7 +45,7 @@ export function ApplicationSelector() {
                     <Typography>{ t('judo.applications.available_applications', { defaultValue: 'Available applications' }) as string }</Typography>
                 </MenuItem>
                 {Object.keys(alternativeApplications).map(key => (
-                    <MenuItem key={key} onClick={() => handleMenuItemClick(key)}>
+                    <MenuItem id={key} key={key} onClick={() => handleMenuItemClick(key)}>
                         <Typography>{alternativeApplications[key]}</Typography>
                     </MenuItem>
                 ))}
diff --git a/judo-ui-react/src/main/resources/actor/src/components/CustomBreadcrumb.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/CustomBreadcrumb.tsx.hbs
index 17a07fb9..1879fb5f 100644
--- a/judo-ui-react/src/main/resources/actor/src/components/CustomBreadcrumb.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components/CustomBreadcrumb.tsx.hbs
@@ -152,7 +152,7 @@ export const CustomBreadcrumb = () => {
   const breadcrumbItems = useContext(BreadcrumbContextState);
 
   return (
-    <Breadcrumbs maxItems={2} separator=">">
+    <Breadcrumbs id="application-breadcrumb" maxItems={2} separator=">">
       <MdiIcon path="home" />
       {breadcrumbItems.map(({ label, key }, index) => {
         return (
diff --git a/judo-ui-react/src/main/resources/actor/src/components/DropdownButton.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/DropdownButton.tsx.hbs
index 04bc1f1e..119746e1 100644
--- a/judo-ui-react/src/main/resources/actor/src/components/DropdownButton.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components/DropdownButton.tsx.hbs
@@ -10,6 +10,7 @@ import type { ReactNode, KeyboardEvent, SyntheticEvent } from 'react';
 import { MdiIcon } from './MdiIcon';
 
 interface DropdownMenuItem {
+  id: string,
   disabled?: boolean;
   visible?: boolean;
   label?: string;
@@ -20,7 +21,7 @@ interface DropdownMenuItem {
 
 interface DropdownButtonProps {
   children?: ReactNode;
-  id?: string | undefined;
+  id: string;
   menuItems: DropdownMenuItem[];
   disabled?: boolean;
   showDropdownIcon?: boolean;
@@ -107,7 +108,7 @@ export function DropdownButton({
                       return (
                         <MenuItem
                           key={menuItem.label ?? '' + index}
-                          id={menuItem.label ?? '' + index}
+                          id={menuItem.id}
                           disabled={menuItem.disabled ?? false}
                           onClick={(event) => {
                             handleClose(event);
diff --git a/judo-ui-react/src/main/resources/actor/src/components/Hero.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/Hero.tsx.hbs
index 1386d4b2..0b1bc909 100644
--- a/judo-ui-react/src/main/resources/actor/src/components/Hero.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components/Hero.tsx.hbs
@@ -9,13 +9,13 @@ import type { HeroProps } from '../components-api';
 
 export function Hero(props: HeroProps) {
   return (
-    <Box sx={ { p: 2, display: 'flex', flexDirection: 'row', alignItems: 'center' } } >
-      <img src={props.imgSrc} alt="hero" style={ { width: '4rem', marginRight: '.5rem' } } />
+    <Box id="application-hero" sx={ { p: 2, display: 'flex', flexDirection: 'row', alignItems: 'center' } } >
+      <img id="application-hero-image" src={props.imgSrc} alt="hero" style={ { width: '4rem', marginRight: '.5rem' } } />
       <Box sx={ { p: 2, display: 'flex', flexDirection: 'column', alignItems: 'stretch' } } >
-        {props.preferredUsername && <Typography sx={ { fontWeight: 'bold' } }>
+        {props.preferredUsername && <Typography id="application-hero-preferred-username" sx={ { fontWeight: 'bold' } }>
           {props.preferredUsername}
         </Typography>}
-        {props.email && <Typography sx={ { fontWeight: 'light' } }>
+        {props.email && <Typography id="application-hero-email" sx={ { fontWeight: 'light' } }>
           {props.email}
         </Typography>}
       </Box>
diff --git a/judo-ui-react/src/main/resources/actor/src/components/Logo.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/Logo.tsx.hbs
index 955e8f5b..1f1227e7 100644
--- a/judo-ui-react/src/main/resources/actor/src/components/Logo.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components/Logo.tsx.hbs
@@ -24,6 +24,7 @@ export function Logo(props: LogoProps) {
       } }
     >
       <img
+        id="application-logo"
         src={props.imgSrc}
         alt="logo"
         style={ {
diff --git a/judo-ui-react/src/main/resources/actor/src/components/ModeledTabs.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/ModeledTabs.tsx.hbs
index 240b424f..a4b5a2e2 100644
--- a/judo-ui-react/src/main/resources/actor/src/components/ModeledTabs.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components/ModeledTabs.tsx.hbs
@@ -4,19 +4,20 @@ import { Tabs, Tab, Box } from '@mui/material';
 import { MdiIcon } from './MdiIcon';
 
 export interface TabPanelProps {
+    id: string;
     children?: ReactNode;
     index: number;
     value: number;
 }
 
 export function TabPanel(props: TabPanelProps) {
-    const { children, value, index, ...other } = props;
+    const { id, children, value, index, ...other } = props;
 
     return (
         <div
             role="tabpanel"
             hidden={value !== index}
-            id={`modeled-tabs-tab-${index}`}
+            id={id}
             aria-labelledby={`simple-tab-${index}`}
             {...other}
         >
@@ -37,12 +38,13 @@ export interface ChildTabProps {
 }
 
 export interface ModeledTabsProps {
+    id: string,
     activeIndex: number,
     childTabs: ChildTabProps[],
     children: ReactNode;
 }
 
-export function ModeledTabs({ activeIndex, childTabs, children }: ModeledTabsProps) {
+export function ModeledTabs({ id, activeIndex, childTabs, children }: ModeledTabsProps) {
     const [value, setValue] = useState<number>(activeIndex);
 
     const handleChange = (event: SyntheticEvent, newValue: number) => {
@@ -50,16 +52,16 @@ export function ModeledTabs({ activeIndex, childTabs, children }: ModeledTabsPro
     };
 
     return (
-        <Box sx={ { width: '100%' } }>
+        <Box id={id} sx={ { width: '100%' } }>
             <Box sx={ { borderBottom: 1, borderColor: 'divider' } }>
                 <Tabs value={value} onChange={handleChange} textColor="secondary" indicatorColor="secondary">
                     {childTabs.map((c: any, index: number) => (
-                    <Tab key={c.id} label={c.label} icon={c.icon ? <MdiIcon path={c.icon} /> : '' } iconPosition="start" id={c.id} disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }}{{ else }}false{{/ if }} } />
+                    <Tab id={`${c.id}-tab`} key={c.id} label={c.label} icon={c.icon ? <MdiIcon path={c.icon} /> : '' } iconPosition="start" disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }}{{ else }}false{{/ if }} } />
                     ))}
                 </Tabs>
             </Box>
             {childTabs.map((c: any, index: number) => (
-                <TabPanel key={c.id} value={value} index={index}>
+                <TabPanel id={`${c.id}-tab-panel`} key={c.id} value={value} index={index}>
                     {Array.isArray(children) ? children[index] : ''}
                 </TabPanel>
             ))}
diff --git a/judo-ui-react/src/main/resources/actor/src/components/PageHeader.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/PageHeader.tsx.hbs
index 28b0929c..5e7d32c5 100644
--- a/judo-ui-react/src/main/resources/actor/src/components/PageHeader.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components/PageHeader.tsx.hbs
@@ -28,7 +28,7 @@ export const PageHeader = ({ title, children }: PageHeaderProps) => {
           <Container component="main" maxWidth="xl">
             <Grid container alignItems="center" justifyContent="space-between" spacing={1}>
               <Grid item>
-                <Typography component="span" color="text.primary" variant="h5">
+                <Typography id="application-page-header-title" component="span" color="text.primary" variant="h5">
                   {title}
                 </Typography>
               </Grid>
diff --git a/judo-ui-react/src/main/resources/actor/src/components/dialog/ConfirmationDialog.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/dialog/ConfirmationDialog.tsx.hbs
index c56d2b69..52895be8 100644
--- a/judo-ui-react/src/main/resources/actor/src/components/dialog/ConfirmationDialog.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components/dialog/ConfirmationDialog.tsx.hbs
@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
 import type { ConfirmationDialogProps } from '../../components-api';
 
 export const ConfirmationDialog = ({
+  id,
   confirmationMessage,
   title,
   resolve,
@@ -38,18 +39,18 @@ export const ConfirmationDialog = ({
   };
 
   return (
-    <Dialog open={open} onClose={handleClose} scroll="paper" fullWidth={true} maxWidth={'xs'}>
-      {title && <DialogTitle id="scroll-dialog-title">{title}</DialogTitle>}
+    <Dialog id={id} open={open} onClose={handleClose} scroll="paper" fullWidth={true} maxWidth={'xs'}>
+      {title && <DialogTitle id={`${id}-dialog-title`}>{title}</DialogTitle>}
       <DialogContent dividers={!!title}>
         <DialogContentText id="scroll-dialog-description" ref={descriptionElementRef} tabIndex={-1}>
           {confirmationMessage}
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button variant="text" onClick={cancel}>
+        <Button id={`${id}-action-cancel`} variant="text" onClick={cancel}>
           { t('judo.modal.confirm.cancel', { defaultValue: 'No' }) as string }
         </Button>
-        <Button variant="contained" onClick={ok}>
+        <Button id={`${id}-action-confirm`} variant="contained" onClick={ok}>
           { t('judo.modal.confirm.confirm', { defaultValue: 'Yes' }) as string }
         </Button>
       </DialogActions>
diff --git a/judo-ui-react/src/main/resources/actor/src/components/dialog/DialogProvider.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/dialog/DialogProvider.tsx.hbs
index 5a2dee17..f4b70574 100644
--- a/judo-ui-react/src/main/resources/actor/src/components/dialog/DialogProvider.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components/dialog/DialogProvider.tsx.hbs
@@ -56,6 +56,7 @@ export const DialogProvider = ({ children }: DialogProviderProps) => {
   };
 
   const handleOpenRangeDialog = async <T extends JudoStored<T>, U extends QueryCustomizer<T>>({
+    id,
     columns,
     defaultSortField,
     rangeCall,
@@ -69,6 +70,7 @@ export const DialogProvider = ({ children }: DialogProviderProps) => {
     return new Promise<T[] | T>((resolve) => {
       setRangeDialog(
         <RangeDialog<T, U>
+          id={id}
           handleClose={handleCloseRangeDialog}
           open={true}
           resolve={resolve}
@@ -97,12 +99,13 @@ export const DialogProvider = ({ children }: DialogProviderProps) => {
     return false;
   };
 
-  const handleOpenConfirmDialog = async (confirmationMessage: string | ReactNode, title?: string | ReactNode) => {
+  const handleOpenConfirmDialog = async (id: string, confirmationMessage: string | ReactNode, title?: string | ReactNode) => {
     setIsOpenConfirmDialog(true);
 
     return new Promise<boolean>((resolve) => {
       setConfirmDialog(
         <ConfirmationDialog
+          id={id}
           confirmationMessage={confirmationMessage}
           title={title}
           handleClose={handleCloseConfirmDialog}
@@ -126,12 +129,13 @@ export const DialogProvider = ({ children }: DialogProviderProps) => {
     return false;
   };
 
-  const handleOpenFilterDialog = async (filterOptions: FilterOption[], filters?: Filter[]) => {
+  const handleOpenFilterDialog = async (id: string, filterOptions: FilterOption[], filters?: Filter[]) => {
     setIsOpenFilterDialog(true);
 
     return new Promise<Filter[]>((resolve) => {
       setFilterDialog(
         <FilterDialog
+          id={id}
           filters={filters}
           filterOptions={filterOptions}
           handleClose={handleCloseFilterDialog}
diff --git a/judo-ui-react/src/main/resources/actor/src/components/dialog/FilterDialog.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/dialog/FilterDialog.tsx.hbs
index 0d15f418..2e6c497e 100644
--- a/judo-ui-react/src/main/resources/actor/src/components/dialog/FilterDialog.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components/dialog/FilterDialog.tsx.hbs
@@ -107,7 +107,7 @@ const getOperatorsByFilter = (filter: Filter): string[] => {
   }
 };
 
-const FilterOperator = ({ filter, setFilterOperator }: FilterOperatorProps) => {
+const FilterOperator = ({ filter, operatorId, valueId, setFilterOperator }: FilterOperatorProps) => {
   const onChangeHandler = (event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
     setFilterOperator(filter, getOperationEnumValue(filter, event.target.value));
   };
@@ -115,14 +115,14 @@ const FilterOperator = ({ filter, setFilterOperator }: FilterOperatorProps) => {
   return (
     <TextField
       name={'operation'}
-      id={'operation'}
+      id={operatorId}
       label={'Operation'}
       select
       value={filter.filterBy.operator}
       onChange={onChangeHandler}
     >
       {getOperatorsByFilter(filter).map((item) => (
-        <MenuItem key={item} value={item}>
+        <MenuItem id={valueId} key={item} value={item}>
           {/* TODO: do not forget localization here*/}
           {item}
         </MenuItem>
@@ -259,17 +259,17 @@ const FilterInput = ({ filter, setFilterValue }: FilterInputProps) => {
   );
 };
 
-const FilterRow = ({ filter, closeHandler, setFilterOperator, setFilterValue }: FilterProps) => {
+const FilterRow = ({ id, filter, closeHandler, setFilterOperator, setFilterValue }: FilterProps) => {
   return (
     <Grid item container spacing={2} alignItems={'center'}>
       <Grid item xs={4}>
-        {filter && <FilterOperator filter={filter} setFilterOperator={setFilterOperator} />}
+        {filter && <FilterOperator operatorId={`${id}-operator`} valueId={`${id}-value`} filter={filter} setFilterOperator={setFilterOperator} />}
       </Grid>
       <Grid item xs={7}>
-        {filter && <FilterInput filter={filter} setFilterValue={setFilterValue} />}
+        {filter && <FilterInput operatorId={`${id}-operator`} valueId={`${id}-value`} filter={filter} setFilterValue={setFilterValue} />}
       </Grid>
       <Grid item xs={1}>
-        <IconButton onClick={() => closeHandler(filter)}>
+        <IconButton id={`${id}-close`} onClick={() => closeHandler(filter)}>
           <MdiIcon path="close" />
         </IconButton>
       </Grid>
@@ -286,7 +286,7 @@ const Transition = forwardRef(function Transition(
   return <Slide direction="left" ref={ref} {...props} />;
 });
 
-export const FilterDialog = ({ filters, filterOptions, resolve, open, handleClose }: FilterDialogProps) => {
+export const FilterDialog = ({ id, filters, filterOptions, resolve, open, handleClose }: FilterDialogProps) => {
   const descriptionElementRef = useRef<HTMLElement>(null);
   const [tempFilters, setTempFilters] = useState<Filter[]>(filters ?? []);
   const { t } = useTranslation();
@@ -350,6 +350,7 @@ export const FilterDialog = ({ filters, filterOptions, resolve, open, handleClos
 
   return (
     <Dialog
+      id={id}
       open={open}
       onClose={cancel}
       scroll="paper"
@@ -369,7 +370,7 @@ export const FilterDialog = ({ filters, filterOptions, resolve, open, handleClos
         },
       }}
     >
-      <DialogTitle id="scroll-dialog-title">
+      <DialogTitle id={`${id}-dialog-title`}>
         <Typography component="span" color="text.primary" variant="h5">
           { t('judo.modal.filter.label', { defaultValue: 'Filter' }) as string }
         </Typography>
@@ -381,6 +382,7 @@ export const FilterDialog = ({ filters, filterOptions, resolve, open, handleClos
               <Grid container spacing={2}>
                 {tempFilters.map((filter) => (
                   <FilterRow
+                    id={filter.id}
                     key={filter.id}
                     filter={filter}
                     closeHandler={filterCloseHandler}
@@ -390,17 +392,22 @@ export const FilterDialog = ({ filters, filterOptions, resolve, open, handleClos
                 ))}
                 <Grid item container>
                   <DropdownButton
+                    id={`${id}-dropdown`}
                     fullWidth={true}
                     showDropdownIcon={false}
                     menuItems={filterOptions.map((filterOption) => {
                       return {
+                        id: filterOption.id,
                         label: filterOption.label ?? filterOption.attributeName,
                         onClick: () =>
                           setTempFilters((prevTempFilters) => [
                             ...prevTempFilters,
                             {
-                              id: prevTempFilters.length,
+                              id: filterOption.id,
+                              operationId: `${filterOption.id}-operation`,
+                              valueId: `${filterOption.id}-value`,
                               filterOption: {
+                                id: `${filterOption.id}-option`,
                                 attributeName: filterOption.attributeName,
                                 label: filterOption.label,
                                 filterType: filterOption.filterType,
@@ -423,14 +430,14 @@ export const FilterDialog = ({ filters, filterOptions, resolve, open, handleClos
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button fullWidth variant="outlined" onClick={cancel}>
+        <Button id={`${id}-action-cancel`} fullWidth variant="outlined" onClick={cancel}>
           { t('judo.modal.filter.cancel', { defaultValue: 'Cancel' }) as string }
         </Button>
         { tempFilters.length > 0 &&
-        <Button id="clear-all-filters" fullWidth variant="outlined" onClick={clear}>
+        <Button id={`${id}-action-clear-all`} fullWidth variant="outlined" onClick={clear}>
             {t('judo.modal.filter.clear-all', { defaultValue: 'Clear all' }) as string}
         </Button> }
-        <Button fullWidth onClick={ok}>
+        <Button id={`${id}-action-apply`} fullWidth onClick={ok}>
           { t('judo.modal.filter.apply', { defaultValue: 'Apply' }) as string } {'(' + tempFilters.length + ')'}
         </Button>
       </DialogActions>
diff --git a/judo-ui-react/src/main/resources/actor/src/components/dialog/RangeDialog.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/dialog/RangeDialog.tsx.hbs
index 3f0d78da..bd7cd1d7 100644
--- a/judo-ui-react/src/main/resources/actor/src/components/dialog/RangeDialog.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components/dialog/RangeDialog.tsx.hbs
@@ -28,6 +28,7 @@ import { useSnackbar } from '../../components';
 import { useFilterDialog } from './hooks';
 
 interface RangeDialogProps<T extends JudoStored<T>, U extends QueryCustomizer<T>> {
+  id: string;
   resolve: (value: any) => void;
   open: boolean;
   handleClose: () => void;
@@ -41,6 +42,7 @@ interface RangeDialogProps<T extends JudoStored<T>, U extends QueryCustomizer<T>
 }
 
 export const RangeDialog = <T extends JudoStored<T>, U extends QueryCustomizer<T>>({
+  id,
   resolve,
   open,
   handleClose,
@@ -255,9 +257,9 @@ export const RangeDialog = <T extends JudoStored<T>, U extends QueryCustomizer<T
   };
 
   return (
-    <Dialog open={open} onClose={cancel} scroll="paper" fullWidth={true} maxWidth={'md'}>
-      <DialogTitle id="scroll-dialog-title">{ t('judo.modal.range.label', { defaultValue: 'Select' }) as string }</DialogTitle>
-      <DialogContent dividers={true}>
+    <Dialog id={id} open={open} onClose={cancel} scroll="paper" fullWidth={true} maxWidth={'md'}>
+      <DialogTitle id={`${id}-dialog-title`}>{ t('judo.modal.range.label', { defaultValue: 'Select' }) as string }</DialogTitle>
+      <DialogContent id={`${id}-data-grid`} dividers={true}>
         <DialogContentText id="scroll-dialog-description" ref={descriptionElementRef} tabIndex={-1}>
           <DataGrid
             sx={
@@ -287,9 +289,10 @@ export const RangeDialog = <T extends JudoStored<T>, U extends QueryCustomizer<T
               Toolbar: () => (
                 <GridToolbarContainer>
                   <Button
+                    id={`${id}-set-filters`}
                     variant="outlined"
                     onClick={async () => {
-                      const newFilters = await openFilterDialog(filterOptions, filters);
+                      const newFilters = await openFilterDialog('TODO', filterOptions, filters);
 
                       if (newFilters) {
                         handleFiltersChange(newFilters);
@@ -315,8 +318,8 @@ export const RangeDialog = <T extends JudoStored<T>, U extends QueryCustomizer<T
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button variant="text" onClick={cancel}>{ t('judo.modal.range.cancel', { defaultValue: 'Cancel' }) as string }</Button>
-        <Button variant="contained" onClick={ok}>{ t('judo.modal.range.submit', { defaultValue: 'Select' }) as string }</Button>
+        <Button id={`${id}-action-cancel`} variant="text" onClick={cancel}>{ t('judo.modal.range.cancel', { defaultValue: 'Cancel' }) as string }</Button>
+        <Button id={`${id}-action-submit`} variant="contained" onClick={ok}>{ t('judo.modal.range.submit', { defaultValue: 'Select' }) as string }</Button>
       </DialogActions>
     </Dialog>
   );
diff --git a/judo-ui-react/src/main/resources/actor/src/components/table/table-row-actions.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/table/table-row-actions.tsx.hbs
index 6c08d20d..600ff944 100644
--- a/judo-ui-react/src/main/resources/actor/src/components/table/table-row-actions.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components/table/table-row-actions.tsx.hbs
@@ -13,6 +13,7 @@ import { MdiIcon } from '../MdiIcon';
 import { baseColumnConfig } from '../../config';
 
 export const columnsActionCalculator: ColumnActionsProvider<any> = (
+  id: string,
   actions: TableRowAction<any>[],
   options?: ColumnsActionsOptions,
 ): GridColDef[] => {
@@ -26,21 +27,22 @@ export const columnsActionCalculator: ColumnActionsProvider<any> = (
   }
 
   if (shownActionsNumber < 0) {
-    return standaloneActions(actions, options);
+    return standaloneActions(id, actions, options);
   } else if (shownActionsNumber === 0) {
     return [];
   } else if (shownActionsNumber === 1) {
-    return dropdownActions(actions, options);
+    return dropdownActions(id, actions);
   } else {
     const sliceNumber = actions.length === shownActionsNumber ? shownActionsNumber : shownActionsNumber - 1;
     const standaloneRowActions = actions.slice(0, sliceNumber);
     const dropdownRowActions = actions.slice(sliceNumber);
 
-    return [...standaloneActions(standaloneRowActions, options), ...dropdownActions(dropdownRowActions, options)];
+    return [...standaloneActions(id, standaloneRowActions, options), ...dropdownActions(id, dropdownRowActions)];
   }
 };
 
 const standaloneActions: ColumnActionsProvider<unknown> = (
+  id: string,
   actions: TableRowAction<unknown>[],
   options?: ColumnsActionsOptions,
 ): GridColDef[] => {
@@ -53,7 +55,7 @@ const standaloneActions: ColumnActionsProvider<unknown> = (
       type: 'actions',
       renderCell: (params: GridRenderCellParams) => {
         return (
-          <Button variant="text" disabled={action.disabled ? action.disabled(params.row) : false} onClick={() => action.action(params.row)}>
+          <Button id={id} variant="text" disabled={action.disabled ? action.disabled(params.row) : false} onClick={() => action.action(params.row)}>
             {action.icon}
             {(options?.showLabel ?? true) && action.label}
           </Button>
@@ -63,7 +65,7 @@ const standaloneActions: ColumnActionsProvider<unknown> = (
   });
 };
 
-const dropdownActions: ColumnActionsProvider<unknown> = (actions: TableRowAction<unknown>[]): GridColDef[] => {
+const dropdownActions: ColumnActionsProvider<unknown> = (id: string, actions: TableRowAction<unknown>[]): GridColDef[] => {
   if (actions.length === 0) return [];
 
   return [
@@ -76,10 +78,12 @@ const dropdownActions: ColumnActionsProvider<unknown> = (actions: TableRowAction
       renderCell: (params: GridRenderCellParams) => {
         return (
           <DropdownButton
+            id={id}
             variant="text"
             showDropdownIcon={false}
             menuItems={actions.map((action) => {
               return {
+                id: action.id,
                 label: action.label,
                 startIcon: action.icon,
                 onClick: () => action.action(params.row),
diff --git a/judo-ui-react/src/main/resources/actor/src/components/widgets/TrinaryLogicCombobox.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/widgets/TrinaryLogicCombobox.tsx.hbs
index 7463b24e..e1646a4b 100644
--- a/judo-ui-react/src/main/resources/actor/src/components/widgets/TrinaryLogicCombobox.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components/widgets/TrinaryLogicCombobox.tsx.hbs
@@ -49,9 +49,9 @@ export const TrinaryLogicCombobox = ({
         ),
       } }
     >
-      <MenuItem value={'Yes'}>{ t('judo.component.TrinaryLogic.true', { defaultValue: 'Yes' }) as string }</MenuItem>
-      <MenuItem value={'No'}>{ t('judo.component.TrinaryLogic.false', { defaultValue: 'No' }) as string }</MenuItem>
-      <MenuItem value={'Unknown'}>{ t('judo.component.TrinaryLogic.unknown', { defaultValue: 'Unknown' }) as string }</MenuItem>
+      <MenuItem id={`${id}-true`} value={'Yes'}>{ t('judo.component.TrinaryLogic.true', { defaultValue: 'Yes' }) as string }</MenuItem>
+      <MenuItem id={`${id}-false`} value={'No'}>{ t('judo.component.TrinaryLogic.false', { defaultValue: 'No' }) as string }</MenuItem>
+      <MenuItem id={`${id}-undefined`} value={'Unknown'}>{ t('judo.component.TrinaryLogic.unknown', { defaultValue: 'Unknown' }) as string }</MenuItem>
     </TextField>
   );
 };
diff --git a/judo-ui-react/src/main/resources/actor/src/fragments/action/range-call.fragment.hbs b/judo-ui-react/src/main/resources/actor/src/fragments/action/range-call.fragment.hbs
index 2a6a5f24..b4efd39c 100644
--- a/judo-ui-react/src/main/resources/actor/src/fragments/action/range-call.fragment.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/fragments/action/range-call.fragment.hbs
@@ -1,4 +1,5 @@
 const {{ dataElement.name }}RangeCall = async () => openRangeDialog<{{ classDataName dataElement.target 'Stored' }}, {{ classDataName dataElement.target 'QueryCustomizer' }}>({
+    id: '{{ createId dataElement }}',
     columns: {{ dataElement.name }}Columns,
     defaultSortField: {{ dataElement.name }}SortModel[0],
     rangeCall: async (queryCustomizer) =>
diff --git a/judo-ui-react/src/main/resources/actor/src/fragments/relation/column.fragment.hbs b/judo-ui-react/src/main/resources/actor/src/fragments/relation/column.fragment.hbs
index e2b0179c..226f3d04 100644
--- a/judo-ui-react/src/main/resources/actor/src/fragments/relation/column.fragment.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/fragments/relation/column.fragment.hbs
@@ -13,7 +13,7 @@ type: '{{ columnType column }}',
     align: 'center',
     renderCell: (params: GridRenderCellParams<any, {{ classDataName dataElement.target 'Stored' }}>) => {
         return params.row.{{ column.attributeType.name }}
-            ? <Button size="small" variant="contained" onClick={ (event: any) => {
+            ? <Button id="{{ createId column }}-download" size="small" variant="contained" onClick={ (event: any) => {
                 event.preventDefault();
                 event.stopPropagation();
                 downloadFile(params.row, '{{ column.attributeType.name }}');
diff --git a/judo-ui-react/src/main/resources/actor/src/fragments/table/filter-option.fragment.hbs b/judo-ui-react/src/main/resources/actor/src/fragments/table/filter-option.fragment.hbs
index f51e73d7..54130bfc 100644
--- a/judo-ui-react/src/main/resources/actor/src/fragments/table/filter-option.fragment.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/fragments/table/filter-option.fragment.hbs
@@ -1,4 +1,5 @@
 {
+    id: '{{ createId filter }}',
     attributeName: '{{ filter.attributeType.name }}',
     label: t('{{ idToTranslationKey filter.fQName application }}', { defaultValue: '{{ filter.label }}' }) as string,
     filterType: FilterType.{{ getFilterTypeForFilter filter }},
diff --git a/judo-ui-react/src/main/resources/actor/src/layout/Footer.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/layout/Footer.tsx.hbs
index d1dff240..842b2269 100644
--- a/judo-ui-react/src/main/resources/actor/src/layout/Footer.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/layout/Footer.tsx.hbs
@@ -8,7 +8,7 @@ import { Link, Typography } from '@mui/material';
 
 export function Footer() {
   return (
-      <Typography variant="body2" color="text.secondary" align="center">
+      <Typography id="application-footer" variant="body2" color="text.secondary" align="center">
         {{ modelName application.name }} - {new Date().getFullYear()}.
       </Typography>
   );
diff --git a/judo-ui-react/src/main/resources/actor/src/layout/Header.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/layout/Header.tsx.hbs
index 2e4ec420..d9039d5d 100644
--- a/judo-ui-react/src/main/resources/actor/src/layout/Header.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/layout/Header.tsx.hbs
@@ -30,7 +30,7 @@ export function Header(props: HeaderProps) {
           </Grid>
           <Grid container spacing={1} alignItems="center">
             <Grid sx={ { display: { sm: 'none', xs: 'block' } } } item>
-              <IconButton aria-label="open drawer" onClick={onDrawerToggle} edge="start">
+              <IconButton id="header-drawer-toggle" aria-label="open drawer" onClick={onDrawerToggle} edge="start">
                 <MdiIcon path="menu" />
               </IconButton>
             </Grid>
diff --git a/judo-ui-react/src/main/resources/actor/src/layout/Navigator.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/layout/Navigator.tsx.hbs
index bad89134..42b8637d 100644
--- a/judo-ui-react/src/main/resources/actor/src/layout/Navigator.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/layout/Navigator.tsx.hbs
@@ -34,10 +34,10 @@ export interface NavigatorProps {
 function ActionItem(props: MenuItem) {
   const { t } = useTranslation();
   const { clearNavigate } = useJudoNavigation();
-  const { label, to, icon } = props;
+  const { id, label, to, icon } = props;
 
   return (
-    <ListItemButton onClick={ () => to && clearNavigate(to) }>
+    <ListItemButton id={id} onClick={ () => to && clearNavigate(to) }>
       {icon
         ? <ListItemIcon>
             <MdiIcon path={icon} />
@@ -80,7 +80,7 @@ export function Navigator(props: DrawerProps & NavigatorProps) {
       {{# if application.authentication }}
         <List>
           <ListItem disablePadding>
-            <ListItemButton onClick={ () => doLogout() }>
+            <ListItemButton id="navigator-logout" onClick={ () => doLogout() }>
               <ListItemIcon>
                 <MdiIcon path="logout" />
               </ListItemIcon>
diff --git a/judo-ui-react/src/main/resources/actor/src/menu-items.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/menu-items.tsx.hbs
index ce017736..6828833d 100644
--- a/judo-ui-react/src/main/resources/actor/src/menu-items.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/menu-items.tsx.hbs
@@ -9,6 +9,7 @@ import type { MenuItem } from './components-api';
 export const menuItems: MenuItem[] = [
     {{# each application.navigationController.items as |item| }}
     {
+        id: '{{ createId item }}',
         {{# unless (isNavItemAGroup item) }}
             to: '{{ getPageRoute item.target }}',
         {{/ unless }}
@@ -21,6 +22,7 @@ export const menuItems: MenuItem[] = [
         items: [
         {{# each item.items as |subItem| }}
             {
+            id: '{{ createId item }}',
             {{# unless (isNavItemAGroup subItem) }}
                 to: '{{ getPageRoute subItem.target }}',
             {{/ unless }}
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/access/create.hbs b/judo-ui-react/src/main/resources/actor/src/pages/access/create.hbs
index 4e08a3d9..e0118e2a 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/access/create.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/access/create.hbs
@@ -121,7 +121,7 @@ export default function {{ pageName page }}() {
             {{# with (getDataContainerForPage page) as |rootChild| }}
                 <PageHeader title={title}>
                     <Grid item>
-                        <Button onClick={async () => await saveData()} disabled={isLoading}>
+                        <Button id="page-action-save" onClick={async () => await saveData()} disabled={isLoading}>
                             <MdiIcon path="save" />
                             {t('judo.pages.save', { defaultValue: 'Save' })}
                         </Button>
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/access/table.hbs b/judo-ui-react/src/main/resources/actor/src/pages/access/table.hbs
index e97dd7aa..118b1568 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/access/table.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/access/table.hbs
@@ -181,6 +181,7 @@ export default function {{ pageName page }}() {
             {{# each table.rowActions as |action| }}
                 {{# if action.isDeleteAction }}
                     {
+                        id: '{{ createId action }}',
                         label: t('judo.pages.table.delete', { defaultValue: 'Delete' }) as string,
                         icon: <MdiIcon path="{{ action.icon.name }}" />,
                         action: async (row: {{ classDataName table.dataElement.target 'Stored' }}) => {{ actionFunctionName action page }}({{# if (hasDataElementOwner action.dataElement) }}data, {{/ if }}row, () => fetchData()),
@@ -189,6 +190,7 @@ export default function {{ pageName page }}() {
                 {{/ if }}
                 {{# if action.isCallOperationAction }}
                     {
+                        id: '{{ createId action }}',
                         label: t('{{ idToTranslationKey action.fQName application }}', { defaultValue: '{{ action.label }}' }) as string,
                         icon: <MdiIcon path="{{ action.icon.name }}" />,
                         action: async (row: {{ classDataName table.dataElement.target 'Stored' }}) => {{ actionFunctionName action page }} ({{# if action.operation.isMapped }}row, {{/ if }}() => fetchData()),
@@ -204,7 +206,7 @@ export default function {{ pageName page }}() {
                 {{# each (getUniquePageActions page) as |action| }}
                     {{# if action.isCreateAction }}
                         <Grid item>
-                            <Button onClick={ () => {{ actionFunctionName action page }}((result: {{ classDataName page.dataElement.target 'Stored' }}) => navigate(`{{ getNavigationForPage (getViewPageForTablePage page) 'result.__signedIdentifier' }}`)) } disabled={isLoading}>
+                            <Button id="page-action-create" onClick={ () => {{ actionFunctionName action page }}((result: {{ classDataName page.dataElement.target 'Stored' }}) => navigate(`{{ getNavigationForPage (getViewPageForTablePage page) 'result.__signedIdentifier' }}`)) } disabled={isLoading}>
                                 <MdiIcon path="file_document_plus" />
                                 {t('judo.pages.table.create', { defaultValue: 'Create' })}
                             </Button>
@@ -212,7 +214,7 @@ export default function {{ pageName page }}() {
                     {{/ if }}
                     {{# if action.isRefreshAction }}
                         <Grid item>
-                            <Button onClick={ () => {{ actionFunctionName action page }}(() => fetchData()) } disabled={isLoading}>
+                            <Button id="page-action-refresh" onClick={ () => {{ actionFunctionName action page }}(() => fetchData()) } disabled={isLoading}>
                                 <MdiIcon path="refresh" />
                                 {t('judo.pages.table.refresh', { defaultValue: 'Refresh' })}
                             </Button>
@@ -225,7 +227,7 @@ export default function {{ pageName page }}() {
                     <Grid container spacing={2}>
                         <Grid item xs={12}>
                             <Card>
-                                <CardContent>
+                                <CardContent id="{{ createId page }}-data-grid">
                                     <DataGrid
                                         { ...pageServerTableConfig }
                                         getRowId={(row: { __identifier: string }) => row.__identifier}
@@ -234,7 +236,7 @@ export default function {{ pageName page }}() {
                                         rowCount={rowCount}
                                         sortModel={sortModel}
                                         onSortModelChange={handleSortModelChange}
-                                        columns={[...columns, ...columnsActionCalculator(rowActions, { shownActions: 2 })]}
+                                        columns={[...columns, ...columnsActionCalculator('{{ createId page.dataElement }}', rowActions, { shownActions: 2 })]}
                                         {{# each (getUniquePageActions page) as |action| }}
                                             {{# if action.isViewAction }}
                                                 onRowClick={ (params: GridRowParams<{{ classDataName page.dataElement.target 'Stored' }}>) => {{ actionFunctionName action page }}(params.row) }
@@ -246,8 +248,9 @@ export default function {{ pageName page }}() {
                                                     {{# each (getUniquePageActions page) as |action| }}
                                                         {{# if action.isFilterAction }}
                                                             <Button
+                                                                id="{{ createId action }}"
                                                                 variant="outlined"
-                                                                onClick={ async () => {{ actionFunctionName action page }}(filterOptions, filters) }
+                                                                onClick={ async () => {{ actionFunctionName action page }}('{{ createId action }}-filter', filterOptions, filters) }
                                                                 disabled={isLoading}
                                                             >
                                                                 {t('judo.pages.table.set-filters', { defaultValue: 'Set filters' }) + (filters.length !== 0 ? ' (' + filters.length + ')' : '')}
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/access/view.hbs b/judo-ui-react/src/main/resources/actor/src/pages/access/view.hbs
index 51fb75c9..e6b2a40d 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/access/view.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/access/view.hbs
@@ -120,6 +120,7 @@ export default function {{ pageName page }}() {
             {{# each table.rowActions as |action| }}
                 {{# if action.isRemoveAction }}
                     {
+                        id: '{{ createId action }}',
                         label: t('judo.pages.table.remove', { defaultValue: 'Remove' }) as string,
                         icon: <MdiIcon path="{{ action.icon.name }}" />,
                         action: async (row: {{ classDataName table.dataElement.target 'Stored' }}) => {{ actionFunctionName action page }}(data, row, () => fetchData()),
@@ -127,6 +128,7 @@ export default function {{ pageName page }}() {
                 {{/ if }}
                 {{# if action.isDeleteAction }}
                     {
+                        id: '{{ createId action }}',
                         label: t('judo.pages.table.delete', { defaultValue: 'Delete' }) as string,
                         icon: <MdiIcon path="{{ action.icon.name }}" />,
                         action: async (row: {{ classDataName table.dataElement.target 'Stored' }}) => {{ actionFunctionName action page }}({{# if (hasDataElementOwner action.dataElement) }}data, {{/ if }}row, () => fetchData()),
@@ -135,6 +137,7 @@ export default function {{ pageName page }}() {
                 {{/ if }}
                 {{# if action.isCallOperationAction }}
                     {
+                        id: '{{ createId action }}',
                         label: t('{{ idToTranslationKey action.fQName application }}', { defaultValue: '{{ action.label }}' }) as string,
                         icon: <MdiIcon path="{{ action.icon.name }}" />,
                         action: async (row: {{ classDataName table.dataElement.target 'Stored' }}) => {{ actionFunctionName action page }}({{# if action.operation.isMapped }}row, {{/ if }}() => fetchData()),
@@ -266,7 +269,7 @@ export default function {{ pageName page }}() {
                     {{# if page.relationType.isRefreshable }}
                         {!editMode && (
                             <Grid item>
-                                <Button onClick={() => fetchData()} disabled={isLoading}>
+                                <Button id="page-action-refresh" onClick={() => fetchData()} disabled={isLoading}>
                                     <MdiIcon path="refresh" />
                                     {t('judo.pages.refresh', { defaultValue: 'Refresh' })}
                                 </Button>
@@ -276,7 +279,7 @@ export default function {{ pageName page }}() {
                     {{# if page.relationType.isDeletable }}
                         {!editMode && (
                             <Grid item>
-                                <Button onClick={() => deleteData()} disabled={isLoading || !data.__deleteable}>
+                                <Button id="page-action-delete" onClick={() => deleteData()} disabled={isLoading || !data.__deleteable}>
                                     <MdiIcon path="delete" />
                                     {t('judo.pages.delete', { defaultValue: 'Delete' })}
                                 </Button>
@@ -286,7 +289,7 @@ export default function {{ pageName page }}() {
                     {{# if page.relationType.isUpdatable }}
                         {!editMode && (
                             <Grid item>
-                                <Button onClick={() => setEditMode(true)} disabled={isLoading || !data.__updateable}>
+                                <Button id="page-action-edit" onClick={() => setEditMode(true)} disabled={isLoading || !data.__updateable}>
                                     <MdiIcon path="pencil" />
                                     {t('judo.pages.edit', { defaultValue: 'Edit' })}
                                 </Button>
@@ -295,6 +298,7 @@ export default function {{ pageName page }}() {
                         {editMode && (
                             <Grid item>
                                 <Button
+                                    id="page-action-edit-cancel"
                                     variant="outlined"
                                     onClick={() => {
                                         setEditMode(false);
@@ -309,7 +313,7 @@ export default function {{ pageName page }}() {
                         )}
                         {editMode && (
                             <Grid item>
-                                <Button onClick={() => saveData()} disabled={isLoading}>
+                                <Button id="page-action-edit-save" onClick={() => saveData()} disabled={isLoading}>
                                     <MdiIcon path="content-save" />
                                     {t('judo.pages.save', { defaultValue: 'Save' })}
                                 </Button>
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/actions/action/add-action.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/pages/actions/action/add-action.tsx.hbs
index fb94a7c9..3a5cb8cc 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/actions/action/add-action.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/actions/action/add-action.tsx.hbs
@@ -59,6 +59,7 @@ export const {{ actionFunctionHookName action page }}: {{ actionFunctionTypeName
             };
 
             const res = await openRangeDialog<{{ classDataName action.dataElement.target 'Stored' }}, {{ classDataName action.dataElement.target 'QueryCustomizer' }}>({
+                id: '{{ createId action }}',
                 columns,
                 defaultSortField: sortModel[0],
                 rangeCall: async (queryCustomizer) =>
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/actions/action/call-operation-action/output-view/output-view.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/pages/actions/action/call-operation-action/output-view/output-view.tsx.hbs
index 33c46906..e2792df3 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/actions/action/call-operation-action/output-view/output-view.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/actions/action/call-operation-action/output-view/output-view.tsx.hbs
@@ -101,6 +101,7 @@ export function {{ pageName page }}({ close, result } : {{ pageName page }}Props
                 <DialogTitle>
                     {title}
                     <IconButton
+                        id="{{ createId page }}-output-view-close"
                         aria-label="close"
                         onClick={ () => close() }
                         sx={ {
@@ -123,7 +124,7 @@ export function {{ pageName page }}({ close, result } : {{ pageName page }}Props
                     </Grid>
                 </DialogContent>
                 <DialogActions>
-                    <Button variant="contained" onClick={ () => close() } disabled={isLoading}>
+                    <Button id="{{ createId page }}-output-view-action-close" variant="contained" onClick={ () => close() } disabled={isLoading}>
                         { t('judo.modal.close', { defaultValue: 'Close' }) as string }
                     </Button>
                 </DialogActions>
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/actions/action/call-operation-action/without-input-form.fragment.hbs b/judo-ui-react/src/main/resources/actor/src/pages/actions/action/call-operation-action/without-input-form.fragment.hbs
index df74f0d1..9d612090 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/actions/action/call-operation-action/without-input-form.fragment.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/actions/action/call-operation-action/without-input-form.fragment.hbs
@@ -31,6 +31,7 @@ return async function {{ actionFunctionName action page }} ({{# if action.operat
             };
 
             const res = await openRangeDialog<{{ classDataName action.inputParameterPage.dataElement.target 'Stored' }}, {{ classDataName action.inputParameterPage.dataElement.target 'QueryCustomizer' }}>({
+                id: '{{ createId action.inputParameterPage }}',
                 columns,
                 defaultSortField: sortModel[0],
                 rangeCall: async (queryCustomizer) => await {{ classServiceName action.dataElement.owner }}Impl.getRangeFor{{ firstToUpper action.dataElement.name }}({{# if action.operation.isMapped }}owner{{ else }}undefined{{/ if }}, processQueryCustomizer(queryCustomizer)),
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/actions/action/filter-action.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/pages/actions/action/filter-action.tsx.hbs
index 98e06fac..0a2c46e8 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/actions/action/filter-action.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/actions/action/filter-action.tsx.hbs
@@ -7,17 +7,17 @@ import { useFilterDialog } from '{{ relativePathFromAction page action 'componen
 import type { Filter, FilterOption } from '{{ relativePathFromAction page action 'components-api' }}';
 import { mapAllFiltersToQueryCustomizerProperties } from '{{ relativePathFromAction page action 'utilities' }}';
 
-export type {{ actionFunctionTypeName action page }} = (filterOptions: FilterOption[], filters: Filter[]) => Promise<void>;
+export type {{ actionFunctionTypeName action page }} = (id: string, filterOptions: FilterOption[], filters: Filter[]) => Promise<void>;
 
 export const {{ actionFunctionHookName action page }} = (
     setFilters: (filters: Filter[]) => void,
     setPage: (page: number) => void,
     setQueryCustomizer: Function,
-    openFilterDialog: (filterOptions: FilterOption[], filters: Filter[]) => Promise<Filter[]>,
+    openFilterDialog: (id: string, filterOptions: FilterOption[], filters: Filter[]) => Promise<Filter[]>,
 ): {{ actionFunctionTypeName action page }} => {
 
-    return async function {{ actionFunctionName action page }}(filterOptions: FilterOption[], filters: Filter[]) {
-        const newFilters = await openFilterDialog(filterOptions, filters);
+    return async function {{ actionFunctionName action page }}(id: string, filterOptions: FilterOption[], filters: Filter[]) {
+        const newFilters = await openFilterDialog(id, filterOptions, filters);
         const numberOfElements = 10;
 
         if (newFilters) {
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/actions/actionForm/createActionForm.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/pages/actions/actionForm/createActionForm.tsx.hbs
index 66f2fe1d..029c0843 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/actions/actionForm/createActionForm.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/actions/actionForm/createActionForm.tsx.hbs
@@ -76,6 +76,7 @@ import { baseTableConfig, baseColumnConfig, toastConfig, dividerHeight } from '{
                 {{# each table.rowActions as |action| }}
                     {{# if action.isRemoveAction }}
                         {
+                            id: '{{ createId action }}',
                             label: t('judo.pages.table.remove', { defaultValue: 'Remove' }) as string,
                             icon: <MdiIcon path="{{ action.icon.name }}" />,
                             action: async (row: {{ classDataName table.dataElement.target 'Stored' }}) => {
@@ -131,6 +132,7 @@ import { baseTableConfig, baseColumnConfig, toastConfig, dividerHeight } from '{
                     <DialogTitle>
                         {title}
                         <IconButton
+                            id="{{ createId action }}-dialog-close"
                             aria-label="close"
                             onClick={ () => cancel() }
                             sx={ {
@@ -151,10 +153,10 @@ import { baseTableConfig, baseColumnConfig, toastConfig, dividerHeight } from '{
                         </Grid>
                     </DialogContent>
                     <DialogActions>
-                        <Button variant="text" onClick={ () => cancel() } disabled={isLoading}>
+                        <Button id="{{ createId action }}-action-form-action-cancel" variant="text" onClick={ () => cancel() } disabled={isLoading}>
                             {t('judo.pages.cancel', { defaultValue: 'Cancel' })}
                         </Button>
-                        <Button variant="contained" onClick={ () => saveData() } disabled={isLoading}>
+                        <Button id="{{ createId action }}-action-form-action-create" variant="contained" onClick={ () => saveData() } disabled={isLoading}>
                             {t('judo.pages.create', { defaultValue: 'Create' })}
                         </Button>
                     </DialogActions>
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/actions/actionForm/operationInputActionForm.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/pages/actions/actionForm/operationInputActionForm.tsx.hbs
index ed024e8e..d9c30a47 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/actions/actionForm/operationInputActionForm.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/actions/actionForm/operationInputActionForm.tsx.hbs
@@ -80,6 +80,7 @@ import { baseTableConfig, baseColumnConfig, toastConfig } from '{{ relativePathF
                 {{# each table.rowActions as |action| }}
                     {{# if action.isRemoveAction }}
                         {
+                            id: '{{ createId action }}',
                             label: t('judo.pages.table.remove', { defaultValue: 'Remove' }) as string,
                             icon: <MdiIcon path="{{ action.icon.name }}" />,
                             action: async (row: {{ classDataName table.dataElement.target 'Stored' }}) => {
@@ -142,6 +143,7 @@ import { baseTableConfig, baseColumnConfig, toastConfig } from '{{ relativePathF
                     <DialogTitle>
                         {title}
                         <IconButton
+                            id="{{ createId action }}-dialog-close"
                             aria-label="close"
                             onClick={ () => cancel() }
                             sx={ {
@@ -164,7 +166,7 @@ import { baseTableConfig, baseColumnConfig, toastConfig } from '{{ relativePathF
                         </Grid>
                     </DialogContent>
                     <DialogActions>
-                        <Button variant="text" onClick={ () => cancel() } disabled={isLoading}>
+                        <Button id="{{ createId action }}-action-form-action-cancel" variant="text" onClick={ () => cancel() } disabled={isLoading}>
                             {{# if (getBackButtonForOperationInputPage action.inputParameterPage) }}
                                 {{# with (getBackButtonForOperationInputPage action.inputParameterPage) as |backButton| }}
                                     { t('{{ idToTranslationKey action.fQName application }}', { defaultValue: '{{ backButton.label }}' }) as string }
@@ -173,7 +175,7 @@ import { baseTableConfig, baseColumnConfig, toastConfig } from '{{ relativePathF
                                 { t('judo.pages.cancel', { defaultValue: 'Cancel' }) as string }
                             {{/ if }}
                         </Button>
-                        <Button variant="contained" onClick={ () => submit() } disabled={isLoading}>
+                        <Button id="{{ createId action }}-action-form-action-submit" variant="contained" onClick={ () => submit() } disabled={isLoading}>
                             {{# if (getSaveButtonForOperationInputPage action.inputParameterPage) }}
                                 {{# with (getSaveButtonForOperationInputPage action.inputParameterPage) as |saveButton| }}
                                     { t('{{ idToTranslationKey action.fQName application }}', { defaultValue: '{{ saveButton.label }}' }) as string }
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/operation-output/view.hbs b/judo-ui-react/src/main/resources/actor/src/pages/operation-output/view.hbs
index a489d6fe..1193c56c 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/operation-output/view.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/operation-output/view.hbs
@@ -100,6 +100,7 @@ export default function {{ pageName page }}() {
             {{# each table.rowActions as |action| }}
                 {{# if action.isRemoveAction }}
                     {
+                        id: '{{ createId action }}',
                         label: t('judo.pages.table.remove', { defaultValue: 'Remove' }) as string,
                         icon: <MdiIcon path="{{ action.icon.name }}" />,
                         action: async (row: {{ classDataName table.dataElement.target 'Stored' }}) => {{ actionFunctionName action page }}(data, row, () => fetchData()),
@@ -107,6 +108,7 @@ export default function {{ pageName page }}() {
                 {{/ if }}
                 {{# if action.isDeleteAction }}
                     {
+                        id: '{{ createId action }}',
                         label: t('judo.pages.table.delete', { defaultValue: 'Delete' }) as string,
                         icon: <MdiIcon path="{{ action.icon.name }}" />,
                         action: async (row: {{ classDataName table.dataElement.target 'Stored' }}) => {{ actionFunctionName action page }}({{# if (hasDataElementOwner action.dataElement) }}data, {{/ if }}row, () => fetchData()),
@@ -115,6 +117,7 @@ export default function {{ pageName page }}() {
                 {{/ if }}
                 {{# if action.isCallOperationAction }}
                     {
+                        id: '{{ createId action }}',
                         label: t('{{ idToTranslationKey action.fQName application }}', { defaultValue: '{{ action.label }}' }) as string,
                         icon: <MdiIcon path="{{ action.icon.name }}" />,
                         action: async (row: {{ classDataName table.dataElement.target 'Stored' }}) => {{ actionFunctionName action page }}({{# if action.operation.isMapped }}row, {{/ if }}() => fetchData()),
@@ -203,7 +206,7 @@ export default function {{ pageName page }}() {
                     {{# if page.dataElement.isRefreshable }}
                         {!editMode && (
                             <Grid item>
-                                <Button onClick={() => fetchData()} disabled={isLoading}>
+                                <Button id="page-action-refresh" onClick={() => fetchData()} disabled={isLoading}>
                                     <MdiIcon path="refresh" />
                                     {t('judo.pages.refresh', { defaultValue: 'Refresh' })}
                                 </Button>
@@ -213,7 +216,7 @@ export default function {{ pageName page }}() {
                     {{# if page.dataElement.isDeletable }}
                         {!editMode && (
                             <Grid item>
-                                <Button onClick={() => deleteData()} disabled={isLoading || !data.__deleteable}>
+                                <Button id="page-action-delete" onClick={() => deleteData()} disabled={isLoading || !data.__deleteable}>
                                     <MdiIcon path="delete" />
                                     {t('judo.pages.delete', { defaultValue: 'Delete' })}
                                 </Button>
@@ -223,7 +226,7 @@ export default function {{ pageName page }}() {
                     {{# if page.dataElement.isUpdatable }}
                         {!editMode && (
                             <Grid item>
-                                <Button onClick={() => setEditMode(true)} disabled={isLoading || !data.__updateable}>
+                                <Button id="page-action-edit" onClick={() => setEditMode(true)} disabled={isLoading || !data.__updateable}>
                                     <MdiIcon path="pencil" />
                                     {t('judo.pages.edit', { defaultValue: 'Edit' })}
                                 </Button>
@@ -232,6 +235,7 @@ export default function {{ pageName page }}() {
                         {editMode && (
                             <Grid item>
                                 <Button
+                                    id="page-action-edit-cancel"
                                     variant="outlined"
                                     onClick={() => {
                                         setEditMode(false);
@@ -246,7 +250,7 @@ export default function {{ pageName page }}() {
                         )}
                         {editMode && (
                             <Grid item>
-                                <Button onClick={() => saveData()} disabled={isLoading}>
+                                <Button id="page-action-edit-save" onClick={() => saveData()} disabled={isLoading}>
                                     <MdiIcon path="content-save" />
                                     {t('judo.pages.save', { defaultValue: 'Save' })}
                                 </Button>
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/page-fallback.hbs b/judo-ui-react/src/main/resources/actor/src/pages/page-fallback.hbs
index 6d14a1b7..8ee02d68 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/page-fallback.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/page-fallback.hbs
@@ -27,7 +27,9 @@ export default function {{ pageName page }}() {
                 <Fragment />
             </PageHeader>
             <Box component="main" color="inherit" sx={ { flex: 1, py: 6, px: 4 } }>
-                <Paper variant="elevation" sx={ { maxWidth: 1280, margin: 'auto', overflow: 'hidden' } } />
+                <Paper variant="elevation" sx={ { maxWidth: 1280, margin: 'auto', overflow: 'hidden' } }>
+                    Dashboard
+                </Paper>
             </Box>
         </Fragment>
     );
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/relation/table.hbs b/judo-ui-react/src/main/resources/actor/src/pages/relation/table.hbs
index 402b72b8..e72cef32 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/relation/table.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/relation/table.hbs
@@ -185,6 +185,7 @@ export default function {{ pageName page }}() {
             {{# each table.rowActions as |action| }}
                 {{# if action.isRemoveAction }}
                     {
+                        id: '{{ createId action }}',
                         label: t('judo.pages.table.remove', { defaultValue: 'Remove' }) as string,
                         icon: <MdiIcon path="{{ action.icon.name }}" />,
                         action: async (row: {{ classDataName table.dataElement.target 'Stored' }}) => {{ actionFunctionName action page }}({ __signedIdentifier: signedIdentifier } as JudoIdentifiable<{{ classDataName table.dataElement.owner '' }}>, row, () => fetchData()),
@@ -192,6 +193,7 @@ export default function {{ pageName page }}() {
                 {{/ if }}
                 {{# if action.isDeleteAction }}
                     {
+                        id: '{{ createId action }}',
                         label: t('judo.pages.table.delete', { defaultValue: 'Delete' }) as string,
                         icon: <MdiIcon path="{{ action.icon.name }}" />,
                         action: async (row: {{ classDataName table.dataElement.target 'Stored' }}) => {{ actionFunctionName action page }}({ __signedIdentifier: signedIdentifier } as JudoIdentifiable<{{ classDataName table.dataElement.owner '' }}>, row, () => fetchData()),
@@ -200,6 +202,7 @@ export default function {{ pageName page }}() {
                 {{/ if }}
                 {{# if action.isCallOperationAction }}
                     {
+                        id: '{{ createId action }}',
                         label: t('{{ idToTranslationKey action.fQName application }}', { defaultValue: '{{ action.label }}' }) as string,
                         icon: <MdiIcon path="{{ action.icon.name }}" />,
                         action: async (row: {{ classDataName table.dataElement.target 'Stored' }}) => {{ actionFunctionName action page }} ({{# if action.operation.isMapped }}row, {{/ if }}() => fetchData()),
@@ -214,7 +217,7 @@ export default function {{ pageName page }}() {
                     {{# each (getUniquePageActions page) as |action| }}
                         {{# if action.isRefreshAction }}
                             <Grid item>
-                                <Button onClick={ () => {{ actionFunctionName action page }}(() => fetchData()) } disabled={isLoading}>
+                                <Button id="page-action-refresh" onClick={ () => {{ actionFunctionName action page }}(() => fetchData()) } disabled={isLoading}>
                                     <MdiIcon path="refresh" />
                                     {t('judo.pages.table.refresh', { defaultValue: 'Refresh' })}
                                 </Button>
@@ -222,7 +225,7 @@ export default function {{ pageName page }}() {
                         {{/ if }}
                         {{# if action.isAddAction }}
                             <Grid item>
-                                <Button onClick={ () => {{ actionFunctionName action page }}({ __signedIdentifier: signedIdentifier } as JudoIdentifiable<{{ classDataName table.dataElement.owner '' }}>, () => fetchData()) } disabled={isLoading}>
+                                <Button id="page-action-add" onClick={ () => {{ actionFunctionName action page }}({ __signedIdentifier: signedIdentifier } as JudoIdentifiable<{{ classDataName table.dataElement.owner '' }}>, () => fetchData()) } disabled={isLoading}>
                                     <MdiIcon path="attachment-plus" />
                                     {t('judo.pages.table.add', { defaultValue: 'Add' })}
                                 </Button>
@@ -230,7 +233,7 @@ export default function {{ pageName page }}() {
                         {{/ if }}
                         {{# if action.isClearAction }}
                             <Grid item>
-                                <Button onClick={ () => {{ actionFunctionName action page }}({ __signedIdentifier: signedIdentifier } as JudoIdentifiable<{{ classDataName table.dataElement.owner '' }}>, () => fetchData()) } disabled={isLoading}>
+                                <Button id="page-action-clear" onClick={ () => {{ actionFunctionName action page }}({ __signedIdentifier: signedIdentifier } as JudoIdentifiable<{{ classDataName table.dataElement.owner '' }}>, () => fetchData()) } disabled={isLoading}>
                                     <MdiIcon path="link_off" />
                                     {t('judo.pages.table.clear', { defaultValue: 'Clear' })}
                                 </Button>
@@ -243,7 +246,7 @@ export default function {{ pageName page }}() {
                         <Grid container spacing={2}>
                             <Grid item xs={12}>
                                 <Card>
-                                    <CardContent>
+                                    <CardContent id="{{ createId page }}-data-grid">
                                         <DataGrid
                                             { ...pageServerTableConfig }
                                             getRowId={(row: { __identifier: string }) => row.__identifier}
@@ -252,7 +255,7 @@ export default function {{ pageName page }}() {
                                             rowCount={rowCount}
                                             sortModel={sortModel}
                                             onSortModelChange={handleSortModelChange}
-                                            columns={[...columns, ...columnsActionCalculator(rowActions, { shownActions: 2 })]}
+                                            columns={[...columns, ...columnsActionCalculator('{{ createId table.dataElement }}', rowActions, { shownActions: 2 })]}
                                             {{# each (getUniquePageActions page) as |action| }}
                                                 {{# if action.isViewAction }}
                                                     onRowClick={ (params: GridRowParams<{{ classDataName table.dataElement.target 'Stored' }}>) => {{ actionFunctionName action page }}(params.row) }
@@ -264,8 +267,9 @@ export default function {{ pageName page }}() {
                                                         {{# each (getUniquePageActions page) as |action| }}
                                                             {{# if action.isFilterAction }}
                                                                 <Button
+                                                                    id="{{ createId action }}"
                                                                     variant="outlined"
-                                                                    onClick={ async () => {{ actionFunctionName action page }}(filterOptions, filters) }
+                                                                    onClick={ async () => {{ actionFunctionName action page }}('{{ createId action }}-filter', filterOptions, filters) }
                                                                     disabled={isLoading}
                                                                 >
                                                                     {t('judo.pages.table.set-filters', { defaultValue: 'Set filters' }) + (filters.length !== 0 ? ' (' + filters.length + ')' : '')}
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/relation/view.hbs b/judo-ui-react/src/main/resources/actor/src/pages/relation/view.hbs
index 3bbc8416..fb385d34 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/relation/view.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/relation/view.hbs
@@ -108,6 +108,7 @@ export default function {{ pageName page }}() {
             {{# each table.rowActions as |action| }}
                 {{# if action.isRemoveAction }}
                     {
+                        id: '{{ createId action }}',
                         label: t('judo.pages.table.remove', { defaultValue: 'Remove' }) as string,
                         icon: <MdiIcon path="{{ action.icon.name }}" />,
                         action: async (row: {{ classDataName table.dataElement.target 'Stored' }}) => {{ actionFunctionName action page }}(data, row, () => fetchData()),
@@ -115,6 +116,7 @@ export default function {{ pageName page }}() {
                 {{/ if }}
                 {{# if action.isDeleteAction }}
                     {
+                        id: '{{ createId action }}',
                         label: t('judo.pages.table.delete', { defaultValue: 'Delete' }) as string,
                         icon: <MdiIcon path="{{ action.icon.name }}" />,
                         action: async (row: {{ classDataName table.dataElement.target 'Stored' }}) => {{ actionFunctionName action page }}({{# if (hasDataElementOwner action.dataElement) }}data, {{/ if }}row, () => fetchData()),
@@ -123,6 +125,7 @@ export default function {{ pageName page }}() {
                 {{/ if }}
                 {{# if action.isCallOperationAction }}
                     {
+                        id: '{{ createId action }}',
                         label: t('{{ idToTranslationKey action.fQName application }}', { defaultValue: '{{ action.label }}' }) as string,
                         icon: <MdiIcon path="{{ action.icon.name }}" />,
                         action: async (row: {{ classDataName table.dataElement.target 'Stored' }}) => {{ actionFunctionName action page }}({{# if action.operation.isMapped }}row, {{/ if }}() => fetchData()),
@@ -210,7 +213,7 @@ export default function {{ pageName page }}() {
                     {{# if page.relationType.isRefreshable }}
                         {!editMode && (
                             <Grid item>
-                                <Button onClick={() => fetchData()} disabled={isLoading}>
+                                <Button id="page-action-refresh" onClick={() => fetchData()} disabled={isLoading}>
                                     <MdiIcon path="refresh" />
                                     {t('judo.pages.refresh', { defaultValue: 'Refresh' })}
                                 </Button>
@@ -220,7 +223,7 @@ export default function {{ pageName page }}() {
                     {{# if page.relationType.isDeletable }}
                         {!editMode && (
                             <Grid item>
-                                <Button onClick={() => deleteData()} disabled={isLoading || !data.__deleteable}>
+                                <Button id="page-action-delete" onClick={() => deleteData()} disabled={isLoading || !data.__deleteable}>
                                     <MdiIcon path="delete" />
                                     {t('judo.pages.delete', { defaultValue: 'Delete' })}
                                 </Button>
@@ -230,7 +233,7 @@ export default function {{ pageName page }}() {
                     {{# if page.relationType.isUpdatable }}
                         {!editMode && (
                             <Grid item>
-                                <Button onClick={() => setEditMode(true)} disabled={isLoading || !data.__updateable}>
+                                <Button id="page-action-edit" onClick={() => setEditMode(true)} disabled={isLoading || !data.__updateable}>
                                     <MdiIcon path="pencil" />
                                     {t('judo.pages.edit', { defaultValue: 'Edit' })}
                                 </Button>
@@ -239,6 +242,7 @@ export default function {{ pageName page }}() {
                         {editMode && (
                             <Grid item>
                                 <Button
+                                    id="page-action-edit-cancel"
                                     variant="outlined"
                                     onClick={() => {
                                         setEditMode(false);
@@ -253,7 +257,7 @@ export default function {{ pageName page }}() {
                         )}
                         {editMode && (
                             <Grid item>
-                                <Button onClick={() => saveData()} disabled={isLoading}>
+                                <Button id="page-action-edit-save" onClick={() => saveData()} disabled={isLoading}>
                                     <MdiIcon path="content-save" />
                                     {t('judo.pages.save', { defaultValue: 'Save' })}
                                 </Button>
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/actiongroup.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/actiongroup.hbs
index 6f1908d2..a61796ac 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/actiongroup.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/actiongroup.hbs
@@ -4,7 +4,7 @@
         {{# each (featuredActionsForActionGroup child) as |action| }}
             {{# if action.hiddenBy }}( !data.{{ action.hiddenBy.name }} }} && {{/ if }}
             <Grid item>
-                <Button onClick={ () => {{ actionFunctionName action.action page }}({{# if action.action.operation.isMapped }}data, {{/ if }}() => fetchData()) } disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} isLoading || editMode }>
+                <Button id="{{ createId action }}" onClick={ () => {{ actionFunctionName action.action page }}({{# if action.action.operation.isMapped }}data, {{/ if }}() => fetchData()) } disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} isLoading || editMode }>
                     {{# if action.icon }}
                         <MdiIcon path="{{ action.icon.name }}" />
                     {{/ if }}
@@ -16,10 +16,12 @@
         {{# if (displayDropdownForActionGroup child) }}
             <Grid item>
                 <DropdownButton
+                    id="{{ createId child }}-action-group"
                     disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} isLoading || editMode }
                     menuItems={[
                         {{# each (nonFeaturedActionsForActionGroup child) as |action| }}
                             {
+                                id: '{{ createId action }}',
                                 label: t('{{ idToTranslationKey action.fQName application }}', { defaultValue: '{{ action.label }}' }) as string,
                                 onClick: () => {{ actionFunctionName action.action page }}({{# if action.action.operation.isMapped }}data, {{/ if }}() => fetchData()),
                                 startIcon: <MdiIcon path="arrow_right" />,
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/binarytypeinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/binarytypeinput.hbs
index 8aa40aee..ce93853a 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/binarytypeinput.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/binarytypeinput.hbs
@@ -5,7 +5,7 @@
             <TextField
                 {{# if child.attributeType.isRequired }} required {{/ if }}
                 name="{{ child.attributeType.name }}"
-                id="{{ getXMIID child }}"
+                id="{{ createId child }}"
                 label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string }
                 type="file"
                 error={ !!validation.get('{{ child.attributeType.name }}') }
@@ -51,7 +51,7 @@
             />
           )
         : (
-            <Button variant="contained" disabled={ !data?.{{ child.attributeType.name }} } onClick={ () => downloadFile(data, '{{ child.attributeType.name }}') }>
+            <Button id="{{ createId child }}-download" variant="contained" disabled={ !data?.{{ child.attributeType.name }} } onClick={ () => downloadFile(data, '{{ child.attributeType.name }}') }>
                 {{# if child.icon }}
                     <MdiIcon path="{{ child.icon.name }}" {{# neq child.attributeType.dataType.mimeTypes.size 0 }}mimeType={ { type: '{{ child.attributeType.dataType.mimeTypes.[0].type }}', subType: '{{ child.attributeType.dataType.mimeTypes.[0].subType }}' } }{{/ neq }} />
                 {{/ if }}
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/button.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/button.hbs
index d666cfc4..3757b11b 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/button.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/button.hbs
@@ -2,7 +2,7 @@
     {{# if child.hiddenBy }} { !data.{{ child.hiddenBy.name }} && {{/ if }}
     <Grid item xs={12} sm={12} {{# neq (calculateSize child) 12.0 }}md={ {{ calculateSize child }} }{{/ neq }}>
         {{# if action.isCallOperationAction }}
-            <Button onClick={() => {{ actionFunctionName action page }}({{# if action.operation.isMapped }}data, {{/ if }}() => fetchData())} disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} isLoading  || editMode }>
+            <Button id="{{ createId action }}" onClick={() => {{ actionFunctionName action page }}({{# if action.operation.isMapped }}data, {{/ if }}() => fetchData())} disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} isLoading  || editMode }>
                 {{# if child.icon }}
                     <MdiIcon path="{{ child.icon.name }}" />
                 {{/ if }}
@@ -11,7 +11,7 @@
         {{/ if }}
 
         {{# if action.isNavigationToPageAction }}
-            <Button onClick={() => {{ actionFunctionName action page }}(data)} disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} isLoading  || editMode }>
+            <Button id="{{ createId action }}" onClick={() => {{ actionFunctionName action page }}(data)} disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} isLoading  || editMode }>
                 {{# if child.icon }}
                     <MdiIcon path="{{ child.icon.name }}" />
                 {{/ if }}
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/dateinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/dateinput.hbs
index 96684843..eb05436d 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/dateinput.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/dateinput.hbs
@@ -5,6 +5,7 @@
             <TextField
                 {{# if child.attributeType.isRequired }} required {{/ if }}
                 {...props}
+                id="{{ createId child }}"
                 error={!!validation.get('{{ child.attributeType.name }}')}
                 helperText={validation.get('{{ child.attributeType.name }}')}
             />
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/datetimeinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/datetimeinput.hbs
index 2ec101b9..c50587cf 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/datetimeinput.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/datetimeinput.hbs
@@ -5,6 +5,7 @@
             <TextField
                 {{# if child.attributeType.isRequired }} required {{/ if }}
                 {...props}
+                id="{{ createId child }}"
                 error={!!validation.get('{{ child.attributeType.name }}')}
                 helperText={validation.get('{{ child.attributeType.name }}')}
             />
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationcombo.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationcombo.hbs
index cd0c95e5..f98f3865 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationcombo.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationcombo.hbs
@@ -3,7 +3,7 @@
     <TextField
         {{# if child.attributeType.isRequired }} required {{/ if }}
         name="{{ child.attributeType.name }}"
-        id="{{ getXMIID child }}"
+        id="{{ createId child }}"
         label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string }
         value={ data.{{ child.attributeType.name }} || '' }
         error={ !!validation.get('{{ child.attributeType.name }}') }
@@ -24,7 +24,7 @@
         select
     >
         {{# each child.attributeType.dataType.members as |member| }}
-            <MenuItem value={ '{{ member.name }}' }>
+            <MenuItem id="{{ createId member }}" value={ '{{ member.name }}' }>
                 { t('enumerations.{{ restParamName child.attributeType.dataType }}.{{ member.name }}', { defaultValue: '{{ member.name }}' }) }
             </MenuItem>
         {{/ each }}
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationradio.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationradio.hbs
index 48f469cc..1a9128be 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationradio.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationradio.hbs
@@ -4,13 +4,13 @@
         sx={ { justifyContent: 'space-between' } }
         row
         name="{{ child.attributeType.name }}"
-        id="{{ getXMIID child }}"
+        id="{{ createId child }}"
         value={ data.{{ child.attributeType.name }} || '' }
         className={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined }
         onChange={ (event) => storeDiff('{{ child.attributeType.name }}', event.target.value as {{ restParamName child.attributeType.dataType }}) }
     >
     {{# each child.attributeType.dataType.members as |member| }}
-        <FormControlLabel value={ '{{ member.name }}' } control={<Radio />} label= { t('enumerations.{{ restParamName child.attributeType.dataType }}.{{ member.name }}', { defaultValue: '{{ member.name }}' }) }
+        <FormControlLabel id="{{ createId member }}" value={ '{{ member.name }}' } control={<Radio />} label= { t('enumerations.{{ restParamName child.attributeType.dataType }}.{{ member.name }}', { defaultValue: '{{ member.name }}' }) }
         disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode }
         />
     {{/ each }}
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/flex/column.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/flex/column.hbs
index 523b128f..ea50b99f 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/flex/column.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/flex/column.hbs
@@ -1,7 +1,7 @@
 {{# if this.hiddenBy }} { !data.{{ this.hiddenBy.name }} && {{/ if }}
 <Grid item xs={12} sm={12} {{# neq (calculateSize this) 12.0 }}md={ {{ calculateSize this }} }{{/ neq }}>
     {{# if this.card }}
-        <Card>
+        <Card id="{{ createId this }}">
             <CardContent>
                 <Grid container direction="column" alignItems="stretch" justifyContent="flex-start" spacing={2}>
                     {{# each this.children as |child| }}
@@ -13,7 +13,7 @@
             </CardContent>
         </Card>
     {{ else }}
-        <Grid container direction="column" alignItems="{{ alignItems this }}" justifyContent="{{ justifyContent this }}" spacing={2}>
+        <Grid id="{{ createId this }}" container direction="column" alignItems="{{ alignItems this }}" justifyContent="{{ justifyContent this }}" spacing={2}>
             {{# each this.children as |child| }}
                 {{# if child }}
                     {{> (getWidgetTemplate child) }}
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/flex/row.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/flex/row.hbs
index 33ffe592..e7c168d5 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/flex/row.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/flex/row.hbs
@@ -1,7 +1,7 @@
 {{# if this.hiddenBy }} { !data.{{ this.hiddenBy.name }} && {{/ if }}
 <Grid item xs={12} sm={12} {{# neq (calculateSize this) 12.0 }}md={ {{ calculateSize this }} }{{/ neq }}>
     {{# if this.card }}
-        <Card>
+        <Card id="{{ createId this }}">
             <CardContent>
                 <Grid container direction="column" alignItems="stretch" justifyContent="flex-start" spacing={2}>
                     {{# each this.children as |child| }}
@@ -13,7 +13,7 @@
             </CardContent>
         </Card>
     {{ else }}
-        <Grid container direction="row" alignItems="{{ alignItems this }}" justifyContent="{{ justifyContent this }}" spacing={2}>
+        <Grid id="{{ createId this }}" container direction="row" alignItems="{{ alignItems this }}" justifyContent="{{ justifyContent this }}" spacing={2}>
             {{# each this.children as |child| }}
                 {{# if child }}
                     {{> (getWidgetTemplate child) }}
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/formatted.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/formatted.hbs
index 217a67f7..344ea7dd 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/formatted.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/formatted.hbs
@@ -1,6 +1,6 @@
 {{# if child.hiddenBy }} { !data.{{ child.hiddenBy.name }} && {{/ if }}
 <Grid item xs={12} sm={12} {{# neq (calculateSize child) 12.0 }}md={ {{ calculateSize child }} }{{/ neq }}>
-    <Typography>
+    <Typography id="{{ createId child }}">
         { data.{{ child.attributeType.name }} }
     </Typography>
 </Grid>
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/label.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/label.hbs
index b90c5ddd..52eef2d7 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/label.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/label.hbs
@@ -4,7 +4,7 @@
         {{# if child.icon }}
             <MdiIcon path="{{ child.icon.name }}" />
         {{/ if }}
-        <Typography variant="h6" component="h1">
+        <Typography id="{{ createId child }}" variant="h6" component="h1">
             { t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) }
         </Typography>
     </Grid>
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/link.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/link.hbs
index f93b5ce7..f041c0b7 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/link.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/link.hbs
@@ -2,7 +2,7 @@
 <Grid item xs={12} sm={12} {{# neq (calculateSize child) 12.0 }}md={ {{ calculateSize child }} }{{/ neq }}>
     <AggregationInput
         name="{{ child.dataElement.name }}"
-        id="{{ getXMIID child }}"
+        id="{{ createId child }}"
         label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string {{# if child.attributeType.isRequired }} + " *" {{/ if }} }
         labelList={[
             {{# each child.parts as |part| }}
@@ -24,6 +24,7 @@
                 {{# unless child.dataElement.isReadOnly }}
                     onSet={ async () => {
                         const res = await openRangeDialog<{{ classDataName child.dataElement.target 'Stored' }}, {{ classDataName child.dataElement.target 'QueryCustomizer' }}>({
+                            id: '{{ createId child.dataElement }}',
                             columns: {{ child.dataElement.name }}Columns,
                             defaultSortField: ({{{ getDefaultSortParamsForLink child }}} as GridSortItem[])[0],
                             rangeCall: async (queryCustomizer) =>
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/numericinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/numericinput.hbs
index 9aa18578..7510a546 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/numericinput.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/numericinput.hbs
@@ -3,7 +3,7 @@
     <TextField
         {{# if child.attributeType.isRequired }} required {{/ if }}
         name="{{ child.attributeType.name }}"
-        id="{{ getXMIID child }}"
+        id="{{ createId child }}"
         label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string }
         type="number"
         value={ data.{{ child.attributeType.name }} }
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/switch.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/switch.hbs
index d1f15261..f66c4273 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/switch.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/switch.hbs
@@ -3,7 +3,7 @@
     <TextField
         {{# if child.attributeType.isRequired }} required {{/ if }}
         name="{{ child.attributeType.name }}"
-        id="{{ getXMIID child }}"
+        id="{{ createId child }}"
         label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string }
         select
         value={ booleanToStringSelect( data.{{ child.attributeType.name }} )}
@@ -25,9 +25,9 @@
                 {{/ if }}
         } }
     >
-        <MenuItem value={'true'}>{ t('judo.form.switch.true', { defaultValue: 'Yes' }) as string }</MenuItem>
-        <MenuItem value={'false'}>{ t('judo.form.switch.false', { defaultValue: 'No' }) as string }</MenuItem>
-        <MenuItem value={' '}>{ t('judo.form.switch.unknown', { defaultValue: 'Unknown' }) as string }</MenuItem>
+        <MenuItem id="{{ createId child }}-true" value={'true'}>{ t('judo.form.switch.true', { defaultValue: 'Yes' }) as string }</MenuItem>
+        <MenuItem id="{{ createId child }}-false" value={'false'}>{ t('judo.form.switch.false', { defaultValue: 'No' }) as string }</MenuItem>
+        <MenuItem id="{{ createId child }}-undefined" value={' '}>{ t('judo.form.switch.unknown', { defaultValue: 'Unknown' }) as string }</MenuItem>
     </TextField>
 </Grid>
 {{# if child.hiddenBy }} } {{/ if }}
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/tabcontroller.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/tabcontroller.hbs
index 65a4ab4b..af1181e5 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/tabcontroller.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/tabcontroller.hbs
@@ -1,11 +1,12 @@
 {{# if child.hiddenBy }} { !data.{{ child.hiddenBy.name }} && {{/ if }}
 <Grid container item xs={12} sm={12} {{# neq (calculateSize child) 12.0 }}md={ {{ calculateSize child }} }{{/ neq }}>
     <ModeledTabs
+        id="{{ createId child }}"
         activeIndex={0}
         childTabs={[
             {{# each child.tabs as |tab| }}
                 {
-                    id: '{{ tab.name }}',
+                    id: '{{ createId tab }}',
                     name: '{{ tab.name }}',
                     label: '{{ tab.element.label }}',
                     {{# if tab.child.icon }}
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/table.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/table.hbs
index b4097452..40427d15 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/table.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/table.hbs
@@ -1,12 +1,12 @@
 {{# if child.hiddenBy }} { !data.{{ child.hiddenBy.name }} && {{/ if }}
 <Grid item xs={12} sm={12} {{# neq (calculateSize child) 12.0 }}md={ {{ calculateSize child }} }{{/ neq }}>
-    <Grid container direction="column" alignItems="stretch" justifyContent="flex-start">
+    <Grid id="{{ createId child }}" container direction="column" alignItems="stretch" justifyContent="flex-start">
         <DataGrid
             { ...baseTableConfig }
             getRowId={(row: { __identifier: string }) => row.__identifier}
             loading={isLoading}
             rows={data?.{{ child.dataElement.name }} ?? []}
-            columns={[ ...{{ child.dataElement.name }}Columns, ...columnsActionCalculator({{ child.dataElement.name }}RowActions, { shownActions: 2 }) ]}
+            columns={[ ...{{ child.dataElement.name }}Columns, ...columnsActionCalculator('{{ createId child.dataElement }}', {{ child.dataElement.name }}RowActions, { shownActions: 2 }) ]}
             disableSelectionOnClick
             {{# each child.rowActions as |action| }}
                 {{# if action.isViewAction }}
@@ -25,6 +25,7 @@
                                 {{# if page.isPageTypeOperationInput }}
                                     {{# if action.isClearAction }}
                                         <Button
+                                            id="{{ createId action }}"
                                             onClick={ () => {
                                                 setData({
                                                     ...data,
@@ -41,6 +42,7 @@
                                     {{/ if }}
                                     {{# if action.isAddAction }}
                                         <Button
+                                            id="{{ createId action }}"
                                             onClick={ async () => {
                                                 const res = await {{ action.dataElement.name }}RangeCall();
 
@@ -62,6 +64,7 @@
                                 {{ else }}
                                     {{# if action.isCreateAction }}
                                         <Button
+                                            id="{{ createId action }}"
                                             onClick={ () => {{ actionFunctionName action page }}({{# unless (isActionAccess action) }}data, {{/ unless }}() => fetchData()) }
                                             disabled={isLoading || editMode}
                                         >
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/text.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/text.hbs
index edf7012e..c1c21c2d 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/text.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/text.hbs
@@ -1,6 +1,6 @@
 {{# if child.hiddenBy }} { !data.{{ child.hiddenBy.name }} && {{/ if }}
 <Grid item xs={12} sm={12} {{# neq (calculateSize child) 12.0 }}md={ {{ calculateSize child }} }{{/ neq }}>
-    <Typography>
+    <Typography id="{{ createId child }}">
         {{ child.text }}
     </Typography>
 </Grid>
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/textarea.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/textarea.hbs
index b0f29451..8be6ab0d 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/textarea.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/textarea.hbs
@@ -3,7 +3,7 @@
     <TextField
         {{# if child.attributeType.isRequired }} required {{/ if }}
         name="{{ child.attributeType.name }}"
-        id="{{ getXMIID child }}"
+        id="{{ createId child }}"
         label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string }
         value={ data.{{ child.attributeType.name }} }
         multiline
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/textinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/textinput.hbs
index 8dffcf03..a2e735b9 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/textinput.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/textinput.hbs
@@ -3,7 +3,7 @@
     <TextField
         {{# if child.attributeType.isRequired }} required {{/ if }}
         name="{{ child.attributeType.name }}"
-        id="{{ getXMIID child }}"
+        id="{{ createId child }}"
         label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string }
         value={ data.{{ child.attributeType.name }} }
         error={ !!validation.get('{{ child.attributeType.name }}') }
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/timeinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/timeinput.hbs
index 461e1d01..1e67d12b 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/timeinput.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/timeinput.hbs
@@ -5,6 +5,7 @@
             <TextField
                 {{# if child.attributeType.isRequired }} required {{/ if }}
                 {...props}
+                id="{{ createId child }}"
                 error={!!validation.get('{{ child.attributeType.name }}')}
                 helperText={validation.get('{{ child.attributeType.name }}')}
             />
diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/trinarylogiccombo.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/trinarylogiccombo.hbs
index f4aa4a4a..153f7fb2 100644
--- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/trinarylogiccombo.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/trinarylogiccombo.hbs
@@ -2,7 +2,7 @@
 <Grid item xs={12} sm={12} {{# neq (calculateSize child) 12.0 }}md={ {{ calculateSize child }} }{{/ neq }}>
     <TrinaryLogicCombobox
         name="{{ child.attributeType.name }}"
-        id="{{ getXMIID child }}"
+        id="{{ createId child }}"
         label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string {{# if child.attributeType.isRequired }} + " *" {{/ if }} }
         value={ data?.{{ child.attributeType.name }} }
         error={ !!validation.get('{{ child.attributeType.name }}') }
diff --git a/judo-ui-react/src/main/resources/actor/src/utilities/interfaces.ts.hbs b/judo-ui-react/src/main/resources/actor/src/utilities/interfaces.ts.hbs
index 415995bc..8a47a8b3 100644
--- a/judo-ui-react/src/main/resources/actor/src/utilities/interfaces.ts.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/utilities/interfaces.ts.hbs
@@ -7,4 +7,4 @@
 import type { GridColDef } from '@mui/x-data-grid';
 import { ColumnsActionsOptions, TableRowAction } from './table-row-actions';
 
-export type ColumnActionsProvider<R> = (actions: TableRowAction<R>[], options?: ColumnsActionsOptions) => GridColDef[];
+export type ColumnActionsProvider<R> = (id: string, actions: TableRowAction<R>[], options?: ColumnsActionsOptions) => GridColDef[];
diff --git a/judo-ui-react/src/main/resources/actor/src/utilities/table-row-actions.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/utilities/table-row-actions.tsx.hbs
index 3b5ebb97..f5fe3037 100644
--- a/judo-ui-react/src/main/resources/actor/src/utilities/table-row-actions.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/utilities/table-row-actions.tsx.hbs
@@ -7,6 +7,7 @@
 import type { ReactNode } from 'react';
 
 export interface TableRowAction<R> {
+  id: string;
   label: string;
   action: (row: R) => void;
   icon: ReactNode;