diff --git a/packages/web/src/components/AccountDropdownMenu/index.tsx b/packages/web/src/components/AccountDropdownMenu/index.tsx
index 31ee564e..4f2dbbf7 100644
--- a/packages/web/src/components/AccountDropdownMenu/index.tsx
+++ b/packages/web/src/components/AccountDropdownMenu/index.tsx
@@ -62,6 +62,7 @@ function AccountDropdownMenu(props: AccountDropdownMenuProps): React.ReactElemen
 
       <MenuItem
         onClick={logout}
+        data-test="logout-item"
       >
         {formatMessage('accountDropdownMenu.logout')}
       </MenuItem>
diff --git a/packages/web/src/components/AddAppConnection/index.tsx b/packages/web/src/components/AddAppConnection/index.tsx
index 3759514b..193bcde9 100644
--- a/packages/web/src/components/AddAppConnection/index.tsx
+++ b/packages/web/src/components/AddAppConnection/index.tsx
@@ -84,7 +84,7 @@ export default function AddAppConnection(props: AddAppConnectionProps): React.Re
   }, [connectionId, key, steps, onClose]);
 
   return (
-    <Dialog open={true} onClose={onClose}>
+    <Dialog open={true} onClose={onClose} data-test="add-app-connection-dialog">
       <DialogTitle>{hasConnection ? formatMessage('app.reconnectConnection') : formatMessage('app.addConnection')}</DialogTitle>
 
       <Alert severity="info" sx={{ fontWeight: 300 }}>
@@ -114,6 +114,7 @@ export default function AddAppConnection(props: AddAppConnectionProps): React.Re
               color="primary"
               sx={{ boxShadow: 2 }}
               loading={inProgress}
+              data-test="create-connection-button"
             >
               {formatMessage('addAppConnection.submit')}
             </LoadingButton>
diff --git a/packages/web/src/components/AddNewAppConnection/index.tsx b/packages/web/src/components/AddNewAppConnection/index.tsx
index 7bc02166..b14745b9 100644
--- a/packages/web/src/components/AddNewAppConnection/index.tsx
+++ b/packages/web/src/components/AddNewAppConnection/index.tsx
@@ -95,6 +95,7 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps): Re
               </InputAdornment>
             }
             label={formatMessage('apps.searchApp')}
+            data-test="search-for-app-text-field"
           />
         </FormControl>
 
