diff --git a/src/pageEditor/modListingPanel/ModListingPanel.tsx b/src/pageEditor/modListingPanel/ModListingPanel.tsx
index c94171c764..7a5e7a0df9 100644
--- a/src/pageEditor/modListingPanel/ModListingPanel.tsx
+++ b/src/pageEditor/modListingPanel/ModListingPanel.tsx
@@ -67,7 +67,10 @@ const ModListingPanel: React.VFC = () => {
   };
 
   return (
-    <div className={cx(styles.root, "flex-shrink-0")}>
+    <div
+      className={cx(styles.root, "flex-shrink-0")}
+      data-testid="modListingPanel"
+    >
       {/* Expanded sidebar: Actions list (+ always visible Home button) */}
 
       <div className={styles.header}>
diff --git a/src/pageEditor/panes/EditorPane.tsx b/src/pageEditor/panes/EditorPane.tsx
index e9485e02a3..35f2fd6af3 100644
--- a/src/pageEditor/panes/EditorPane.tsx
+++ b/src/pageEditor/panes/EditorPane.tsx
@@ -101,6 +101,7 @@ const EditorPane: React.VFC = () => {
         validateOnMount={false}
         validateOnChange={false}
         validateOnBlur={false}
+        data-testid="editorPane"
       >
         {({ values }) => <EditorPaneContent modComponentFormState={values} />}
       </Formik>
diff --git a/src/pageEditor/panes/ModEditorPane.tsx b/src/pageEditor/panes/ModEditorPane.tsx
index d42e64c6c4..c325ba6b12 100644
--- a/src/pageEditor/panes/ModEditorPane.tsx
+++ b/src/pageEditor/panes/ModEditorPane.tsx
@@ -83,7 +83,7 @@ const ModEditorPane: React.VFC = () => {
   }
 
   return (
-    <div className={styles.root}>
+    <div className={styles.root} data-testid="modEditorPane">
       <EditorTabLayout key={layoutKey} tabs={tabItems} />
     </div>
   );
diff --git a/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap b/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap
index 92baea7069..133e565b24 100644
--- a/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap
+++ b/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap
@@ -90,6 +90,7 @@ exports[`renders a mod component with sub pipeline 1`] = `
         >
           <div
             class="nodePanel"
+            data-testid="brickActionsPanel"
           >
             <div
               class="nodeHeader"
@@ -567,6 +568,7 @@ exports[`renders a mod component with sub pipeline 1`] = `
           </div>
           <div
             class="configPanel"
+            data-testid="brickConfigurationPanel"
           >
             <div
               class="formGroup form-group"
@@ -1150,6 +1152,7 @@ exports[`renders a mod component with sub pipeline 1`] = `
           </div>
           <div
             class="collapseWrapper"
+            data-testid="dataPanel"
           >
             <button
               class="toggle active"
@@ -1491,6 +1494,7 @@ exports[`renders the first selected node 1`] = `
         >
           <div
             class="nodePanel"
+            data-testid="brickActionsPanel"
           >
             <div
               class="nodeHeader"
@@ -1821,6 +1825,7 @@ exports[`renders the first selected node 1`] = `
           </div>
           <div
             class="configPanel"
+            data-testid="brickConfigurationPanel"
           >
             <h6
               class="mb-3 d-flex justify-content-between flex-wrap gap-2"
@@ -2021,6 +2026,7 @@ exports[`renders the first selected node 1`] = `
           </div>
           <div
             class="collapseWrapper"
+            data-testid="dataPanel"
           >
             <button
               class="toggle active"
diff --git a/src/pageEditor/tabs/editTab/EditTab.tsx b/src/pageEditor/tabs/editTab/EditTab.tsx
index a6b9398f88..a484fe7f6e 100644
--- a/src/pageEditor/tabs/editTab/EditTab.tsx
+++ b/src/pageEditor/tabs/editTab/EditTab.tsx
@@ -76,7 +76,7 @@ const EditTab: React.FC<{
   return (
     <Tab.Pane eventKey={eventKey} className={styles.tabPane}>
       <div className={styles.paneContent}>
-        <div className={styles.nodePanel}>
+        <div className={styles.nodePanel} data-testid="brickActionsPanel">
           <div className={styles.nodeHeader}>
             <span
               className={cx(styles.nodeHeaderTitle, {
@@ -111,7 +111,10 @@ const EditTab: React.FC<{
             <EditorNodeLayout />
           </div>
         </div>
-        <div className={styles.configPanel}>
+        <div
+          className={styles.configPanel}
+          data-testid="brickConfigurationPanel"
+        >
           <ErrorBoundary
             key={
               // Pass in the activeNodeId as the render key for error boundary so
@@ -131,7 +134,7 @@ const EditTab: React.FC<{
             )}
           </ErrorBoundary>
         </div>
-        <div className={styles.collapseWrapper}>
+        <div className={styles.collapseWrapper} data-testid="dataPanel">
           <button
             className={cx(styles.toggle, {
               [styles.active ?? ""]: isDataPanelExpanded,