From db7172f60c6faa4325087a634e9fbbcbf36f2866 Mon Sep 17 00:00:00 2001
From: qkiroc <30946345+qkiroc@users.noreply.github.com>
Date: Thu, 9 Jan 2025 11:46:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20form=E5=A4=9A=E5=88=97=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E4=B8=8B=E5=AE=B9=E5=99=A8=E7=B1=BB=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=9B=BA=E5=AE=9A100%=20(#11468)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: form多列模式下容器类组件固定100%

* 更新快照

* 更新快照
---
 .../amis-ui/scss/components/form/_form.scss   | 82 +++----------------
 .../amis-ui/src/components/CollapseGroup.tsx  |  1 +
 packages/amis-ui/src/components/Tabs.tsx      |  1 +
 .../__snapshots__/disabled.test.tsx.snap      |  1 +
 .../__snapshots__/crud.test.tsx.snap          |  3 +
 .../__snapshots__/service.test.tsx.snap       |  2 +
 .../form/__snapshots__/form.test.tsx.snap     | 14 ++++
 .../form/__snapshots__/range.test.tsx.snap    |  1 +
 .../validateFormItem.test.tsx.snap            |  6 ++
 .../Form/__snapshots__/array.test.tsx.snap    |  1 +
 .../Form/__snapshots__/button.test.tsx.snap   |  2 +
 .../buttonGroupSelect.test.tsx.snap           |  7 ++
 .../__snapshots__/buttonToolBar.test.tsx.snap |  2 +
 .../__snapshots__/chainedSelect.test.tsx.snap |  1 +
 .../Form/__snapshots__/checkbox.test.tsx.snap |  3 +
 .../__snapshots__/checkboxes.test.tsx.snap    | 19 +++++
 .../Form/__snapshots__/combo.test.tsx.snap    |  9 ++
 .../conditionBuilder.test.tsx.snap            |  1 +
 .../__snapshots__/container.test.tsx.snap     |  2 +
 .../Form/__snapshots__/datetime.test.tsx.snap |  1 +
 .../Form/__snapshots__/fieldSet.test.tsx.snap |  5 ++
 .../Form/__snapshots__/formitem.test.tsx.snap |  3 +
 .../Form/__snapshots__/formula.test.tsx.snap  |  1 +
 .../Form/__snapshots__/grid.test.tsx.snap     |  2 +
 .../Form/__snapshots__/group.test.tsx.snap    |  1 +
 .../Form/__snapshots__/hbox.test.tsx.snap     |  1 +
 .../__snapshots__/iconPicker.test.tsx.snap    |  1 +
 .../Form/__snapshots__/index.test.tsx.snap    |  9 ++
 .../Form/__snapshots__/initData.test.tsx.snap |  1 +
 .../__snapshots__/inputArray.test.tsx.snap    |  5 ++
 .../__snapshots__/inputCity.test.tsx.snap     |  2 +
 .../__snapshots__/inputDate.test.tsx.snap     |  5 ++
 .../__snapshots__/inputFormula.test.tsx.snap  |  2 +
 .../__snapshots__/inputGroup.test.tsx.snap    |  1 +
 .../inputMonthRange.test.tsx.snap             |  1 +
 .../inputQuarterRange.test.tsx.snap           |  1 +
 .../__snapshots__/inputSubForm.test.tsx.snap  |  4 +
 .../__snapshots__/inputTable.test.tsx.snap    |  6 ++
 .../inputYearRange.test.tsx.snap              |  1 +
 .../Form/__snapshots__/list.test.tsx.snap     |  4 +
 .../__snapshots__/listSelect.test.tsx.snap    |  2 +
 .../Form/__snapshots__/number.test.tsx.snap   |  8 ++
 .../Form/__snapshots__/panel.test.tsx.snap    |  3 +
 .../Form/__snapshots__/radios.test.tsx.snap   |  3 +
 .../Form/__snapshots__/range.test.tsx.snap    |  7 ++
 .../Form/__snapshots__/rating.test.tsx.snap   |  6 ++
 .../Form/__snapshots__/repeat.test.tsx.snap   |  1 +
 .../Form/__snapshots__/select.test.tsx.snap   | 13 +++
 .../Form/__snapshots__/service.test.tsx.snap  |  1 +
 .../Form/__snapshots__/static.test.tsx.snap   |  2 +
 .../Form/__snapshots__/switch.test.tsx.snap   |  2 +
 .../Form/__snapshots__/tabs.test.tsx.snap     |  2 +
 .../__snapshots__/tabsTransfer.test.tsx.snap  |  4 +
 .../tabsTransferPicker.test.tsx.snap          |  3 +
 .../Form/__snapshots__/text.test.tsx.snap     | 24 ++++++
 .../Form/__snapshots__/textarea.test.tsx.snap |  4 +
 .../Form/__snapshots__/transfer.test.tsx.snap | 12 +++
 .../transferPicker.test.tsx.snap              |  1 +
 .../__snapshots__/usersSelect.test.tsx.snap   |  1 +
 .../__snapshots__/valueFormula.test.tsx.snap  |  1 +
 .../__snapshots__/AnchorNav.test.tsx.snap     |  8 ++
 .../__snapshots__/CRUD.test.tsx.snap          |  5 ++
 .../__snapshots__/Collapse.test.tsx.snap      |  4 +
 .../__snapshots__/Container.test.tsx.snap     |  1 +
 .../__snapshots__/Each.test.tsx.snap          |  1 +
 .../__snapshots__/Flex.test.tsx.snap          |  7 ++
 .../__snapshots__/Image.test.tsx.snap         |  1 +
 .../__snapshots__/List.test.tsx.snap          |  1 +
 .../__snapshots__/Page.test.tsx.snap          |  2 +
 .../__snapshots__/Picker.test.tsx.snap        |  1 +
 .../__snapshots__/PopOver.test.tsx.snap       |  2 +
 .../__snapshots__/Portlet.test.tsx.snap       |  1 +
 .../__snapshots__/Progress.test.tsx.snap      |  1 +
 .../__snapshots__/Tabs.test.tsx.snap          | 14 ++++
 .../__snapshots__/Tree.test.tsx.snap          |  2 +
 .../__snapshots__/Wizard.test.tsx.snap        |  1 +
 packages/amis/src/renderers/CRUD.tsx          |  1 +
 packages/amis/src/renderers/CRUD2.tsx         |  1 +
 packages/amis/src/renderers/Container.tsx     |  1 +
 packages/amis/src/renderers/Flex.tsx          |  1 +
 packages/amis/src/renderers/Grid.tsx          |  1 +
 packages/amis/src/renderers/Panel.tsx         |  1 +
 .../amis/src/renderers/SwitchContainer.tsx    |  1 +
 83 files changed, 302 insertions(+), 72 deletions(-)

diff --git a/packages/amis-ui/scss/components/form/_form.scss b/packages/amis-ui/scss/components/form/_form.scss
index 2dc8099d8e1..1e4c3b5ee85 100644
--- a/packages/amis-ui/scss/components/form/_form.scss
+++ b/packages/amis-ui/scss/components/form/_form.scss
@@ -531,80 +531,18 @@
   }
 }
 