@@ -102,7 +103,7 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps): Re
           {loading && <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />}
 
           {!loading && data?.getApps?.map((app: IApp) => (
-            <ListItem disablePadding key={app.name}>
+            <ListItem disablePadding key={app.name} data-test="app-list-item">
               <ListItemButton component={Link} to={createConnectionOrFlow(app.name.toLowerCase(), app.supportsConnections)}>
                 <ListItemIcon sx={{ minWidth: 74 }}>
                   <AppIcon color="transparent" url={app.iconUrl} name={app.name} />
diff --git a/packages/web/src/components/AppBar/index.tsx b/packages/web/src/components/AppBar/index.tsx
index d248b672..b168b645 100644
--- a/packages/web/src/components/AppBar/index.tsx
+++ b/packages/web/src/components/AppBar/index.tsx
@@ -82,6 +82,7 @@ export default function AppBar(props: AppBarProps): React.ReactElement {
             onClick={handleAccountMenuOpen}
             aria-controls={accountMenuId}
             aria-label="open profile menu"
+            data-test="profile-menu-button"
           >
             <AccountCircleIcon />
           </IconButton>
diff --git a/packages/web/src/components/AppConnectionRow/index.tsx b/packages/web/src/components/AppConnectionRow/index.tsx
index b85a2328..55a82904 100644
--- a/packages/web/src/components/AppConnectionRow/index.tsx
+++ b/packages/web/src/components/AppConnectionRow/index.tsx
@@ -79,7 +79,7 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
 
   return (
     <>
-      <Card sx={{ my: 2 }}>
+      <Card sx={{ my: 2 }} data-test="app-connection-row">
         <CardActionArea onClick={onContextMenuClick}>
           <CardContent>
             <Stack
diff --git a/packages/web/src/components/AppRow/index.tsx b/packages/web/src/components/AppRow/index.tsx
index e575f187..c714829b 100644
--- a/packages/web/src/components/AppRow/index.tsx
+++ b/packages/web/src/components/AppRow/index.tsx
@@ -30,7 +30,7 @@ function AppRow(props: AppRowProps): React.ReactElement {
   const { name, primaryColor, iconUrl, connectionCount, flowCount } = props.application;
 
   return (
-    <Link to={URLS.APP(name.toLowerCase())}>
+    <Link to={URLS.APP(name.toLowerCase())} data-test="app-row">
       <Card sx={{ mb: 1 }}>
         <CardActionArea>
           <CardContent>
diff --git a/packages/web/src/components/ChooseAppAndEventSubstep/index.tsx b/packages/web/src/components/ChooseAppAndEventSubstep/index.tsx
index 396d4b78..3b53c52e 100644
--- a/packages/web/src/components/ChooseAppAndEventSubstep/index.tsx
+++ b/packages/web/src/components/ChooseAppAndEventSubstep/index.tsx
@@ -152,6 +152,7 @@ function ChooseAppAndEventSubstep(
             )}
             value={getOption(appOptions, step.appKey)}
             onChange={onAppChange}
+            data-test="choose-app-autocomplete"
           />
 
           {step.appKey && (
@@ -175,6 +176,7 @@ function ChooseAppAndEventSubstep(
                 )}
                 value={getOption(actionOptions, step.key)}
                 onChange={onEventChange}
+                data-test="choose-event-autocomplete"
               />
             </Box>
           )}
@@ -197,6 +199,7 @@ function ChooseAppAndEventSubstep(
             onClick={onSubmit}
             sx={{ mt: 2 }}
             disabled={!valid || editorContext.readOnly}
+            data-test="flow-substep-continue-button"
           >
             Continue
           </Button>
diff --git a/packages/web/src/components/ChooseConnectionSubstep/index.tsx b/packages/web/src/components/ChooseConnectionSubstep/index.tsx
index 9fdeaec8..f99e51bc 100644
--- a/packages/web/src/components/ChooseConnectionSubstep/index.tsx
+++ b/packages/web/src/components/ChooseConnectionSubstep/index.tsx
@@ -126,6 +126,7 @@ function ChooseConnectionSubstep(props: ChooseConnectionSubstepProps): React.Rea
             value={getOption(connectionOptions, connection?.id)}
             onChange={handleChange}
             loading={loading}
+            data-test="choose-connection-autocomplete"
           />
 
           <Button
@@ -133,7 +134,7 @@ function ChooseConnectionSubstep(props: ChooseConnectionSubstepProps): React.Rea
             variant="contained"
             onClick={onSubmit}
             sx={{ mt: 2 }}
-            disabled={testResultLoading || !connection?.verified || editorContext.readOnly}
+            disabled={testResultLoading || !connection?.verified || editorContext.readOnly}data-test="flow-substep-continue-button"
           >
             Continue
           </Button>
diff --git a/packages/web/src/components/ControlledAutocomplete/index.tsx b/packages/web/src/components/ControlledAutocomplete/index.tsx
index 118575ef..f7ab33f6 100644
--- a/packages/web/src/components/ControlledAutocomplete/index.tsx
+++ b/packages/web/src/components/ControlledAutocomplete/index.tsx
@@ -55,6 +55,7 @@ function ControlledAutocomplete(props: ControlledAutocompleteProps): React.React
             }}
             onBlur={(...args) => { controllerOnBlur(); onBlur?.(...args); }}
             ref={ref}
+            data-test={`${name}-autocomplete`}
           />
 
           <FormHelperText
diff --git a/packages/web/src/components/Drawer/index.tsx b/packages/web/src/components/Drawer/index.tsx
index 4c943262..1fa7b6ae 100644
--- a/packages/web/src/components/Drawer/index.tsx
+++ b/packages/web/src/components/Drawer/index.tsx
@@ -18,6 +18,7 @@ type DrawerLink = {
   primary: string;
   to: string;
   badgeContent?: React.ReactNode;
+  dataTest?: string;
 };
 
 type DrawerProps = {
@@ -49,13 +50,14 @@ export default function Drawer(props: DrawerProps): React.ReactElement {
         <Toolbar />
 
         <List sx={{ py: 0, mt: 3 }}>
-          {links.map(({ Icon, primary, to }, index) => (
+          {links.map(({ Icon, primary, to, dataTest }, index) => (
             <ListItemLink
               key={`${to}-${index}`}
               icon={<Icon htmlColor={theme.palette.primary.main} />}
               primary={formatMessage(primary)}
               to={to}
               onClick={closeOnClick}
+              data-test={dataTest}
             />
           ))}
         </List>
diff --git a/packages/web/src/components/EditorLayout/index.tsx b/packages/web/src/components/EditorLayout/index.tsx
index 4103fe05..6ddacb9a 100644
--- a/packages/web/src/components/EditorLayout/index.tsx
+++ b/packages/web/src/components/EditorLayout/index.tsx
@@ -74,6 +74,7 @@ export default function EditorLayout(): React.ReactElement {
                 size="small"
                 component={Link}
                 to={URLS.FLOWS}
+                data-test="editor-go-back-button"
               >
                 <ArrowBackIosNewIcon fontSize="small" />
               </IconButton>
@@ -92,7 +93,12 @@ export default function EditorLayout(): React.ReactElement {
           </Box>
 
           <Box pr={1}>
-            <Button variant="contained" size="small" onClick={() => onFlowStatusUpdate(!flow.active)}>
+            <Button
+              variant="contained"
+              size="small"
+              onClick={() => onFlowStatusUpdate(!flow.active)}
+              data-test={flow?.active ? 'unpublish-flow-button' : 'publish-flow-button'}
+            >
               {flow?.active ? formatMessage('flowEditor.unpublish') : formatMessage('flowEditor.publish')}
             </Button>
           </Box>
@@ -108,13 +114,19 @@ export default function EditorLayout(): React.ReactElement {
       </Stack>
 
       <Snackbar
+        data-test="flow-cannot-edit-info-snackbar"
         open={!!flow?.active}
         message={formatMessage('flowEditor.publishedFlowCannotBeUpdated')}
         anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}
         ContentProps={{ sx: { fontWeight: 300 }}}
         action={(
-          <Button variant="contained" size="small" onClick={() => onFlowStatusUpdate(!flow.active)}>
-            {flow?.active ? formatMessage('flowEditor.unpublish') : formatMessage('flowEditor.publish')}
+          <Button
+            variant="contained"
+            size="small"
+            onClick={() => onFlowStatusUpdate(!flow.active)}
+            data-test="unpublish-flow-from-snackbar"
+          >
+            {formatMessage('flowEditor.unpublish')}
           </Button>
         )}
       />
diff --git a/packages/web/src/components/ExecutionRow/index.tsx b/packages/web/src/components/ExecutionRow/index.tsx
index a949de12..f9a133f3 100644
--- a/packages/web/src/components/ExecutionRow/index.tsx
+++ b/packages/web/src/components/ExecutionRow/index.tsx
@@ -25,7 +25,7 @@ export default function ExecutionRow(props: ExecutionRowProps): React.ReactEleme
   const relativeCreatedAt = createdAt.toRelative();
 
   return (
-    <Link to={URLS.EXECUTION(execution.id)}>
+    <Link to={URLS.EXECUTION(execution.id)} data-test="execution-row">
       <Card sx={{ mb: 1 }}>
         <CardActionArea>
           <CardContent>
diff --git a/packages/web/src/components/ExecutionStep/index.tsx b/packages/web/src/components/ExecutionStep/index.tsx
index abddaa23..026b4693 100644
--- a/packages/web/src/components/ExecutionStep/index.tsx
+++ b/packages/web/src/components/ExecutionStep/index.tsx
@@ -41,7 +41,7 @@ export default function ExecutionStep(props: ExecutionStepProps): React.ReactEle
   const validationStatusIcon = executionStep.status === 'success' ? validIcon : errorIcon;
 
   return (
-    <Wrapper elevation={1}>
+    <Wrapper elevation={1} data-test="execution-step">
       <Header>
         <Stack direction="row" alignItems="center" gap={2}>
           <AppIconWrapper>
@@ -71,9 +71,9 @@ export default function ExecutionStep(props: ExecutionStepProps): React.ReactEle
       <Content sx={{ px: 2 }}>
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
           <Tabs value={activeTabIndex} onChange={(event, tabIndex) => setActiveTabIndex(tabIndex)}>
-            <Tab label="Data in" />
-            <Tab label="Data out" />
-            <Tab label="Error" />
+            <Tab label="Data in" data-test="data-in-tab" />
+            <Tab label="Data out" data-test="data-out-tab" />
+            <Tab label="Error" data-test="error-tab" />
             <Tab label="Execution step" />
           </Tabs>
         </Box>
diff --git a/packages/web/src/components/FlowStep/index.tsx b/packages/web/src/components/FlowStep/index.tsx
index 17c4bbb7..0910378a 100644
--- a/packages/web/src/components/FlowStep/index.tsx
+++ b/packages/web/src/components/FlowStep/index.tsx
@@ -182,7 +182,7 @@ export default function FlowStep(
     step.status === 'completed' ? validIcon : errorIcon;
 
   return (
-    <Wrapper elevation={collapsed ? 1 : 4} onClick={onOpen}>
+    <Wrapper elevation={collapsed ? 1 : 4} onClick={onOpen} data-test="flow-step">
       <Header collapsed={collapsed}>
         <Stack direction="row" alignItems="center" gap={2}>
           <AppIconWrapper>
diff --git a/packages/web/src/components/FlowSubstep/index.tsx b/packages/web/src/components/FlowSubstep/index.tsx
index a3d3ec90..b4d9b404 100644
--- a/packages/web/src/components/FlowSubstep/index.tsx
+++ b/packages/web/src/components/FlowSubstep/index.tsx
@@ -100,6 +100,7 @@ function FlowSubstep(props: FlowSubstepProps): React.ReactElement {
             sx={{ mt: 2 }}
             disabled={!validationStatus || editorContext.readOnly}
             type="submit"
+            data-test="flow-substep-continue-button"
           >
             Continue
           </Button>
diff --git a/packages/web/src/components/Layout/index.tsx b/packages/web/src/components/Layout/index.tsx
index a04271e5..b89beaef 100644
--- a/packages/web/src/components/Layout/index.tsx
+++ b/packages/web/src/components/Layout/index.tsx
@@ -22,16 +22,19 @@ const drawerLinks = [
     Icon: SwapCallsIcon,
     primary: 'drawer.flows',
     to: URLS.FLOWS,
+    dataTest: 'flows-page-drawer-link',
   },
   {
     Icon: AppsIcon,
     primary: 'drawer.apps',
     to: URLS.APPS,
+    dataTest: 'apps-page-drawer-link',
   },
   {
     Icon: HistoryIcon,
     primary: 'drawer.executions',
     to: URLS.EXECUTIONS,
+    dataTest: 'executions-page-drawer-link',
   },
 ];
 
diff --git a/packages/web/src/components/ListItemLink/index.tsx b/packages/web/src/components/ListItemLink/index.tsx
index 6f001c8e..5d4b7aca 100644
--- a/packages/web/src/components/ListItemLink/index.tsx
+++ b/packages/web/src/components/ListItemLink/index.tsx
@@ -10,10 +10,11 @@ type ListItemLinkProps = {
   primary: string;
   to: string;
   onClick?: (event: React.SyntheticEvent) => void;
+  'data-test'?: string;
 }
 
 export default function ListItemLink(props: ListItemLinkProps): React.ReactElement {
-  const { icon, primary, to, onClick } = props;
+  const { icon, primary, to, onClick, 'data-test': dataTest } = props;
   const selected = useMatch({ path: to, end: true });
 
   const CustomLink = React.useMemo(
@@ -34,6 +35,7 @@ export default function ListItemLink(props: ListItemLinkProps): React.ReactEleme
         sx={{ pl: { xs: 2, sm: 3 } }}
         selected={!!selected}
         onClick={onClick}
+        data-test={dataTest}
       >
         <ListItemIcon sx={{ minWidth: 52 }}>{icon}</ListItemIcon>
         <ListItemText primary={primary} primaryTypographyProps={{ variant: 'body1', }} />
diff --git a/packages/web/src/components/LoginForm/index.tsx b/packages/web/src/components/LoginForm/index.tsx
index 38e91923..e9c0004d 100644
--- a/packages/web/src/components/LoginForm/index.tsx
+++ b/packages/web/src/components/LoginForm/index.tsx
@@ -25,6 +25,7 @@ function renderFields(props: { loading: boolean }) {
           fullWidth
           margin="dense"
           autoComplete="username"
+          data-test="email-text-field"
         />
 
         <TextField
@@ -35,6 +36,7 @@ function renderFields(props: { loading: boolean }) {
           fullWidth
           margin="dense"
           autoComplete="current-password"
+          data-test="password-text-field"
         />
 
         <LoadingButton
@@ -44,6 +46,7 @@ function renderFields(props: { loading: boolean }) {
           sx={{ boxShadow: 2, mt: 3 }}
           loading={loading}
           fullWidth
+          data-test="login-button"
         >
           Login
         </LoadingButton>
diff --git a/packages/web/src/components/PowerInput/Suggestions.tsx b/packages/web/src/components/PowerInput/Suggestions.tsx
index 6c06d514..2425852d 100644
--- a/packages/web/src/components/PowerInput/Suggestions.tsx
+++ b/packages/web/src/components/PowerInput/Suggestions.tsx
@@ -71,6 +71,7 @@ const Suggestions = (props: SuggestionsProps) => {
                 component="div"
                 disablePadding
                 sx={{ maxHeight: LIST_HEIGHT, overflowY: 'auto' }}
+                data-test="power-input-suggestion-group"
               >
                 {getPartialArray((option.output as any) || [], listLength).map(
                   (suboption: any, index: number) => (
@@ -78,6 +79,8 @@ const Suggestions = (props: SuggestionsProps) => {
                       sx={{ pl: 4 }}
                       divider
                       onClick={() => onSuggestionClick(suboption)}
+                      data-test="power-input-suggestion-item"
+                      key={`suggestion-${suboption.name}`}
                     >
                       <ListItemText
                         primary={suboption.name}
diff --git a/packages/web/src/components/PowerInput/index.tsx b/packages/web/src/components/PowerInput/index.tsx
index c7c53c0a..b5905c83 100644
--- a/packages/web/src/components/PowerInput/index.tsx
+++ b/packages/web/src/components/PowerInput/index.tsx
@@ -93,7 +93,7 @@ const PowerInput = (props: PowerInputProps) => {
             onClickAway={() => { setShowVariableSuggestions(false); }}
           >
             {/* ref-able single child for ClickAwayListener */}
-            <div style={{ width: '100%' }}>
+            <div style={{ width: '100%' }} data-test="power-input">
               <FakeInput disabled={disabled}>
                 <InputLabelWrapper>
                   <InputLabel
diff --git a/packages/web/src/components/TestSubstep/index.tsx b/packages/web/src/components/TestSubstep/index.tsx
index 88beec63..d4d46920 100644
--- a/packages/web/src/components/TestSubstep/index.tsx
+++ b/packages/web/src/components/TestSubstep/index.tsx
@@ -106,7 +106,7 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement {
           )}
 
           {response && (
-            <Box sx={{ maxHeight: 400, overflowY: 'auto', width: '100%' }}>
+            <Box sx={{ maxHeight: 400, overflowY: 'auto', width: '100%' }} data-test="flow-test-substep-output">
               <JSONViewer data={response} />
             </Box>
           )}
@@ -119,6 +119,7 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement {
             loading={loading}
             disabled={editorContext.readOnly}
             color="primary"
+            data-test="flow-substep-continue-button"
           >
             {isCompleted && formatMessage('flowEditor.continue')}
             {!isCompleted && formatMessage('flowEditor.testAndContinue')}
diff --git a/packages/web/src/pages/Application/index.tsx b/packages/web/src/pages/Application/index.tsx
index 5b75c671..055d1afc 100644
--- a/packages/web/src/pages/Application/index.tsx
+++ b/packages/web/src/pages/Application/index.tsx
@@ -126,6 +126,7 @@ export default function Application(): React.ReactElement | null {
                       component={NewConnectionLink}
                       fullWidth
                       icon={<AddIcon />}
+                      data-test="add-connection-button"
                     >
                       {formatMessage('app.addConnection')}
                     </ConditionalIconButton>
diff --git a/packages/web/src/pages/Applications/index.tsx b/packages/web/src/pages/Applications/index.tsx
index 0450111c..8bd47d7d 100644
--- a/packages/web/src/pages/Applications/index.tsx
+++ b/packages/web/src/pages/Applications/index.tsx
@@ -69,6 +69,7 @@ export default function Applications(): React.ReactElement {
               component={NewAppConnectionLink}
               fullWidth
               icon={<AddIcon />}
+              data-test="add-connection-button"
             >
               {formatMessage('apps.addConnection')}
             </ConditionalIconButton>
@@ -77,7 +78,7 @@ export default function Applications(): React.ReactElement {
 
         <Divider sx={{ mt: [2, 0], mb: 2 }} />
 
-        {loading && <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />}
+        {loading && <CircularProgress data-test="apps-loader" sx={{ display: 'block', margin: '20px auto' }} />}
 
         {!loading && !hasApps && (<NoResultFound
           text={formatMessage('apps.noConnections')}
diff --git a/packages/web/src/pages/Executions/index.tsx b/packages/web/src/pages/Executions/index.tsx
index 1e5a5922..9e701763 100644
--- a/packages/web/src/pages/Executions/index.tsx
+++ b/packages/web/src/pages/Executions/index.tsx
@@ -54,7 +54,7 @@ export default function Executions(): React.ReactElement {
 
         <Divider sx={{ mt: [2, 0], mb: 2 }} />
 
-        {loading && <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />}
+        {loading && <CircularProgress data-test="executions-loader" sx={{ display: 'block', margin: '20px auto' }} />}
 
         {!loading && !hasExecutions && (<NoResultFound
           text={formatMessage('executions.noExecutions')}
diff --git a/packages/web/src/pages/Flows/index.tsx b/packages/web/src/pages/Flows/index.tsx
index 4df3825f..c44dffdc 100644
--- a/packages/web/src/pages/Flows/index.tsx
+++ b/packages/web/src/pages/Flows/index.tsx
@@ -110,6 +110,7 @@ export default function Flows(): React.ReactElement {
               component={CreateFlowLink}
               fullWidth
               icon={<AddIcon />}
+              data-test="create-flow-button"
             >
               {formatMessage('flows.create')}
             </ConditionalIconButton>