-.#{$ns}Form--column-1 > .#{$ns}Form-item {
-  width: 100%;
-}
-
-.#{$ns}Form--column-2 > .#{$ns}Form-item {
-  width: 50%;
-}
-
-.#{$ns}Form--column-2 > .#{$ns}Form-item:nth-last-child(2) {
-  margin-bottom: 0;
-}
-
-.#{$ns}Form--column-3 > .#{$ns}Form-item {
-  width: 33%;
-}
-
-.#{$ns}Form--column-3 > .#{$ns}Form-item:nth-last-child(-n + 3) {
-  margin-bottom: 0;
-}
-
-.#{$ns}Form--column-4 > .#{$ns}Form-item {
-  width: 25%;
-}
-
-.#{$ns}Form--column-4 > .#{$ns}Form-item:nth-last-child(-n + 4) {
-  margin-bottom: 0;
-}
-
-.#{$ns}Form--column-5 > .#{$ns}Form-item {
-  width: 20%;
-}
-
-.#{$ns}Form--column-5 > .#{$ns}Form-item:nth-last-child(-n + 5) {
-  margin-bottom: 0;
-}
-
-.#{$ns}Form--column-6 > .#{$ns}Form-item {
-  width: 16.6%;
-}
-
-.#{$ns}Form--column-6 > .#{$ns}Form-item:nth-last-child(-n + 6) {
-  margin-bottom: 0;
-}
-
-.#{$ns}Form--column-7 > .#{$ns}Form-item {
-  width: 14.2%;
-}
-
-.#{$ns}Form--column-7 > .#{$ns}Form-item:nth-last-child(-n + 7) {
-  margin-bottom: 0;
-}
-
-.#{$ns}Form--column-8 > .#{$ns}Form-item {
-  width: 12.5%;
-}
-
-.#{$ns}Form--column-8 > .#{$ns}Form-item:nth-last-child(-n + 8) {
-  margin-bottom: 0;
-}
-
-.#{$ns}Form-column-9 > .#{$ns}Form-item {
-  width: 11.1%;
-}
-
-.#{$ns}Form--column-9 > .#{$ns}Form-item:nth-last-child(-n + 9) {
-  margin-bottom: 0;
-}
+@for $i from 1 through 10 {
+  .#{$ns}Form--column-#{$i} > .#{$ns}Form-item {
+    width: 100 / $i * 1%;
+  }
 
-.#{$ns}Form-column-10 > .#{$ns}Form-item {
-  width: 10%;
-}
+  .#{$ns}Form--column-#{$i} > [data-role*='container'] {
+    flex: 100%;
+  }
 
-.#{$ns}Form--column-10 > .#{$ns}Form-item:nth-last-child(-n + 10) {
-  margin-bottom: 0;
+  .#{$ns}Form--column-#{$i} > .#{$ns}Form-item:nth-last-child(-n + #{$i}) {
+    margin-bottom: 0;
+  }
 }
 
 /* 移动端样式调整 */
diff --git a/packages/amis-ui/src/components/CollapseGroup.tsx b/packages/amis-ui/src/components/CollapseGroup.tsx
index 6a8edd4be9d..df4e3b1d8d0 100644
--- a/packages/amis-ui/src/components/CollapseGroup.tsx
+++ b/packages/amis-ui/src/components/CollapseGroup.tsx
@@ -161,6 +161,7 @@ class CollapseGroup extends React.Component<
           className
         )}
         style={style}
+        data-role="container"
       >
         {this.getItems(children)}
       </div>
diff --git a/packages/amis-ui/src/components/Tabs.tsx b/packages/amis-ui/src/components/Tabs.tsx
index 9a983953972..ce56e77580b 100644
--- a/packages/amis-ui/src/components/Tabs.tsx
+++ b/packages/amis-ui/src/components/Tabs.tsx
@@ -898,6 +898,7 @@ export class Tabs extends React.Component<TabsProps, any> {
         )}
         style={style}
         {...testIdBuilder?.getTestId()}
+        data-role="container"
       >
         {!['vertical', 'sidebar', 'chrome'].includes(mode) ? (
           <div
diff --git a/packages/amis/__tests__/event-action/__snapshots__/disabled.test.tsx.snap b/packages/amis/__tests__/event-action/__snapshots__/disabled.test.tsx.snap
index a6248cb131a..c8a43552e2f 100644
--- a/packages/amis/__tests__/event-action/__snapshots__/disabled.test.tsx.snap
+++ b/packages/amis/__tests__/event-action/__snapshots__/disabled.test.tsx.snap
@@ -65,6 +65,7 @@ exports[`EventAction:disabled 1`] = `
           </button>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap
index 46e1473fd06..33deb9e61df 100644
--- a/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap
+++ b/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap
@@ -26,6 +26,7 @@ exports[`doAction:crud reload 1`] = `
           <div
             class="cxd-Crud"
             data-id="crud_reload"
+            data-role="container"
           >
             <div
               class="cxd-Table cxd-Crud-body"
@@ -1273,6 +1274,7 @@ exports[`doAction:crud reload with data1 1`] = `
           <div
             class="cxd-Crud is-loading"
             data-id="crud_reload"
+            data-role="container"
           >
             <div
               class="cxd-Table cxd-Crud-body"
@@ -1543,6 +1545,7 @@ exports[`doAction:crud reload with data2 1`] = `
           <div
             class="cxd-Crud is-loading"
             data-id="crud_reload"
+            data-role="container"
           >
             <div
               class="cxd-Table cxd-Crud-body"
diff --git a/packages/amis/__tests__/event-action/renderers/__snapshots__/service.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/__snapshots__/service.test.tsx.snap
index 0824414c981..5f2e75ed33a 100644
--- a/packages/amis/__tests__/event-action/renderers/__snapshots__/service.test.tsx.snap
+++ b/packages/amis/__tests__/event-action/renderers/__snapshots__/service.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`doAction:service reload 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -227,6 +228,7 @@ exports[`doAction:service reload 2`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/event-action/renderers/form/__snapshots__/form.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/form/__snapshots__/form.test.tsx.snap
index 8a3ebcc6d3a..19f59226dab 100644
--- a/packages/amis/__tests__/event-action/renderers/form/__snapshots__/form.test.tsx.snap
+++ b/packages/amis/__tests__/event-action/renderers/form/__snapshots__/form.test.tsx.snap
@@ -25,6 +25,7 @@ exports[`doAction:form clear 1`] = `
           </button>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -354,6 +355,7 @@ exports[`doAction:form force validate before submit 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -484,6 +486,7 @@ exports[`doAction:form force validate before submit 2`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -608,6 +611,7 @@ exports[`doAction:form reset 1`] = `
           </button>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -771,6 +775,7 @@ exports[`doAction:form reset 2`] = `
           </button>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -932,6 +937,7 @@ exports[`doAction:form setValue 1`] = `
           </button>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1090,6 +1096,7 @@ exports[`doAction:form static&nonstatic 1`] = `
           </button>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1204,6 +1211,7 @@ exports[`doAction:form static&nonstatic 2`] = `
           </button>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1369,6 +1377,7 @@ exports[`doAction:form submit 1`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1579,6 +1588,7 @@ exports[`doAction:form submit 2`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1798,6 +1808,7 @@ exports[`doAction:form submit 3`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -2005,6 +2016,7 @@ exports[`doAction:form validate 1`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -2226,6 +2238,7 @@ exports[`doAction:form validate 2`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -2442,6 +2455,7 @@ exports[`doAction:form validate 3`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/event-action/renderers/form/__snapshots__/range.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/form/__snapshots__/range.test.tsx.snap
index 50c81e888b8..fa65f4e7cd7 100644
--- a/packages/amis/__tests__/event-action/renderers/form/__snapshots__/range.test.tsx.snap
+++ b/packages/amis/__tests__/event-action/renderers/form/__snapshots__/range.test.tsx.snap
@@ -117,6 +117,7 @@ exports[`EventAction:inputRange 1`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/event-action/renderers/form/__snapshots__/validateFormItem.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/form/__snapshots__/validateFormItem.test.tsx.snap
index 7a5ffc3068b..264f83ac809 100644
--- a/packages/amis/__tests__/event-action/renderers/form/__snapshots__/validateFormItem.test.tsx.snap
+++ b/packages/amis/__tests__/event-action/renderers/form/__snapshots__/validateFormItem.test.tsx.snap
@@ -107,6 +107,7 @@ exports[`doAction:formItem validate 1`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -356,6 +357,7 @@ exports[`doAction:formItem validate 2`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -613,6 +615,7 @@ exports[`doAction:formItem validate 3`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -870,6 +873,7 @@ exports[`doAction:formItem validate 4`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1113,6 +1117,7 @@ exports[`doAction:formItem validate 5`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1356,6 +1361,7 @@ exports[`doAction:formItem validate 6`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/array.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/array.test.tsx.snap
index a3b7242592c..31a86683d9a 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/array.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/array.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:array 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/button.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/button.test.tsx.snap
index 4f692846a8e..d55615a6008 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/button.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/button.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:button 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -97,6 +98,7 @@ exports[`Renderer:button 2`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/buttonGroupSelect.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/buttonGroupSelect.test.tsx.snap
index 9b5beec9810..68888530080 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/buttonGroupSelect.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/buttonGroupSelect.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:button-group with btnActiveLevel 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -88,6 +89,7 @@ exports[`Renderer:button-group with tiled 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -164,6 +166,7 @@ exports[`Renderer:button-group with vertical 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -240,6 +243,7 @@ exports[`Renderer:button-group:multiple clearable 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -348,6 +352,7 @@ exports[`Renderer:button-group:multiple clearable 2`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -456,6 +461,7 @@ exports[`Renderer:button-group:multiple clearable 3`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -564,6 +570,7 @@ exports[`Renderer:button-group-select 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/buttonToolBar.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/buttonToolBar.test.tsx.snap
index e8631a4fc66..292eca2a800 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/buttonToolBar.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/buttonToolBar.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:button-toolbar 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -79,6 +80,7 @@ exports[`Renderer:button-toolbar 2`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/chainedSelect.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/chainedSelect.test.tsx.snap
index 6eba8965cdc..aab8bc19d5c 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/chainedSelect.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/chainedSelect.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:chained-select 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/checkbox.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/checkbox.test.tsx.snap
index 872a441120d..a80806e7f5b 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/checkbox.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/checkbox.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:checkbox 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -88,6 +89,7 @@ exports[`Renderer:checkbox with checked 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -173,6 +175,7 @@ exports[`Renderer:checkbox with optionType 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/checkboxes.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/checkboxes.test.tsx.snap
index eebdbcb66ca..94696a5948e 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/checkboxes.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/checkboxes.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:checkboxes 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -172,6 +173,7 @@ exports[`Renderer:checkboxes 2`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -336,6 +338,7 @@ exports[`Renderer:checkboxes with checkall: all selected 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -564,6 +567,7 @@ exports[`Renderer:checkboxes with checkall: default value 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -792,6 +796,7 @@ exports[`Renderer:checkboxes with checkall: no selected 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1020,6 +1025,7 @@ exports[`Renderer:checkboxes with columnsCount 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1192,6 +1198,7 @@ exports[`Renderer:checkboxes with columnsCount 2`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1368,6 +1375,7 @@ exports[`Renderer:checkboxes with columnsCount 3`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1615,6 +1623,7 @@ exports[`Renderer:checkboxes with creatable & createBtnLabel & addControls & add
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1794,6 +1803,7 @@ exports[`Renderer:checkboxes with creatable & createBtnLabel & addControls & add
   <div>
     <div
       class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+      data-role="container"
     >
       <div
         class="cxd-Panel-heading"
@@ -2128,6 +2138,7 @@ exports[`Renderer:checkboxes with defaultCheckAll & inline 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -2376,6 +2387,7 @@ exports[`Renderer:checkboxes with editable & editControls & editApi: dialog open
   <div>
     <div
       class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+      data-role="container"
     >
       <div
         class="cxd-Panel-heading"
@@ -2706,6 +2718,7 @@ exports[`Renderer:checkboxes with editable & editControls & editApi: edit succes
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -2890,6 +2903,7 @@ exports[`Renderer:checkboxes with editable & editControls & editApi: hover edit
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -3074,6 +3088,7 @@ exports[`Renderer:checkboxes with group 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -3294,6 +3309,7 @@ exports[`Renderer:checkboxes with menuTpl 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -3482,6 +3498,7 @@ exports[`Renderer:checkboxes with optionType & labelClassName & itemClassName 1`
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -3635,6 +3652,7 @@ exports[`Renderer:checkboxes with removable & deleteApi: dialog open 1`] = `
   <div>
     <div
       class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+      data-role="container"
     >
       <div
         class="cxd-Panel-heading"
@@ -3867,6 +3885,7 @@ exports[`Renderer:checkboxes with removable & deleteApi: hover edit 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/combo.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/combo.test.tsx.snap
index 172a0c91f80..a38b50d821d 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/combo.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/combo.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`Renderer:combo with addable & addattop & addBtn & addButtonText & addBu
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -538,6 +539,7 @@ exports[`Renderer:combo with canAccessSuperData & strictMode & syncFields 1`] =
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -816,6 +818,7 @@ exports[`Renderer:combo with conditions: add button open 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1099,6 +1102,7 @@ exports[`Renderer:combo with draggable 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1450,6 +1454,7 @@ exports[`Renderer:combo with items & multiLine 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1563,6 +1568,7 @@ exports[`Renderer:combo with minLength & maxLength: minLength error 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1696,6 +1702,7 @@ exports[`Renderer:combo with removable & deleteBtn & deleteApi & deleteConfirmTe
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -2094,6 +2101,7 @@ exports[`Renderer:combo with tabsMode 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -2147,6 +2155,7 @@ exports[`Renderer:combo with tabsMode 1`] = `
                     >
                       <div
                         class="cxd-Tabs cxd-ComboTabs"
+                        data-role="container"
                       >
                         <div
                           class="cxd-Tabs-linksContainer-wrapper"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/conditionBuilder.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/conditionBuilder.test.tsx.snap
index 2cff0602bd4..4580622ca6a 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/conditionBuilder.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/conditionBuilder.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`Renderer:condition-builder 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/container.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/container.test.tsx.snap
index 902b2036699..4ad7c1540e0 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/container.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/container.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:container 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -54,6 +55,7 @@ exports[`Renderer:container 1`] = `
           >
             <div
               class="cxd-Container"
+              data-role="container"
             >
               <div
                 class="cxd-Container-body bg-white"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/datetime.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/datetime.test.tsx.snap
index 17f0bce494d..f2d9b30d84f 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/datetime.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/datetime.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:datetime 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/fieldSet.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/fieldSet.test.tsx.snap
index 9d14e25ce91..3e000c1a34c 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/fieldSet.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/fieldSet.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:fieldSet 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -105,6 +106,7 @@ exports[`Renderer:fieldSet with mode 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -245,6 +247,7 @@ exports[`Renderer:fieldSet with mode 2`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -385,6 +388,7 @@ exports[`Renderer:fieldSet with mode 3`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -517,6 +521,7 @@ exports[`Renderer:fieldSet with titlePosition & collapseTitle & title 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/formitem.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/formitem.test.tsx.snap
index 3bbf23ad72f..24a97da0318 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/formitem.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/formitem.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:FormItem:validateApi:failed 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -105,6 +106,7 @@ exports[`Renderer:FormItem:validateApi:failed 2`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -206,6 +208,7 @@ exports[`Renderer:FormItem:validateApi:success 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/formula.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/formula.test.tsx.snap
index bd3413f4ab0..85643348109 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/formula.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/formula.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:formula 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/grid.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/grid.test.tsx.snap
index e1c55a0b0e2..83000e99b73 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/grid.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/grid.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:hbox 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -37,6 +38,7 @@ exports[`Renderer:hbox 1`] = `
         >
           <div
             class="cxd-Grid"
+            data-role="container"
           >
             <div
               class="cxd-Grid-col--md3 bg-white"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/group.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/group.test.tsx.snap
index 418e5cc6f5f..1efe9f98f55 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/group.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/group.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:group 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/hbox.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/hbox.test.tsx.snap
index 9fd6f2a3c40..7d7fd23e7c0 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/hbox.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/hbox.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:hbox 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/iconPicker.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/iconPicker.test.tsx.snap
index 8244066bd21..5f1f0f14e58 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/iconPicker.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/iconPicker.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:icon-picker 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/index.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/index.test.tsx.snap
index 3682513b253..32e0fcfbc78 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/index.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/index.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:Form 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -116,6 +117,7 @@ exports[`Renderer:Form initApi 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -252,6 +254,7 @@ exports[`Renderer:Form reset 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -385,6 +388,7 @@ exports[`Renderer:Form sendOn:true 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -510,6 +514,7 @@ exports[`Renderer:Form:onValidate 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -659,6 +664,7 @@ exports[`Renderer:Form:onValidate 3`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -791,6 +797,7 @@ exports[`Renderer:Form:remoteValidate 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -887,6 +894,7 @@ exports[`Renderer:Form:valdiate 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -988,6 +996,7 @@ exports[`Renderer:Form:valdiate 2`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/initData.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/initData.test.tsx.snap
index e42a4e3eac5..ce073599c31 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/initData.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/initData.test.tsx.snap
@@ -79,6 +79,7 @@ exports[`Form:initData:remote 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputArray.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputArray.test.tsx.snap
index 3edda6c11be..fce23ea82f0 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/inputArray.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/inputArray.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`Renderer:inputArray 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -201,6 +202,7 @@ exports[`Renderer:inputArray with draggable & draggableTip 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -555,6 +557,7 @@ exports[`Renderer:inputArray with minLength & maxLength 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -782,6 +785,7 @@ exports[`Renderer:inputArray with removable & addable & addButtonText: false 1`]
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -996,6 +1000,7 @@ exports[`Renderer:inputArray with removable & addable & addButtonText: false 2`]
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputCity.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputCity.test.tsx.snap
index d77fb114af7..788972f7ab3 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/inputCity.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/inputCity.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`Renderer:inputCity 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -213,6 +214,7 @@ exports[`Renderer:inputCity with searchable: open select 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputDate.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputDate.test.tsx.snap
index c83ac1e79eb..99f4b1a9031 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/inputDate.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/inputDate.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:inputDate 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -105,6 +106,7 @@ exports[`Renderer:inputDate compatible with format & inputFormat 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -341,6 +343,7 @@ exports[`Renderer:inputDate with clearable: clearable false 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -458,6 +461,7 @@ exports[`Renderer:inputDate with clearable: clearable true 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -607,6 +611,7 @@ exports[`Renderer:inputDate with valueFormat & displayFormat 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputFormula.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputFormula.test.tsx.snap
index a9de1e23c2f..1e413a7f65e 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/inputFormula.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/inputFormula.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`Renderer:input-formula button 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -252,6 +253,7 @@ exports[`Renderer:input-formula input-group 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputGroup.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputGroup.test.tsx.snap
index 300ee5a661e..8a3b0ee2d9c 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/inputGroup.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/inputGroup.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:InputGroup 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputMonthRange.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputMonthRange.test.tsx.snap
index 0d26aed1ec7..9c2f864147e 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/inputMonthRange.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/inputMonthRange.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:inputMonthRange with embed 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputQuarterRange.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputQuarterRange.test.tsx.snap
index 7188de419c5..7313456efed 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/inputQuarterRange.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/inputQuarterRange.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:InputQuarterRange with embed 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputSubForm.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputSubForm.test.tsx.snap
index 5ff03226d98..33969b960a7 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/inputSubForm.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/inputSubForm.test.tsx.snap
@@ -8,6 +8,7 @@ exports[`Renderer:InputSubForm base 1`] = `
   <div>
     <div
       class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+      data-role="container"
     >
       <div
         class="cxd-Panel-heading"
@@ -259,6 +260,7 @@ exports[`Renderer:InputSubForm with addButtonClassName & itemsClassName & itemCl
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -409,6 +411,7 @@ exports[`Renderer:InputSubForm with draggable & addable & removable 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -619,6 +622,7 @@ exports[`Renderer:InputSubForm with multiple & maxLength & btnLabel 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap
index 424bcae90e5..e71266ca663 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`Renderer:input table 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -229,6 +230,7 @@ exports[`Renderer:input table add 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -569,6 +571,7 @@ exports[`Renderer:input-table cell selects delete 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -806,6 +809,7 @@ exports[`Renderer:input-table init display 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1483,6 +1487,7 @@ exports[`Renderer:input-table verifty 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1555,6 +1560,7 @@ exports[`Renderer:input-table with combo column 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputYearRange.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputYearRange.test.tsx.snap
index 9aa45a21d5c..5e23291bc8e 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/inputYearRange.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/inputYearRange.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:inputYearRange with embed 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/list.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/list.test.tsx.snap
index 7e4bdc87fff..74d90fc638b 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/list.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/list.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:list 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -103,6 +104,7 @@ exports[`Renderer:list:multiple clearable 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -217,6 +219,7 @@ exports[`Renderer:list:multiple clearable 2`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -331,6 +334,7 @@ exports[`Renderer:list:multiple clearable 3`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/listSelect.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/listSelect.test.tsx.snap
index fdb1176b43a..f51a5887e80 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/listSelect.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/listSelect.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:listSelect with image option & listClassName 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -118,6 +119,7 @@ exports[`Renderer:listSelect with multiple & clearable 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/number.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/number.test.tsx.snap
index ad06a09c9bf..4a6096df562 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/number.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/number.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:number 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -109,6 +110,7 @@ exports[`Renderer:number with big value 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -232,6 +234,7 @@ exports[`Renderer:number with borderMode 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -352,6 +355,7 @@ exports[`Renderer:number with borderMode 2`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -472,6 +476,7 @@ exports[`Renderer:number with precision and default value 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -593,6 +598,7 @@ exports[`Renderer:number with prefix & suffix & kilobitSeparator 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -714,6 +720,7 @@ exports[`Renderer:number with step & precision & displayMode & keyboard 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -855,6 +862,7 @@ exports[`Renderer:number with unitOptions 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/panel.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/panel.test.tsx.snap
index 4eaffe68f01..05a824d1ce7 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/panel.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/panel.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:panel 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -47,6 +48,7 @@ exports[`Renderer:panel 1`] = `
               >
                 <div
                   class="cxd-Panel cxd-Panel--default"
+                  data-role="container"
                 >
                   <div
                     class="cxd-Panel-heading"
@@ -105,6 +107,7 @@ exports[`Renderer:panel 1`] = `
               >
                 <div
                   class="cxd-Panel cxd-Panel--default"
+                  data-role="container"
                 >
                   <div
                     class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/radios.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/radios.test.tsx.snap
index c217958c492..563bd2fd654 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/radios.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/radios.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:radios 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -172,6 +173,7 @@ exports[`Renderer:radios 2`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -336,6 +338,7 @@ exports[`Renderer:radios source & autoFill 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap
index 79d2009090f..48bd4a1589c 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`Renderer: range with min & max & step by variables 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -187,6 +188,7 @@ exports[`Renderer:range with marks 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -330,6 +332,7 @@ exports[`Renderer:range with min & max & step & joinValues 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -553,6 +556,7 @@ exports[`Renderer:range with multiple & clearable & delimiter 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -771,6 +775,7 @@ exports[`Renderer:range with showInput & showInputUnit 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -913,6 +918,7 @@ exports[`Renderer:range with showSteps 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1088,6 +1094,7 @@ exports[`Renderer:range with tooltipVisible & tooltipPlacement 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/rating.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/rating.test.tsx.snap
index 02e66d4cef0..04e13484a16 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/rating.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/rating.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:rating with allowClear 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -181,6 +182,7 @@ exports[`Renderer:rating with char & charClassName 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -288,6 +290,7 @@ exports[`Renderer:rating with colors & inactiveColor 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -483,6 +486,7 @@ exports[`Renderer:rating with count & half 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -613,6 +617,7 @@ exports[`Renderer:rating with readOnly 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -790,6 +795,7 @@ exports[`Renderer:rating with texts & textPosition & textClassName 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/repeat.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/repeat.test.tsx.snap
index ffebdf78b7c..afeca221a96 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/repeat.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/repeat.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:repeat 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/select.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/select.test.tsx.snap
index f44d5990723..e58647ff570 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/select.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/select.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`Renderer: chained select 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -136,6 +137,7 @@ exports[`Renderer:select associated 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -242,6 +244,7 @@ exports[`Renderer:select associated mode with virtual 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -595,6 +598,7 @@ exports[`Renderer:select chained 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -701,6 +705,7 @@ exports[`Renderer:select chained mode with virtual 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -946,6 +951,7 @@ exports[`Renderer:select group 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1052,6 +1058,7 @@ exports[`Renderer:select group mode with virtual 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1261,6 +1268,7 @@ exports[`Renderer:select menutpl 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1379,6 +1387,7 @@ exports[`Renderer:select table 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1485,6 +1494,7 @@ exports[`Renderer:select table mode with virtual 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1713,6 +1723,7 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -2127,6 +2138,7 @@ exports[`Renderer:select tree 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -2233,6 +2245,7 @@ exports[`Renderer:select virtual 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/service.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/service.test.tsx.snap
index 7d56ded8f8b..05fb9df6b5f 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/service.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/service.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:service 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/static.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/static.test.tsx.snap
index aa65877129a..f9cec3c52a7 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/static.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/static.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:static 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -173,6 +174,7 @@ exports[`Renderer:static2 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/switch.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/switch.test.tsx.snap
index d2733880366..ee221de4f06 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/switch.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/switch.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:Switch Switch basic props 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -87,6 +88,7 @@ exports[`Renderer:Switch Switch size 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/tabs.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/tabs.test.tsx.snap
index 88de788e06c..6081e35965c 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/tabs.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/tabs.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:tabs 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -33,6 +34,7 @@ exports[`Renderer:tabs 1`] = `
         />
         <div
           class="cxd-Tabs cxd-Tabs--line"
+          data-role="container"
         >
           <div
             class="cxd-Tabs-linksContainer-wrapper"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/tabsTransfer.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/tabsTransfer.test.tsx.snap
index ad3e29afc53..3b026d8b9ef 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/tabsTransfer.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/tabsTransfer.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`Renderer:tabsTransfer 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -73,6 +74,7 @@ exports[`Renderer:tabsTransfer 1`] = `
                       >
                         <div
                           class="cxd-Tabs cxd-Tabs--line cxd-TabsTransfer-tabs"
+                          data-role="container"
                         >
                           <div
                             class="cxd-Tabs-linksContainer-wrapper"
@@ -664,6 +666,7 @@ exports[`Renderer:tabsTransfer with deferApi 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -720,6 +723,7 @@ exports[`Renderer:tabsTransfer with deferApi 1`] = `
                       >
                         <div
                           class="cxd-Tabs cxd-Tabs--line cxd-TabsTransfer-tabs"
+                          data-role="container"
                         >
                           <div
                             class="cxd-Tabs-linksContainer-wrapper"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/tabsTransferPicker.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/tabsTransferPicker.test.tsx.snap
index f245f92d5a4..946016101f2 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/tabsTransferPicker.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/tabsTransferPicker.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`Renderer:TabsTransferPicker 1`] = `
           >
             <div
               class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+              data-role="container"
             >
               <div
                 class="cxd-Panel-heading"
@@ -159,6 +160,7 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
           >
             <div
               class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+              data-role="container"
             >
               <div
                 class="cxd-Panel-heading"
@@ -297,6 +299,7 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
           >
             <div
               class="cxd-Tabs cxd-Tabs--line cxd-TabsTransfer-tabs"
+              data-role="container"
             >
               <div
                 class="cxd-Tabs-linksContainer-wrapper"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/text.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/text.test.tsx.snap
index 4bd5c151c58..398c345effa 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/text.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/text.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:text 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -93,6 +94,7 @@ exports[`Renderer:text type is email: validate fail 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -189,6 +191,7 @@ exports[`Renderer:text type is email: validate success 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -278,6 +281,7 @@ exports[`Renderer:text type is password with revealPassword 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -367,6 +371,7 @@ exports[`Renderer:text type is password: password invisible 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -464,6 +469,7 @@ exports[`Renderer:text type is password: password visible 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -561,6 +567,7 @@ exports[`Renderer:text type is url: validate fail 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -657,6 +664,7 @@ exports[`Renderer:text type is url: validate success 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -746,6 +754,7 @@ exports[`Renderer:text with addOn 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -847,6 +856,7 @@ exports[`Renderer:text with clearable 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -944,6 +954,7 @@ exports[`Renderer:text with counter 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1038,6 +1049,7 @@ exports[`Renderer:text with counter 2`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1132,6 +1144,7 @@ exports[`Renderer:text with counter and maxLength 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1227,6 +1240,7 @@ exports[`Renderer:text with counter and maxLength 2`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1322,6 +1336,7 @@ exports[`Renderer:text with minLength 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1420,6 +1435,7 @@ exports[`Renderer:text with options 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1513,6 +1529,7 @@ exports[`Renderer:text with options and multiple Renderer:text with options and
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1681,6 +1698,7 @@ exports[`Renderer:text with options and multiple Renderer:text with options and
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1850,6 +1868,7 @@ exports[`Renderer:text with options and multiple Renderer:text with options and
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -2018,6 +2037,7 @@ exports[`Renderer:text with options and multiple Renderer:text with options and
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -2189,6 +2209,7 @@ exports[`Renderer:text with options and multiple Renderer:text with options and
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -2340,6 +2361,7 @@ exports[`Renderer:text with options: options is open 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -2466,6 +2488,7 @@ exports[`Renderer:text with options: select first option 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -2561,6 +2584,7 @@ exports[`Renderer:text with prefix and suffix 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/textarea.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/textarea.test.tsx.snap
index a4c050c6e62..baac594d88f 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/textarea.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/textarea.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:textarea 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -73,6 +74,7 @@ exports[`Renderer:textarea with maxLength & clearable & resetValue 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -187,6 +189,7 @@ exports[`Renderer:textarea with readOnly 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -273,6 +276,7 @@ exports[`Renderer:textarea with trimContents & showCounter 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/transfer.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/transfer.test.tsx.snap
index 65355fe7e08..1d648e1aa7d 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/transfer.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/transfer.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`Renderer:transfer 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -352,6 +353,7 @@ exports[`Renderer:transfer associated mode with virtual 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -850,6 +852,7 @@ exports[`Renderer:transfer chained 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1066,6 +1069,7 @@ exports[`Renderer:transfer chained mode with virtual 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -1490,6 +1494,7 @@ exports[`Renderer:transfer follow left mode 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -2168,6 +2173,7 @@ exports[`Renderer:transfer follow left mode 2`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -2867,6 +2873,7 @@ exports[`Renderer:transfer group mode with virtual 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -3199,6 +3206,7 @@ exports[`Renderer:transfer left tree 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -3699,6 +3707,7 @@ exports[`Renderer:transfer table 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -4106,6 +4115,7 @@ exports[`Renderer:transfer table mode with virtual: result not virtual 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -4977,6 +4987,7 @@ exports[`Renderer:transfer table mode with virtual: result virtual 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -5462,6 +5473,7 @@ exports[`Renderer:transfer tree 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/transferPicker.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/transferPicker.test.tsx.snap
index 6eb16ab5f09..83a6ccb1197 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/transferPicker.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/transferPicker.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`Renderer:transfer-picker 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/usersSelect.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/usersSelect.test.tsx.snap
index b2ae2c66363..67c2dec85cb 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/usersSelect.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/usersSelect.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:usersselect 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/valueFormula.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/valueFormula.test.tsx.snap
index 3a57266d334..f63ea4607ac 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/valueFormula.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/valueFormula.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:inputDate 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/AnchorNav.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/AnchorNav.test.tsx.snap
index 30ca763b50f..f5fd3ce2898 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/AnchorNav.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/AnchorNav.test.tsx.snap
@@ -59,6 +59,7 @@ exports[`Renderer:anchorNav 1`] = `
               >
                 <div
                   class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+                  data-role="container"
                 >
                   <div
                     class="cxd-Panel-heading"
@@ -184,6 +185,7 @@ exports[`Renderer:anchorNav 1`] = `
               >
                 <div
                   class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+                  data-role="container"
                 >
                   <div
                     class="cxd-Panel-heading"
@@ -309,6 +311,7 @@ exports[`Renderer:anchorNav 1`] = `
               >
                 <div
                   class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+                  data-role="container"
                 >
                   <div
                     class="cxd-Panel-heading"
@@ -649,6 +652,7 @@ exports[`Renderer:anchorNav with children 1`] = `
               >
                 <div
                   class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+                  data-role="container"
                 >
                   <div
                     class="cxd-Panel-heading"
@@ -774,6 +778,7 @@ exports[`Renderer:anchorNav with children 1`] = `
               >
                 <div
                   class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+                  data-role="container"
                 >
                   <div
                     class="cxd-Panel-heading"
@@ -899,6 +904,7 @@ exports[`Renderer:anchorNav with children 1`] = `
               >
                 <div
                   class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+                  data-role="container"
                 >
                   <div
                     class="cxd-Panel-heading"
@@ -1024,6 +1030,7 @@ exports[`Renderer:anchorNav with children 1`] = `
               >
                 <div
                   class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+                  data-role="container"
                 >
                   <div
                     class="cxd-Panel-heading"
@@ -1193,6 +1200,7 @@ exports[`Renderer:anchorNav with horizontal 1`] = `
               >
                 <div
                   class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+                  data-role="container"
                 >
                   <div
                     class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap
index 8a58e8b555b..744c0ec3d42 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`1. Renderer:crud basic interval headerToolbar footerToolbar 1`] = `
         >
           <div
             class="cxd-Crud"
+            data-role="container"
           >
             <div
               class="cxd-Table cxd-Crud-body"
@@ -833,6 +834,7 @@ exports[`4. Renderer:crud list 1`] = `
         >
           <div
             class="cxd-Crud"
+            data-role="container"
           >
             <div
               class="cxd-List cxd-Crud-body"
@@ -1248,6 +1250,7 @@ exports[`5. Renderer:crud cards 1`] = `
         >
           <div
             class="cxd-Crud"
+            data-role="container"
           >
             <div
               class="cxd-Cards cxd-Crud-body"
@@ -2147,6 +2150,7 @@ exports[`6. Renderer:crud source & alwaysShowPagination 1`] = `
         >
           <div
             class="cxd-Crud"
+            data-role="container"
           >
             <div
               class="cxd-Table cxd-Crud-body"
@@ -2664,6 +2668,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
         >
           <div
             class="cxd-Crud"
+            data-role="container"
           >
             <div
               class="cxd-Crud-selection"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Collapse.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Collapse.test.tsx.snap
index 9556435784d..d64f3352d74 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Collapse.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Collapse.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`1. Renderer:Collapse 1`] = `
 <div>
   <div
     class="cxd-CollapseGroup"
+    data-role="container"
   >
     <div
       class="cxd-Collapse is-active"
@@ -140,6 +141,7 @@ exports[`3. Renderer:Collapse with expandIcon & expandIconPosition & showArrow 1
 <div>
   <div
     class="cxd-CollapseGroup icon-position-right"
+    data-role="container"
   >
     <div
       class="cxd-Collapse is-active"
@@ -257,6 +259,7 @@ exports[`4. Renderer:Collapse with disabled & panel nesting 1`] = `
 <div>
   <div
     class="cxd-CollapseGroup"
+    data-role="container"
   >
     <div
       class="cxd-Collapse is-active"
@@ -291,6 +294,7 @@ exports[`4. Renderer:Collapse with disabled & panel nesting 1`] = `
           >
             <div
               class="cxd-CollapseGroup"
+              data-role="container"
             >
               <div
                 class="cxd-Collapse is-active"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Container.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Container.test.tsx.snap
index 4ea460c4aec..6c7230d1dfe 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Container.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Container.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`Renderer:container 1`] = `
         >
           <div
             class="cxd-Container bg-white"
+            data-role="container"
           >
             <div
               class="cxd-Container-body"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Each.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Each.test.tsx.snap
index abbe60c0a53..73b1ce9e713 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Each.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Each.test.tsx.snap
@@ -66,6 +66,7 @@ exports[`Renderer:Each in form 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Flex.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Flex.test.tsx.snap
index f2018e05ea9..93a2e8e4e43 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Flex.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Flex.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:flex 1`] = `
 <div>
   <div
     class="cxd-Flex"
+    data-role="container"
     style="display: flex; flex-direction: row; justify-content: center; align-items: stretch; align-content: center;"
   >
     <span
@@ -64,6 +65,7 @@ exports[`Renderer:flex justify 1`] = `
           </span>
           <div
             class="cxd-Flex"
+            data-role="container"
             style="display: flex; flex-direction: row; justify-content: center; align-items: stretch; align-content: center;"
           >
             <span
@@ -106,6 +108,7 @@ exports[`Renderer:flex justify 1`] = `
           </span>
           <div
             class="cxd-Flex"
+            data-role="container"
             style="display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; align-content: center;"
           >
             <span
@@ -148,6 +151,7 @@ exports[`Renderer:flex justify 1`] = `
           </span>
           <div
             class="cxd-Flex"
+            data-role="container"
             style="display: flex; flex-direction: row; justify-content: flex-end; align-items: stretch; align-content: center;"
           >
             <span
@@ -190,6 +194,7 @@ exports[`Renderer:flex justify 1`] = `
           </span>
           <div
             class="cxd-Flex"
+            data-role="container"
             style="display: flex; flex-direction: row; justify-content: space-around; align-items: stretch; align-content: center;"
           >
             <span
@@ -232,6 +237,7 @@ exports[`Renderer:flex justify 1`] = `
           </span>
           <div
             class="cxd-Flex"
+            data-role="container"
             style="display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; align-content: center;"
           >
             <span
@@ -274,6 +280,7 @@ exports[`Renderer:flex justify 1`] = `
           </span>
           <div
             class="cxd-Flex"
+            data-role="container"
             style="display: flex; flex-direction: row; justify-content: space-evenly; align-items: stretch; align-content: center;"
           >
             <span
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Image.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Image.test.tsx.snap
index a34b3f47db6..7b24c02dfbc 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Image.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Image.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:image image as form item 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/List.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/List.test.tsx.snap
index bdb95877037..ef5f6630b74 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/List.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/List.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`Renderer:list 1`] = `
           >
             <div
               class="cxd-Panel cxd-Panel--default"
+              data-role="container"
             >
               <div
                 class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap
index 137fdba548f..f97b535d589 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap
@@ -1538,6 +1538,7 @@ exports[`Renderer:Page initApi reload by Form submit 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1642,6 +1643,7 @@ exports[`Renderer:Page initApi reload by Form submit 2`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Picker.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Picker.test.tsx.snap
index 1a7a4ed50a7..c6d1d14ecad 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Picker.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Picker.test.tsx.snap
@@ -86,6 +86,7 @@ exports[`1. Renderer:Picker base 1`] = `
       >
         <div
           class="cxd-Crud"
+          data-role="container"
         >
           <div
             class="cxd-List cxd-Crud-body"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/PopOver.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/PopOver.test.tsx.snap
index 39e25608611..5ebb2c81f03 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/PopOver.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/PopOver.test.tsx.snap
@@ -92,6 +92,7 @@ exports[`Renderer:PopOver with offset: show popover no offset 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default"
+            data-role="container"
           >
             <div
               class="cxd-Panel-body"
@@ -159,6 +160,7 @@ exports[`Renderer:PopOver with offset: show popover with offset 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default"
+            data-role="container"
           >
             <div
               class="cxd-Panel-body"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Portlet.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Portlet.test.tsx.snap
index 13a3d00c895..c8f1cc8a4dc 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Portlet.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Portlet.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`Renderer:portlet 1`] = `
   >
     <div
       class="cxd-Tabs cxd-Tabs--line cxd-Portlet-tab"
+      data-role="container"
     >
       <div
         class="cxd-Tabs-linksContainer-wrapper cxd-Tabs-linksContainer-wrapper--toolbar"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Progress.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Progress.test.tsx.snap
index 6d4c9dc8bc9..a22e43d849b 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Progress.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Progress.test.tsx.snap
@@ -37,6 +37,7 @@ exports[`Renderer:Progress as form item 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Tabs.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Tabs.test.tsx.snap
index b11ee442b0f..1645064eec2 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Tabs.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Tabs.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:tabs as form item 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -33,6 +34,7 @@ exports[`Renderer:tabs as form item 1`] = `
         />
         <div
           class="cxd-Tabs cxd-Tabs--line"
+          data-role="container"
         >
           <div
             class="cxd-Tabs-linksContainer-wrapper"
@@ -130,6 +132,7 @@ exports[`Renderer:tabs change active tab 1`] = `
 <div>
   <div
     class="cxd-Tabs cxd-Tabs--line tabs-wrapper"
+    data-role="container"
   >
     <div
       class="cxd-Tabs-linksContainer-wrapper"
@@ -215,6 +218,7 @@ exports[`Renderer:tabs change active tab 2`] = `
 <div>
   <div
     class="cxd-Tabs cxd-Tabs--line tabs-wrapper"
+    data-role="container"
   >
     <div
       class="cxd-Tabs-linksContainer-wrapper"
@@ -376,6 +380,7 @@ exports[`Renderer:tabs tabsMode 1`] = `
 <div>
   <div
     class="cxd-Tabs cxd-Tabs--card"
+    data-role="container"
   >
     <div
       class="cxd-Tabs-linksContainer-wrapper"
@@ -445,6 +450,7 @@ exports[`Renderer:tabs tabsMode 2`] = `
 <div>
   <div
     class="cxd-Tabs cxd-Tabs--radio"
+    data-role="container"
   >
     <div
       class="cxd-Tabs-linksContainer-wrapper"
@@ -514,6 +520,7 @@ exports[`Renderer:tabs tabsMode 3`] = `
 <div>
   <div
     class="cxd-Tabs cxd-Tabs--vertical"
+    data-role="container"
   >
     <div
       class="cxd-Tabs-linksWrapper"
@@ -575,6 +582,7 @@ exports[`Renderer:tabs tabsMode 4`] = `
 <div>
   <div
     class="cxd-Tabs cxd-Tabs--chrome"
+    data-role="container"
   >
     <div
       class="cxd-Tabs-linksWrapper"
@@ -676,6 +684,7 @@ exports[`Renderer:tabs tabsMode 5`] = `
 <div>
   <div
     class="cxd-Tabs cxd-Tabs--simple"
+    data-role="container"
   >
     <div
       class="cxd-Tabs-linksContainer-wrapper"
@@ -745,6 +754,7 @@ exports[`Renderer:tabs tabsMode 6`] = `
 <div>
   <div
     class="cxd-Tabs cxd-Tabs--strong"
+    data-role="container"
   >
     <div
       class="cxd-Tabs-linksContainer-wrapper"
@@ -814,6 +824,7 @@ exports[`Renderer:tabs tabsMode 7`] = `
 <div>
   <div
     class="cxd-Tabs cxd-Tabs--tiled"
+    data-role="container"
   >
     <div
       class="cxd-Tabs-linksContainer-wrapper"
@@ -883,6 +894,7 @@ exports[`Renderer:tabs tabsMode 8`] = `
 <div>
   <div
     class="cxd-Tabs cxd-Tabs--sidebar sidebar--right"
+    data-role="container"
   >
     <div
       class="cxd-Tabs-linksWrapper"
@@ -944,6 +956,7 @@ exports[`Renderer:tabs toolbar 1`] = `
 <div>
   <div
     class="cxd-Tabs cxd-Tabs--line"
+    data-role="container"
   >
     <div
       class="cxd-Tabs-linksContainer-wrapper cxd-Tabs-linksContainer-wrapper--toolbar"
@@ -1025,6 +1038,7 @@ exports[`Renderer:tabs with collapseOnExceed: popover show 1`] = `
 <div>
   <div
     class="cxd-Tabs cxd-Tabs--tiled has-popover"
+    data-role="container"
   >
     <div
       class="cxd-Tabs-linksContainer-wrapper"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Tree.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Tree.test.tsx.snap
index d4c5e4c3f7a..350655c6206 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Tree.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Tree.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`Tree: basic & disabled children & default check children 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -352,6 +353,7 @@ exports[`Tree: showOutline 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Wizard.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Wizard.test.tsx.snap
index bd266cdfa4b..6cfab25b290 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Wizard.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Wizard.test.tsx.snap
@@ -2860,6 +2860,7 @@ exports[`Renderer:Wizard target 1`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
diff --git a/packages/amis/src/renderers/CRUD.tsx b/packages/amis/src/renderers/CRUD.tsx
index 341e27b0ee6..74e2c978ecd 100644
--- a/packages/amis/src/renderers/CRUD.tsx
+++ b/packages/amis/src/renderers/CRUD.tsx
@@ -3004,6 +3004,7 @@ export default class CRUD<T extends CRUDProps> extends React.Component<T, any> {
         })}
         style={style}
         data-id={id}
+        data-role="container"
         {...testIdBuilder?.getChild('wrapper').getTestId()}
       >
         {this.renderFilter()}
diff --git a/packages/amis/src/renderers/CRUD2.tsx b/packages/amis/src/renderers/CRUD2.tsx
index 6d2ed775e50..9ad42d9703c 100644
--- a/packages/amis/src/renderers/CRUD2.tsx
+++ b/packages/amis/src/renderers/CRUD2.tsx
@@ -1620,6 +1620,7 @@ export default class CRUD2 extends React.Component<CRUD2Props, any> {
         })}
         style={style}
         data-id={id}
+        data-role="container"
         {...testIdBuilder?.getTestId()}
       >
         <div
diff --git a/packages/amis/src/renderers/Container.tsx b/packages/amis/src/renderers/Container.tsx
index 66e4b132b38..da96148a246 100644
--- a/packages/amis/src/renderers/Container.tsx
+++ b/packages/amis/src/renderers/Container.tsx
@@ -236,6 +236,7 @@ export default class Container<T> extends React.Component<
         onMouseLeave={this.handleMouseLeave}
         style={buildStyle(style, data)}
         data-id={id}
+        data-role="container"
       >
         {this.renderBody()}
         <CustomStyle
diff --git a/packages/amis/src/renderers/Flex.tsx b/packages/amis/src/renderers/Flex.tsx
index 00eeecfd125..ba6d3121e49 100644
--- a/packages/amis/src/renderers/Flex.tsx
+++ b/packages/amis/src/renderers/Flex.tsx
@@ -151,6 +151,7 @@ export default class Flex extends React.Component<FlexProps, object> {
           })
         )}
         data-id={id}
+        data-role="container"
       >
         {(Array.isArray(items) ? items : items ? [items] : []).map(
           (item, key) =>
diff --git a/packages/amis/src/renderers/Grid.tsx b/packages/amis/src/renderers/Grid.tsx
index 4bea3377df7..71c7de26093 100644
--- a/packages/amis/src/renderers/Grid.tsx
+++ b/packages/amis/src/renderers/Grid.tsx
@@ -279,6 +279,7 @@ export default class Grid<T> extends React.Component<GridProps & T, object> {
         )}
         style={styleVar}
         data-id={id}
+        data-role="container"
       >
         {this.renderColumns(this.props.columns)}
         <Spinner loadingConfig={loadingConfig} overlay show={loading} />
diff --git a/packages/amis/src/renderers/Panel.tsx b/packages/amis/src/renderers/Panel.tsx
index d374c0e5af9..95cc5a21af1 100644
--- a/packages/amis/src/renderers/Panel.tsx
+++ b/packages/amis/src/renderers/Panel.tsx
@@ -289,6 +289,7 @@ export default class Panel<
     return (
       <div
         data-id={id}
+        data-role="container"
         className={cx(
           `Panel`,
           className || `Panel--default`,
diff --git a/packages/amis/src/renderers/SwitchContainer.tsx b/packages/amis/src/renderers/SwitchContainer.tsx
index 0203eee2b13..03590a304cd 100644
--- a/packages/amis/src/renderers/SwitchContainer.tsx
+++ b/packages/amis/src/renderers/SwitchContainer.tsx
@@ -168,6 +168,7 @@ export default class SwitchContainer extends React.Component<
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
         style={buildStyle(style, data)}
+        data-role="container"
       >
         {activeItem && this.renderBody(activeItem)}