feat(testing): Integrated data-nc standard for dom attribute used for testing

packages/nc-gui/components/cell/MultiSelect.vue

@@ -155,7 +155,7 @@ watch(isOpen, (n, _o) => {
       v-for="op of options"
       :key="op.id"
       :value="op.title"
-      :pw-data="`select-option-${column.title}-${rowIndex}`"
+      :data-nc="`select-option-${column.title}-${rowIndex}`"
       @click.stop
     >
       <a-tag class="rounded-tag" :color="op.color">

packages/nc-gui/components/cell/SingleSelect.vue

@@ -86,7 +86,7 @@ watch(isOpen, (n, _o) => {
       v-for="op of options"
       :key="op.title"
       :value="op.title"
-      :pw-data="`select-option-${column.title}-${rowIndex}`"
+      :data-nc="`select-option-${column.title}-${rowIndex}`"
       @click.stop
     >
       <a-tag class="rounded-tag" :color="op.color">

packages/nc-gui/components/cell/attachment/index.vue

@@ -160,7 +160,7 @@ watch(
       v-if="!isReadonly"
       :class="{ 'mx-auto px-4': !visibleItems.length }"
       class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
-      pw-data="attachment-cell-file-picker-button"
+      data-nc="attachment-cell-file-picker-button"
       @click.stop="open"
     >
       <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />

packages/nc-gui/components/dashboard/TreeView.vue

@@ -321,13 +321,13 @@ function openTableCreateDialog() {
                 class="nc-tree-item text-sm cursor-pointer group"
                 :data-order="table.order"
                 :data-id="table.id"
-                :pw-data="`tree-view-table-${table.title}`"
+                :data-nc="`tree-view-table-${table.title}`"
                 @click="addTableTab(table)"
               >
                 <GeneralTooltip class="pl-5 pr-3 py-2" modifier-key="Alt">
                   <template #title>{{ table.table_name }}</template>
                   <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
-                    <div class="flex w-auto" :pw-data="`tree-view-table-draggable-handle-${table.title}`">
+                    <div class="flex w-auto" :data-nc="`tree-view-table-draggable-handle-${table.title}`">
                       <MdiDragVertical
                         v-if="isUIAllowed('treeview-drag-n-drop')"
                         :class="`nc-child-draggable-icon-${table.title}`"
@@ -356,14 +356,14 @@ function openTableCreateDialog() {
                       <template #overlay>
                         <a-menu class="!py-0 rounded text-sm">
                           <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table)">
-                            <div class="nc-project-menu-item" :pw-data="`sidebar-table-rename-${table.title}`">
+                            <div class="nc-project-menu-item" :data-nc="`sidebar-table-rename-${table.title}`">
                               {{ $t('general.rename') }}
                             </div>
                           </a-menu-item>
 
                           <a-menu-item
                             v-if="isUIAllowed('table-delete')"
-                            :pw-data="`sidebar-table-delete-${table.title}`"
+                            :data-nc="`sidebar-table-delete-${table.title}`"
                             @click="deleteTable(table)"
                           >
                             <div class="nc-project-menu-item">

packages/nc-gui/components/dashboard/settings/AuditTab.vue

@@ -112,7 +112,7 @@ const columns = [
       :columns="columns"
       :pagination="false"
       :loading="isLoading"
-      data-pw="audit-tab-table"
+      data-nc="audit-tab-table"
     >
       <template #emptyText>
         <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />

packages/nc-gui/components/dashboard/settings/Modal.vue

@@ -178,7 +178,7 @@ watch(
       <a-button
         type="text"
         class="!rounded-md border-none -mt-1.5 -mr-1"
-        pw-data="settings-modal-close-button"
+        data-nc="settings-modal-close-button"
         @click="vModel = false"
       >
         <template #icon>
@@ -220,7 +220,7 @@ watch(
           </a-menu-item>
         </a-menu>
 
-        <component :is="selectedSubTab?.body" class="px-2 py-6" :pw-data="`nc-settings-subtab-${selectedSubTab.title}`" />
+        <component :is="selectedSubTab?.body" class="px-2 py-6" :data-nc="`nc-settings-subtab-${selectedSubTab.title}`" />
       </a-layout-content>
     </a-layout>
   </a-modal>

packages/nc-gui/components/dlg/TableCreate.vue

@@ -105,7 +105,7 @@ onMounted(() => {
             v-model:value="table.title"
             size="large"
             hide-details
-            data-pw="create-table-title-input"
+            data-nc="create-table-title-input"
             :placeholder="$t('msg.info.enterTableName')"
           />
         </a-form-item>

packages/nc-gui/components/general/TruncateText.vue

@@ -38,7 +38,7 @@ const shortName = computed(() =>
     </template>
     <div class="w-full">{{ shortName }}</div>
   </a-tooltip>
-  <div v-else class="w-full" nc-data="truncate-label">
+  <div v-else class="w-full" data-nc="truncate-label">
     <slot />
   </div>
   <div ref="text" class="hidden">

packages/nc-gui/components/smartsheet/Form.vue

@@ -388,7 +388,7 @@ watch(view, (nextView) => {
 </script>
 
 <template>
-  <a-row v-if="submitted" class="h-full" data-pw="nc-form-wrapper-submit">
+  <a-row v-if="submitted" class="h-full" data-nc="nc-form-wrapper-submit">
     <a-col :span="24">
       <div v-if="formViewData" class="items-center justify-center text-center mt-2">
         <a-alert type="success">
@@ -408,7 +408,7 @@ watch(view, (nextView) => {
     </a-col>
   </a-row>
 
-  <a-row v-else class="h-full flex" data-pw="nc-form-wrapper">
+  <a-row v-else class="h-full flex" data-nc="nc-form-wrapper">
     <a-col v-if="isEditable" :span="8" class="shadow p-2 md:p-4 h-full overflow-auto scrollbar-thin-dull nc-form-left-drawer">
       <div class="flex flex-wrap gap-2">
         <div class="flex-1 text-lg">
@@ -420,7 +420,7 @@ watch(view, (nextView) => {
             v-if="hiddenColumns.length"
             type="button"
             class="nc-form-add-all color-transition bg-white transform hover:(text-primary ring ring-accent ring-opacity-100) active:translate-y-[1px] px-2 py-1 shadow-md rounded"
-            data-pw="nc-form-add-all"
+            data-nc="nc-form-add-all"
             @click="addAllColumns"
           >
             <!-- Add all -->
@@ -431,7 +431,7 @@ watch(view, (nextView) => {
             v-if="localColumns.length"
             type="button"
             class="nc-form-remove-all color-transition bg-white transform hover:(text-primary ring ring-accent ring-opacity-100) active:translate-y-[1px] px-2 py-1 shadow-md rounded"
-            data-pw="nc-form-remove-all"
+            data-nc="nc-form-remove-all"
             @click="removeAllColumns"
           >
             <!-- Remove all -->
@@ -453,7 +453,7 @@ watch(view, (nextView) => {
           <a-card
             size="small"
             class="!border-0 color-transition cursor-pointer item hover:(bg-primary ring-1 ring-accent ring-opacity-100) bg-opacity-10 !rounded !shadow-lg"
-            :data-pw="`nc-form-hidden-column-${element.label || element.title}`"
+            :data-nc="`nc-form-hidden-column-${element.label || element.title}`"
             @mousedown="moved = false"
             @mousemove="moved = false"
             @mouseup="handleMouseUp(element, index)"
@@ -481,7 +481,7 @@ watch(view, (nextView) => {
         <template #footer>
           <div
             class="my-4 select-none border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center nc-drag-n-drop-to-hide"
-            data-pw="nc-drag-n-drop-to-hide"
+            data-nc="nc-drag-n-drop-to-hide"
           >
             <!-- Drag and drop fields here to hide -->
             {{ $t('msg.info.dragDropHide') }}
@@ -539,7 +539,7 @@ watch(view, (nextView) => {
                   hide-details
                   placeholder="Form Title"
                   :bordered="false"
-                  data-pw="nc-form-heading"
+                  data-nc="nc-form-heading"
                   @blur="updateView"
                   @keydown.enter="updateView"
                 />
@@ -559,7 +559,7 @@ watch(view, (nextView) => {
                   :placeholder="$t('msg.info.formDesc')"
                   :bordered="false"
                   :disabled="!isEditable"
-                  data-pw="nc-form-sub-heading"
+                  data-nc="nc-form-sub-heading"
                   @blur="updateView"
                   @click="updateView"
                 />
@@ -589,7 +589,7 @@ watch(view, (nextView) => {
                       'bg-primary bg-opacity-5 ring-0.5 ring-accent ring-opacity-100': activeRow === element.title,
                     },
                   ]"
-                  data-pw="nc-form-fields"
+                  data-nc="nc-form-fields"
                   @click="activeRow = element.title"
                 >
                   <div
@@ -598,7 +598,7 @@ watch(view, (nextView) => {
                   >
                     <MdiEyeOffOutline
                       class="opacity-0 nc-field-remove-icon"
-                      data-pw="nc-field-remove-icon"
+                      data-nc="nc-field-remove-icon"
                       @click.stop="hideColumn(index)"
                     />
                   </div>
@@ -607,7 +607,7 @@ watch(view, (nextView) => {
                     <div class="flex gap-2 items-center">
                       <span
                         class="text-gray-500 mr-2 nc-form-input-required"
-                        data-pw="nc-form-input-required"
+                        data-nc="nc-form-input-required"
                         @click="
                           () => {
                             element.required = !element.required
@@ -631,7 +631,7 @@ watch(view, (nextView) => {
                         v-model:value="element.label"
                         type="text"
                         class="form-meta-input nc-form-input-label"
-                        data-pw="nc-form-input-label"
+                        data-nc="nc-form-input-label"
                         :placeholder="$t('msg.info.formInput')"
                         @change="updateColMeta(element)"
                       >
@@ -643,7 +643,7 @@ watch(view, (nextView) => {
                         v-model:value="element.description"
                         type="text"
                         class="form-meta-input text-sm nc-form-input-help-text"
-                        data-pw="nc-form-input-help-text"
+                        data-nc="nc-form-input-help-text"
                         :placeholder="$t('msg.info.formHelpText')"
                         @change="updateColMeta(element)"
                       />
@@ -656,7 +656,7 @@ watch(view, (nextView) => {
                       :column="{ ...element, title: element.label || element.title }"
                       :required="isRequired(element, element.required)"
                       :hide-menu="true"
-                      data-pw="nc-form-input-label"
+                      data-nc="nc-form-input-label"
                     />
 
                     <LazySmartsheetHeaderCell
@@ -664,7 +664,7 @@ watch(view, (nextView) => {
                       :column="{ ...element, title: element.label || element.title }"
                       :required="isRequired(element, element.required)"
                       :hide-menu="true"
-                      data-pw="nc-form-input-label"
+                      data-nc="nc-form-input-label"
                     />
                   </div>
 
@@ -679,7 +679,7 @@ watch(view, (nextView) => {
                       :row="row"
                       class="nc-input"
                       :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                      :data-pw="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                      :data-nc="`nc-form-input-${element.title.replaceAll(' ', '')}`"
                       :column="element"
                       @click.stop.prevent
                     />
@@ -695,14 +695,14 @@ watch(view, (nextView) => {
                       v-model="formState[element.title]"
                       class="nc-input"
                       :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                      :data-pw="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                      :data-nc="`nc-form-input-${element.title.replaceAll(' ', '')}`"
                       :column="element"
                       :edit-enabled="true"
                       @click.stop.prevent
                     />
                   </a-form-item>
 
-                  <div class="text-gray-500 text-xs" pw-data="nc-form-input-help-text-label">{{ element.description }}</div>
+                  <div class="text-gray-500 text-xs" data-nc="nc-form-input-help-text-label">{{ element.description }}</div>
                 </div>
               </template>
 
@@ -717,7 +717,7 @@ watch(view, (nextView) => {
             </Draggable>
 
             <div class="justify-center flex mt-6">
-              <button type="submit" class="uppercase scaling-btn nc-form-submit" data-pw="nc-form-submit" @click="submitForm">
+              <button type="submit" class="uppercase scaling-btn nc-form-submit" data-nc="nc-form-submit" @click="submitForm">
                 {{ $t('general.submit') }}
               </button>
             </div>
@@ -739,7 +739,7 @@ watch(view, (nextView) => {
             :rows="3"
             hide-details
             class="nc-form-after-submit-msg"
-            data-pw="nc-form-after-submit-msg"
+            data-nc="nc-form-after-submit-msg"
             @change="updateView"
           />
 
@@ -752,7 +752,7 @@ watch(view, (nextView) => {
                 v-e="[`a:form-view:submit-another-form`]"
                 size="small"
                 class="nc-form-checkbox-submit-another-form"
-                data-pw="nc-form-checkbox-submit-another-form"
+                data-nc="nc-form-checkbox-submit-another-form"
                 @change="updateView"
               />
               <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
@@ -765,7 +765,7 @@ watch(view, (nextView) => {
                 v-e="[`a:form-view:show-blank-form`]"
                 size="small"
                 class="nc-form-checkbox-show-blank-form"
-                data-pw="nc-form-checkbox-show-blank-form"
+                data-nc="nc-form-checkbox-show-blank-form"
                 @change="updateView"
               />
 
@@ -778,7 +778,7 @@ watch(view, (nextView) => {
                 v-e="[`a:form-view:email-me`]"
                 size="small"
                 class="nc-form-checkbox-send-email"
-                data-pw="nc-form-checkbox-send-email"
+                data-nc="nc-form-checkbox-send-email"
                 @change="onEmailChange"
               />
 

packages/nc-gui/components/smartsheet/Gallery.vue

@@ -163,14 +163,14 @@ watch(view, async (nextView) => {
 </script>
 
 <template>
-  <div class="flex flex-col h-full w-full overflow-auto nc-gallery" data-pw="nc-gallery-wrapper">
+  <div class="flex flex-col h-full w-full overflow-auto nc-gallery" data-nc="nc-gallery-wrapper">
     <div class="nc-gallery-container grid gap-2 my-4 px-3">
       <div v-for="record in data" :key="`record-${record.row.id}`">
         <LazySmartsheetRow :row="record">
           <a-card
             hoverable
             class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
-            :data-pw="`nc-gallery-card-${record.row.id}`"
+            :data-nc="`nc-gallery-card-${record.row.id}`"
             @click="expandFormClick($event, record)"
           >
             <template v-if="galleryData?.fk_cover_image_col_id" #cover>

packages/nc-gui/components/smartsheet/Grid.vue

@@ -460,8 +460,8 @@ watch(
 </script>
 
 <template>
-  <div class="relative flex flex-col h-full min-h-0 w-full" pw-data="nc-grid-wrapper">
+  <div class="relative flex flex-col h-full min-h-0 w-full" data-nc="nc-grid-wrapper">
-    <general-overlay :model-value="isLoading" inline transition class="!bg-opacity-15" pw-data="grid-load-spinner">
+    <general-overlay :model-value="isLoading" inline transition class="!bg-opacity-15" data-nc="grid-load-spinner">
       <div class="flex items-center justify-center h-full w-full !bg-white !bg-opacity-85 z-1000">
         <a-spin size="large" />
       </div>
@@ -480,8 +480,8 @@ watch(
         >
           <thead ref="tableHead">
             <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
-              <th pw-data="grid-id-column">
+              <th data-nc="grid-id-column">
-                <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center" pw-data="nc-check-all">
+                <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center" data-nc="nc-check-all">
                   <template v-if="!readOnly">
                     <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
                     <div
@@ -546,13 +546,8 @@ watch(
           <tbody ref="tbodyEl" @selectstart.prevent>
             <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
               <template #default="{ state }">
-                <tr class="nc-grid-row" :data-pw="`grid-row-${rowIndex}`">
+                <tr class="nc-grid-row" :data-nc="`grid-row-${rowIndex}`">
-                  <td
+                  <td key="row-index" class="caption nc-grid-cell pl-5 pr-1" :data-nc="`cell-Id-${rowIndex}`">
-                    key="row-index"
-                    class="caption nc-grid-cell pl-5 pr-1"
-                    :data-pw="`cell-Id-${rowIndex}`"
-                    :pw-data="`cell-Id-${rowIndex}`"
-                  >
                     <div class="items-center flex gap-1 min-w-[55px]">
                       <div
                         v-if="!readOnly || !isLocked"
@@ -573,7 +568,7 @@ watch(
                       <div
                         v-if="!readOnly || hasRole('commenter', true) || hasRole('viewer', true)"
                         class="nc-expand"
-                        :pw-data="`nc-expand-${rowIndex}`"
+                        :data-nc="`nc-expand-${rowIndex}`"
                         :class="{ 'nc-comment': row.rowMeta?.commentCount }"
                       >
                         <a-spin v-if="row.rowMeta.saving" class="!flex items-center" :pw="`row-save-spinner-${rowIndex}`" />
@@ -610,8 +605,7 @@ watch(
                         (hasEditPermission && selectedRange(rowIndex, colIndex)),
                       'nc-required-cell': isColumnRequiredAndNull(columnObj, row.row),
                     }"
-                    :data-pw="`cell-${columnObj.title}-${rowIndex}`"
+                    :data-nc="`cell-${columnObj.title}-${rowIndex}`"
-                    :pw-data="`cell-${columnObj.title}-${rowIndex}`"
                     :data-key="rowIndex + columnObj.id"
                     :data-col="columnObj.id"
                     :data-title="columnObj.title"

packages/nc-gui/components/smartsheet/Kanban.vue

@@ -309,7 +309,7 @@ watch(view, async (nextView) => {
 </script>
 
 <template>
-  <div class="flex h-full bg-white px-2" data-pw="nc-kanban-wrapper">
+  <div class="flex h-full bg-white px-2" data-nc="nc-kanban-wrapper">
     <div ref="kanbanContainerRef" class="nc-kanban-container flex my-4 px-3 overflow-x-scroll overflow-y-hidden">
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']" overlay-class-name="nc-dropdown-kanban-context-menu">
         <!-- Draggable Stack -->

packages/nc-gui/components/smartsheet/Pagination.vue

@@ -19,7 +19,7 @@ const page = computed({
 
 <template>
   <div class="flex items-center mb-1">
-    <span v-if="count !== null && count !== Infinity" class="caption ml-5 text-gray-500" pw-data="grid-pagination">
+    <span v-if="count !== null && count !== Infinity" class="caption ml-5 text-gray-500" data-nc="grid-pagination">
       {{ count }} {{ count !== 1 ? $t('objects.records') : $t('objects.record') }}
     </span>
 

packages/nc-gui/components/smartsheet/column/EditOrAdd.vue

@@ -124,7 +124,7 @@ onMounted(() => {
     :class="{ '!w-[600px]': formState.uidt === UITypes.Formula }"
     @click.stop
   >
-    <a-form v-model="formState" no-style name="column-create-or-edit" layout="vertical" data-pw="add-or-edit-column">
+    <a-form v-model="formState" no-style name="column-create-or-edit" layout="vertical" data-nc="add-or-edit-column">
       <div class="flex flex-col gap-2">
         <a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.title">
           <a-input

packages/nc-gui/components/smartsheet/column/SelectOptions.vue

@@ -137,7 +137,7 @@ watch(inputs, () => {
               v-if="!isKanban"
               small
               class="nc-child-draggable-icon handle"
-              :data-pw="`select-option-column-handle-icon-${element.title}`"
+              :data-nc="`select-option-column-handle-icon-${element.title}`"
             />
             <a-dropdown
               v-model:visible="colorMenus[index]"
@@ -162,14 +162,14 @@ watch(inputs, () => {
               ref="inputs"
               v-model:value="element.title"
               class="caption"
-              :data-pw="`select-column-option-input-${index}`"
+              :data-nc="`select-column-option-input-${index}`"
               @change="optionChanged(element.id)"
             />
 
             <MdiClose
               class="ml-2 hover:!text-black"
               :style="{ color: 'red' }"
-              :data-pw="`select-column-option-remove-${index}`"
+              :data-nc="`select-column-option-remove-${index}`"
               @click="removeOption(index)"
             />
           </div>

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -150,7 +150,7 @@ export default {
               :key="col.title"
               class="mt-2 py-2"
               :class="`nc-expand-col-${col.title}`"
-              :pw-data="`nc-expand-col-${col.title}`"
+              :data-nc="`nc-expand-col-${col.title}`"
             >
               <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
 

packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue

@@ -167,12 +167,12 @@ function onStopEdit() {
 <template>
   <a-menu-item
     class="select-none group !flex !items-center !my-0 hover:(bg-primary !bg-opacity-5)"
-    :pw-data="`view-sidebar-view-${vModel.alias || vModel.title}`"
+    :data-nc="`view-sidebar-view-${vModel.alias || vModel.title}`"
     @dblclick.stop="onDblClick"
     @click.stop="onClick"
   >
-    <div v-e="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-2" nc-data="view-item">
+    <div v-e="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-2" data-nc="view-item">
-      <div class="flex w-auto" :pw-data="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`">
+      <div class="flex w-auto" :data-nc="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`">
         <MdiDrag
           class="nc-drag-icon hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 !cursor-move"
           @click.stop.prevent
@@ -194,7 +194,7 @@ function onStopEdit() {
       <div class="flex-1" />
 
       <template v-if="!isEditing && !isLocked && isUIAllowed('virtualViewsCreateOrEdit')">
-        <div class="flex items-center gap-1" :pw-data="`view-sidebar-view-actions-${vModel.alias || vModel.title}`">
+        <div class="flex items-center gap-1" :data-nc="`view-sidebar-view-actions-${vModel.alias || vModel.title}`">
           <a-tooltip placement="left">
             <template #title>
               {{ $t('activity.copyView') }}

packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue

@@ -82,7 +82,7 @@ const filterAutoSaveLoc = computed({
         ref="filterComp"
         class="nc-table-toolbar-menu shadow-lg"
         :auto-save="filterAutoSave"
-        pw-data="nc-filter-menu"
+        data-nc="nc-filter-menu"
         @update:filters-length="filtersLength = $event"
       >
         <div v-if="!isPublic" class="flex items-end mt-2 min-h-[30px]" @click.stop>

packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue

@@ -139,7 +139,7 @@ const getIcon = (c: ColumnType) =>
     <template #overlay>
       <div
         class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border"
-        pw-data="nc-fields-menu"
+        data-nc="nc-fields-menu"
         @click.stop
       >
         <a-card
@@ -167,7 +167,7 @@ const getIcon = (c: ColumnType) =>
                 v-show="filteredFieldList.includes(field)"
                 :key="field.id"
                 class="px-2 py-1 flex items-center"
-                :pw-data="`nc-fields-menu-${field.title}`"
+                :data-nc="`nc-fields-menu-${field.title}`"
                 @click.stop
               >
                 <a-checkbox

packages/nc-gui/components/smartsheet/toolbar/ShareView.vue

@@ -213,7 +213,7 @@ watch(passwordProtected, (value) => {
     >
       <div
         data-cy="nc-modal-share-view__link"
-        data-pw="nc-modal-share-view__link"
+        data-nc="nc-modal-share-view__link"
         class="share-link-box !bg-primary !bg-opacity-5 ring-1 ring-accent ring-opacity-100"
       >
         <div class="flex-1 h-min text-xs">{{ sharedViewUrl }}</div>
@@ -236,7 +236,7 @@ watch(passwordProtected, (value) => {
               v-if="shared.type === ViewTypes.FORM"
               v-model:checked="surveyMode"
               data-cy="nc-modal-share-view__survey-mode"
-              data-pw="nc-modal-share-view__survey-mode"
+              data-nc="nc-modal-share-view__survey-mode"
               class="!text-sm"
             >
               Use Survey Mode
@@ -267,7 +267,7 @@ watch(passwordProtected, (value) => {
               v-if="shared.type === ViewTypes.FORM"
               v-model:checked="viewTheme"
               data-cy="nc-modal-share-view__with-theme"
-              data-pw="nc-modal-share-view__with-theme"
+              data-nc="nc-modal-share-view__with-theme"
               class="!text-sm"
             >
               Use Theme
@@ -282,7 +282,7 @@ watch(passwordProtected, (value) => {
                   :colors="projectThemeColors"
                   :row-size="9"
                   :advanced="false"
-                  data-pw="nc-modal-share-view__theme-picker"
+                  data-nc="nc-modal-share-view__theme-picker"
                   @input="onChangeTheme"
                 />
               </div>
@@ -295,7 +295,7 @@ watch(passwordProtected, (value) => {
               v-model:checked="passwordProtected"
               data-cy="nc-modal-share-view__with-password"
               class="!text-sm !my-1"
-              data-pw="nc-modal-share-view__with-password"
+              data-nc="nc-modal-share-view__with-password"
             >
               {{ $t('msg.info.beforeEnablePwd') }}
             </a-checkbox>
@@ -305,7 +305,7 @@ watch(passwordProtected, (value) => {
                 <a-input
                   v-model:value="shared.password"
                   data-cy="nc-modal-share-view__password"
-                  data-pw="nc-modal-share-view__password"
+                  data-nc="nc-modal-share-view__password"
                   size="small"
                   class="!text-xs max-w-[250px]"
                   type="password"
@@ -314,7 +314,7 @@ watch(passwordProtected, (value) => {
 
                 <a-button
                   data-cy="nc-modal-share-view__save-password"
-                  data-pw="nc-modal-share-view__save-password"
+                  data-nc="nc-modal-share-view__save-password"
                   size="small"
                   class="!text-xs"
                   @click="saveShareLinkPassword"
@@ -334,7 +334,7 @@ watch(passwordProtected, (value) => {
               "
               v-model:checked="allowCSVDownload"
               data-cy="nc-modal-share-view__with-csv-download"
-              data-pw="nc-modal-share-view__with-csv-download"
+              data-nc="nc-modal-share-view__with-csv-download"
               class="!text-sm"
             >
               {{ $t('labels.downloadAllowed') }}

packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue

@@ -55,7 +55,7 @@ watch(
     <template #overlay>
       <div
         class="bg-gray-50 p-6 shadow-lg menu-filter-dropdown min-w-[400px] max-h-[max(80vh,500px)] overflow-auto !border"
-        pw-data="nc-sorts-menu"
+        data-nc="nc-sorts-menu"
       >
         <div v-if="sorts?.length" class="sort-grid mb-2" @click.stop>
           <template v-for="(sort, i) in sorts || []" :key="i">

packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue

@@ -103,7 +103,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
       </a-button>
 
       <template #overlay>
-        <a-menu class="ml-6 !text-sm !px-0 !py-2 !rounded" pw-data="toolbar-actions">
+        <a-menu class="ml-6 !text-sm !px-0 !py-2 !rounded" data-nc="toolbar-actions">
           <a-menu-item-group>
             <a-sub-menu
               v-if="isUIAllowed('view-type')"

packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue

@@ -136,7 +136,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex flex-col w-full" data-pw="nc-share-base-sub-modal">
+  <div class="flex flex-col w-full" data-nc="nc-share-base-sub-modal">
     <div class="flex flex-row items-center space-x-0.5 pl-2 h-[0.8rem]">
       <MdiOpenInNew />
 

packages/nc-gui/layouts/base.vue

@@ -57,7 +57,7 @@ hooks.hook('page:finish', () => {
         </div>
 
         <div class="!text-white flex justify-center">
-          <div class="flex items-center gap-2 ml-3" pw-data="nc-loading">
+          <div class="flex items-center gap-2 ml-3" data-nc="nc-loading">
             {{ $t('general.loading') }}
 
             <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />

packages/nc-gui/layouts/shared-view.vue

@@ -53,7 +53,7 @@ export default {
           <div class="flex justify-center items-center">
             <div class="flex items-center gap-2 ml-3 text-white">
               <template v-if="isLoading">
-                <span class="text-white" pw-data="nc-loading">{{ $t('general.loading') }}</span>
+                <span class="text-white" data-nc="nc-loading">{{ $t('general.loading') }}</span>
 
                 <MdiReload :class="{ 'animate-infinite animate-spin ': isLoading }" />
               </template>

packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@@ -229,7 +229,7 @@ onBeforeUnmount(reset)
             <div
               :style="{ width: isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
               :class="[isOpen ? '' : 'justify-center']"
-              pw-data="nc-project-menu"
+              data-nc="nc-project-menu"
               class="group cursor-pointer flex gap-1 items-center nc-project-menu overflow-hidden"
             >
               <template v-if="isOpen">

packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue

@@ -52,14 +52,14 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
                 </div>
 
                 <a-tooltip v-if="tab.title?.length > 12" placement="bottom">
-                  <div class="truncate" :data-pw="`nc-root-tabs-${tab.title}`">{{ tab.title }}</div>
+                  <div class="truncate" :data-nc="`nc-root-tabs-${tab.title}`">{{ tab.title }}</div>
 
                   <template #title>
                     <div>{{ tab.title }}</div>
                   </template>
                 </a-tooltip>
 
-                <div v-else :data-pw="`nc-root-tabs-${tab.title}`">{{ tab.title }}</div>
+                <div v-else :data-nc="`nc-root-tabs-${tab.title}`">{{ tab.title }}</div>
               </div>
             </template>
           </a-tab-pane>
@@ -68,7 +68,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
         <span class="flex-1" />
 
         <div class="flex justify-center self-center mr-2 min-w-[115px]">
-          <div v-show="isLoading" class="flex items-center gap-2 ml-3 text-gray-200" pw-data="nc-loading">
+          <div v-show="isLoading" class="flex items-center gap-2 ml-3 text-gray-200" data-nc="nc-loading">
             {{ $t('general.loading') }}
 
             <MdiLoading class="animate-infinite animate-spin" />

packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue

@@ -85,7 +85,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                     <LazySmartsheetVirtualCell
                       v-if="isVirtualCol(field)"
                       class="mt-0 nc-input"
-                      :pw-data="`nc-form-input-cell-${field.label || field.title}`"
+                      :data-nc="`nc-form-input-cell-${field.label || field.title}`"
                       :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
                       :column="field"
                     />
@@ -94,7 +94,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                       v-else
                       v-model="formState[field.title]"
                       class="nc-input"
-                      :pw-data="`nc-form-input-cell-${field.label || field.title}`"
+                      :data-nc="`nc-form-input-cell-${field.label || field.title}`"
                       :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
                       :column="field"
                       :edit-enabled="true"
@@ -115,7 +115,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                 <button
                   type="submit"
                   class="uppercase scaling-btn prose-sm"
-                  pw-data="shared-form-submit-button"
+                  data-nc="shared-form-submit-button"
                   @click="submitForm"
                 >
                   {{ $t('general.submit') }}

packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

@@ -208,7 +208,7 @@ onMounted(() => {
       class="max-w-[max(33%,600px)] mx-auto flex flex-col justify-end"
     >
       <div class="px-4 md:px-0 flex flex-col justify-end">
-        <h1 class="prose-2xl font-bold self-center my-4" data-cy="nc-survey-form__heading" data-pw="nc-survey-form__heading">
+        <h1 class="prose-2xl font-bold self-center my-4" data-cy="nc-survey-form__heading" data-nc="nc-survey-form__heading">
           {{ sharedFormView.heading }}
         </h1>
 
@@ -216,7 +216,7 @@ onMounted(() => {
           v-if="sharedFormView.subheading && sharedFormView.subheading !== ''"
           class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6"
           data-cy="nc-survey-form__sub-heading"
-          data-pw="nc-survey-form__sub-heading"
+          data-nc="nc-survey-form__sub-heading"
         >
           {{ sharedFormView?.subheading }}
         </h2>
@@ -231,7 +231,7 @@ onMounted(() => {
           class="color-transition h-full flex flex-col mt-6 gap-4 w-full max-w-[max(33%,600px)] m-auto"
         >
           <div v-if="field && !submitted" class="flex flex-col gap-2">
-            <div class="flex nc-form-column-label" data-pw="nc-form-column-label">
+            <div class="flex nc-form-column-label" data-nc="nc-form-column-label">
               <LazySmartsheetHeaderVirtualCell
                 v-if="isVirtualCol(field)"
                 :column="{ ...field, title: field.label || field.title }"
@@ -255,7 +255,7 @@ onMounted(() => {
                 class="mt-0 nc-input"
                 :row="{ row: {}, oldRow: {}, rowMeta: {} }"
                 :data-cy="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
-                :data-pw="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
+                :data-nc="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
                 :column="field"
               />
 
@@ -264,7 +264,7 @@ onMounted(() => {
                 v-model="formState[field.title]"
                 class="nc-input"
                 :data-cy="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
-                :data-pw="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
+                :data-nc="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
                 :column="field"
                 :edit-enabled="true"
               />
@@ -277,7 +277,7 @@ onMounted(() => {
                 <div
                   class="block text-[14px]"
                   :class="field.uidt === UITypes.Checkbox ? 'text-center' : ''"
-                  data-pw="nc-survey-form__field-description"
+                  data-nc="nc-survey-form__field-description"
                   data-cy="nc-survey-form__field-description"
                 >
                   {{ field.description }}
@@ -303,7 +303,7 @@ onMounted(() => {
                   type="submit"
                   class="uppercase scaling-btn prose-sm"
                   data-cy="nc-survey-form__btn-submit"
-                  data-pw="nc-survey-form__btn-submit"
+                  data-nc="nc-survey-form__btn-submit"
                   @click="submit"
                 >
                   {{ $t('general.submit') }}
@@ -319,7 +319,7 @@ onMounted(() => {
                   <button
                     class="bg-opacity-100 scaling-btn flex items-center gap-1"
                     data-cy="nc-survey-form__btn-next"
-                    data-pw="nc-survey-form__btn-next"
+                    data-nc="nc-survey-form__btn-next"
                     :class="[
                       v$.localState[field.title]?.$error ? 'after:!bg-gray-100 after:!ring-red-500' : '',
                       animationTarget === AnimationTarget.OkButton && isAnimating
@@ -352,7 +352,7 @@ onMounted(() => {
               <div
                 class="text-lg px-6 py-3 bg-green-300 text-gray-700 rounded"
                 data-cy="nc-survey-form__success-msg"
-                data-pw="nc-survey-form__success-msg"
+                data-nc="nc-survey-form__success-msg"
               >
                 <template v-if="sharedFormView?.success_msg">
                   {{ sharedFormView?.success_msg }}
@@ -377,7 +377,7 @@ onMounted(() => {
                     type="button"
                     class="scaling-btn bg-opacity-100"
                     data-cy="nc-survey-form__btn-submit-another-form"
-                    data-pw="nc-survey-form__btn-submit-another-form"
+                    data-nc="nc-survey-form__btn-submit-another-form"
                     @click="resetForm"
                   >
                     Submit Another Form
@@ -394,7 +394,7 @@ onMounted(() => {
       <div
         class="mb-24 md:my-4 select-none text-center text-gray-500 dark:text-slate-200"
         data-cy="nc-survey-form__footer"
-        data-pw="nc-survey-form__footer"
+        data-nc="nc-survey-form__footer"
       >
         {{ index + 1 }} / {{ formColumns?.length }}
       </div>
@@ -415,7 +415,7 @@ onMounted(() => {
               "
               class="p-0.5 flex items-center group color-transition"
               data-cy="nc-survey-form__icon-prev"
-              data-pw="nc-survey-form__icon-prev"
+              data-nc="nc-survey-form__icon-prev"
               @click="goPrevious()"
             >
               <MdiChevronLeft :class="isFirst ? 'text-gray-300' : 'group-hover:text-accent'" class="text-2xl md:text-md" />
@@ -435,7 +435,7 @@ onMounted(() => {
               "
               class="p-0.5 flex items-center group color-transition"
               data-cy="nc-survey-form__icon-next"
-              data-pw="nc-survey-form__icon-next"
+              data-nc="nc-survey-form__icon-next"
               @click="goNext()"
             >
               <MdiChevronRight

packages/nc-gui/pages/index/index/index.vue

@@ -144,7 +144,7 @@ const copyProjectMeta = async () => {
 <template>
   <div
     class="relative flex flex-col justify-center gap-2 w-full p-8 md:(bg-white rounded-lg border-1 border-gray-200 shadow)"
-    pw-data="projects-container"
+    data-nc="projects-container"
   >
     <h1 class="flex items-center justify-center gap-2 leading-8 mb-8 mt-4">
       <span class="text-4xl nc-project-page-title" @dblclick="copyProjectMeta">{{ $t('title.myProject') }}</span>
@@ -166,7 +166,7 @@ const copyProjectMeta = async () => {
             v-e="['a:project:refresh']"
             class="text-xl text-gray-500 group-hover:text-accent cursor-pointer"
             :class="isLoading ? '!text-primary' : ''"
-            pw-data="projects-reload-button"
+            data-nc="projects-reload-button"
             @click="loadProjects"
           />
         </div>
@@ -290,7 +290,7 @@ const copyProjectMeta = async () => {
 
               <MdiDeleteOutline
                 class="nc-action-btn"
-                :pw-data="`delete-project-${record.title}`"
+                :data-nc="`delete-project-${record.title}`"
                 @click.stop="deleteProject(record)"
               />
             </div>

packages/nc-gui/pages/signin.vue

@@ -88,7 +88,7 @@ function resetError() {
             <a-input
               v-model:value="form.email"
               data-cy="nc-form-signin__email"
-              pw-data="nc-form-signin__email"
+              data-nc="nc-form-signin__email"
               size="large"
               :placeholder="$t('msg.info.signUp.workEmail')"
               @focus="resetError"
@@ -99,7 +99,7 @@ function resetError() {
             <a-input-password
               v-model:value="form.password"
               data-cy="nc-form-signin__password"
-              pw-data="nc-form-signin__password"
+              data-nc="nc-form-signin__password"
               size="large"
               class="password"
               :placeholder="$t('msg.info.signUp.enterPassword')"
@@ -116,7 +116,7 @@ function resetError() {
           <div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 justify-center">
             <button
               data-cy="nc-form-signin__submit"
-              pw-data="nc-form-signin__submit"
+              data-nc="nc-form-signin__submit"
               class="scaling-btn bg-opacity-100"
               type="submit"
             >

scripts/playwright/pages/Dashboard/ExpandedForm/index.ts

@@ -28,7 +28,7 @@ export class ExpandedFormPage extends BasePage {
   }
 
   async fillField({ columnTitle, value, type = 'text' }: { columnTitle: string; value: string; type?: string }) {
-    const field = this.get().locator(`[pw-data="nc-expand-col-${columnTitle}"]`);
+    const field = this.get().locator(`[data-nc="nc-expand-col-${columnTitle}"]`);
     await field.hover();
     switch (type) {
       case 'text':
@@ -70,7 +70,7 @@ export class ExpandedFormPage extends BasePage {
     await this.get().press('Escape');
     await this.get().waitFor({ state: 'hidden' });
     await this.verifyToast({ message: `updated successfully.` });
-    await this.rootPage.locator('[pw-data="grid-load-spinner"]').waitFor({ state: 'hidden' });
+    await this.rootPage.locator('[data-nc="grid-load-spinner"]').waitFor({ state: 'hidden' });
   }
 
   async verify({ header, url }: { header: string; url: string }) {
@@ -87,7 +87,7 @@ export class ExpandedFormPage extends BasePage {
   }
 
   async openChildCard(param: { column: string; title: string }) {
-    const childList = await this.get().locator(`[pw-data="nc-expand-col-${param.column}"]`);
+    const childList = await this.get().locator(`[data-nc="nc-expand-col-${param.column}"]`);
     await childList.locator(`.ant-card:has-text("${param.title}")`).click();
   }
 

scripts/playwright/pages/Dashboard/Form/index.ts

@@ -24,61 +24,61 @@ export class FormPage extends BasePage {
     this.dashboard = dashboard;
     this.toolbar = new ToolbarPage(this);
 
-    this.addAllButton = dashboard.get().locator('[data-pw="nc-form-add-all"]');
+    this.addAllButton = dashboard.get().locator('[data-nc="nc-form-add-all"]');
-    this.removeAllButton = dashboard.get().locator('[data-pw="nc-form-remove-all"]');
+    this.removeAllButton = dashboard.get().locator('[data-nc="nc-form-remove-all"]');
-    this.submitButton = dashboard.get().locator('[data-pw="nc-form-submit"]');
+    this.submitButton = dashboard.get().locator('[data-nc="nc-form-submit"]');
 
-    this.showAnotherFormRadioButton = dashboard.get().locator('[data-pw="nc-form-checkbox-submit-another-form"]');
+    this.showAnotherFormRadioButton = dashboard.get().locator('[data-nc="nc-form-checkbox-submit-another-form"]');
-    this.showAnotherFormAfter5SecRadioButton = dashboard.get().locator('[data-pw="nc-form-checkbox-show-blank-form"]');
+    this.showAnotherFormAfter5SecRadioButton = dashboard.get().locator('[data-nc="nc-form-checkbox-show-blank-form"]');
-    this.emailMeRadioButton = dashboard.get().locator('[data-pw="nc-form-checkbox-send-email"]');
+    this.emailMeRadioButton = dashboard.get().locator('[data-nc="nc-form-checkbox-send-email"]');
-    this.formHeading = dashboard.get().locator('[data-pw="nc-form-heading"]');
+    this.formHeading = dashboard.get().locator('[data-nc="nc-form-heading"]');
-    this.formSubHeading = dashboard.get().locator('[data-pw="nc-form-sub-heading"]');
+    this.formSubHeading = dashboard.get().locator('[data-nc="nc-form-sub-heading"]');
-    this.afterSubmitMsg = dashboard.get().locator('[data-pw="nc-form-after-submit-msg"]');
+    this.afterSubmitMsg = dashboard.get().locator('[data-nc="nc-form-after-submit-msg"]');
   }
 
   get() {
-    return this.dashboard.get().locator('[data-pw="nc-form-wrapper"]');
+    return this.dashboard.get().locator('[data-nc="nc-form-wrapper"]');
   }
 
   getFormAfterSubmit() {
-    return this.dashboard.get().locator('[data-pw="nc-form-wrapper-submit"]');
+    return this.dashboard.get().locator('[data-nc="nc-form-wrapper-submit"]');
   }
 
   getFormHiddenColumn() {
-    return this.get().locator('[data-pw="nc-form-hidden-column"]');
+    return this.get().locator('[data-nc="nc-form-hidden-column"]');
   }
 
   getFormFields() {
-    return this.get().locator('[data-pw="nc-form-fields"]');
+    return this.get().locator('[data-nc="nc-form-fields"]');
   }
 
   getDragNDropToHide() {
-    return this.get().locator('[data-pw="nc-drag-n-drop-to-hide"]');
+    return this.get().locator('[data-nc="nc-drag-n-drop-to-hide"]');
   }
 
   getFormFieldsRemoveIcon() {
-    return this.get().locator('[data-pw="nc-field-remove-icon"]');
+    return this.get().locator('[data-nc="nc-field-remove-icon"]');
   }
 
   getFormFieldsRequired() {
-    return this.get().locator('[data-pw="nc-form-input-required"]');
+    return this.get().locator('[data-nc="nc-form-input-required"]');
   }
 
   getFormFieldsInputLabel() {
-    return this.get().locator('input[data-pw="nc-form-input-label"]:visible');
+    return this.get().locator('input[data-nc="nc-form-input-label"]:visible');
   }
 
   getFormFieldsInputHelpText() {
-    return this.get().locator('input[data-pw="nc-form-input-help-text"]:visible');
+    return this.get().locator('input[data-nc="nc-form-input-help-text"]:visible');
   }
 
   async verifyFormFieldLabel({ index, label }: { index: number; label: string }) {
-    await expect(await this.getFormFields().nth(index).locator('[data-pw="nc-form-input-label"]')).toContainText(label);
+    await expect(await this.getFormFields().nth(index).locator('[data-nc="nc-form-input-label"]')).toContainText(label);
   }
 
   async verifyFormFieldHelpText({ index, helpText }: { index: number; helpText: string }) {
     await expect(
-      await this.getFormFields().nth(index).locator('[pw-data="nc-form-input-help-text-label"]')
+      await this.getFormFields().nth(index).locator('[data-nc="nc-form-input-help-text-label"]')
     ).toContainText(helpText);
   }
 
@@ -91,7 +91,7 @@ export class FormPage extends BasePage {
   }
 
   async verifyFormViewFieldsOrder({ fields }: { fields: string[] }) {
-    const fieldLabels = await this.get().locator('[data-pw="nc-form-input-label"]');
+    const fieldLabels = await this.get().locator('[data-nc="nc-form-input-label"]');
     await expect(await fieldLabels).toHaveCount(fields.length);
     for (let i = 0; i < fields.length; i++) {
       await expect(await fieldLabels.nth(i)).toContainText(fields[i]);
@@ -109,21 +109,21 @@ export class FormPage extends BasePage {
   async removeField({ field, mode }: { mode: string; field: string }) {
     if (mode === 'dragDrop') {
       const src = await this.get().locator(`.nc-form-drag-${field.replace(' ', '')}`);
-      const dst = await this.get().locator(`[data-pw="nc-drag-n-drop-to-hide"]`);
+      const dst = await this.get().locator(`[data-nc="nc-drag-n-drop-to-hide"]`);
       await src.dragTo(dst);
     } else if (mode === 'hideField') {
       const src = await this.get().locator(`.nc-form-drag-${field.replace(' ', '')}`);
-      await src.locator(`[data-pw="nc-field-remove-icon"]`).click();
+      await src.locator(`[data-nc="nc-field-remove-icon"]`).click();
     }
   }
 
   async addField({ field, mode }: { mode: string; field: string }) {
     if (mode === 'dragDrop') {
-      const src = await this.get().locator(`[data-pw="nc-form-hidden-column-${field}"]`);
+      const src = await this.get().locator(`[data-nc="nc-form-hidden-column-${field}"]`);
       const dst = await this.get().locator(`.nc-form-drag-Country`);
       await src.dragTo(dst);
     } else if (mode === 'clickField') {
-      const src = await this.get().locator(`[data-pw="nc-form-hidden-column-${field}"]`);
+      const src = await this.get().locator(`[data-nc="nc-form-hidden-column-${field}"]`);
       await src.click();
     }
   }
@@ -149,7 +149,7 @@ export class FormPage extends BasePage {
   async fillForm(param: { field: string; value: string }[]) {
     for (let i = 0; i < param.length; i++) {
       await this.get()
-        .locator(`[data-pw="nc-form-input-${param[i].field.replace(' ', '')}"] >> input`)
+        .locator(`[data-nc="nc-form-input-${param[i].field.replace(' ', '')}"] >> input`)
         .fill(param[i].value);
     }
   }
@@ -167,7 +167,7 @@ export class FormPage extends BasePage {
   }) {
     await this.get()
       .locator(`.nc-form-drag-${field.replace(' ', '')}`)
-      .locator('div[data-pw="nc-form-input-label"]')
+      .locator('div[data-nc="nc-form-input-label"]')
       .click();
     await this.getFormFieldsInputLabel().fill(label);
     await this.getFormFieldsInputHelpText().fill(helpText);
@@ -196,12 +196,12 @@ export class FormPage extends BasePage {
 
     const fieldLabel = await this.get()
       .locator(`.nc-form-drag-${field.replace(' ', '')}`)
-      .locator('div[data-pw="nc-form-input-label"]');
+      .locator('div[data-nc="nc-form-input-label"]');
     await expect(fieldLabel).toHaveText(expectText);
 
     const fieldHelpText = await this.get()
       .locator(`.nc-form-drag-${field.replace(' ', '')}`)
-      .locator('div[data-pw="nc-form-input-help-text-label"]');
+      .locator('div[data-nc="nc-form-input-help-text-label"]');
     await expect(fieldHelpText).toHaveText(helpText);
   }
 
@@ -237,16 +237,16 @@ export class FormPage extends BasePage {
   async verifyAfterSubmitMenuState(param: { showBlankForm?: boolean; submitAnotherForm?: boolean; emailMe?: boolean }) {
     if (true === param.showBlankForm) {
       await expect(
-        this.get().locator('[data-pw="nc-form-checkbox-show-blank-form"][aria-checked="true"]')
+        this.get().locator('[data-nc="nc-form-checkbox-show-blank-form"][aria-checked="true"]')
       ).toBeVisible();
     }
     if (true === param.submitAnotherForm) {
       await expect(
-        this.get().locator('[data-pw="nc-form-checkbox-submit-another-form"][aria-checked="true"]')
+        this.get().locator('[data-nc="nc-form-checkbox-submit-another-form"][aria-checked="true"]')
       ).toBeVisible();
     }
     if (true === param.emailMe) {
-      await expect(this.get().locator('[data-pw="nc-form-checkbox-send-email"][aria-checked="true"]')).toBeVisible();
+      await expect(this.get().locator('[data-nc="nc-form-checkbox-send-email"][aria-checked="true"]')).toBeVisible();
     }
   }
 }

scripts/playwright/pages/Dashboard/Gallery/index.ts

@@ -13,7 +13,7 @@ export class GalleryPage extends BasePage {
   }
 
   get() {
-    return this.dashboard.get().locator('[data-pw="nc-gallery-wrapper"]');
+    return this.dashboard.get().locator('[data-nc="nc-gallery-wrapper"]');
   }
 
   card(index: number) {

scripts/playwright/pages/Dashboard/Grid/Column/SelectOptionColumn.ts

@@ -29,8 +29,8 @@ export class SelectOptionColumnPageObject extends BasePage {
     await this.column.get().locator('button:has-text("Add option")').click();
 
     // Fill text=Select options can't be nullAdd option >> input[type="text"]
-    await this.column.get().locator(`[data-pw="select-column-option-input-${index}"]`).click();
+    await this.column.get().locator(`[data-nc="select-column-option-input-${index}"]`).click();
-    await this.column.get().locator(`[data-pw="select-column-option-input-${index}"]`).fill(option);
+    await this.column.get().locator(`[data-nc="select-column-option-input-${index}"]`).fill(option);
 
     if (!skipColumnModal && columnTitle) await this.column.save({ isUpdated: true });
   }
@@ -38,8 +38,8 @@ export class SelectOptionColumnPageObject extends BasePage {
   async editOption({ columnTitle, index, newOption }: { index: number; columnTitle: string; newOption: string }) {
     await this.column.openEdit({ title: columnTitle });
 
-    await this.column.get().locator(`[data-pw="select-column-option-input-${index}"]`).click();
+    await this.column.get().locator(`[data-nc="select-column-option-input-${index}"]`).click();
-    await this.column.get().locator(`[data-pw="select-column-option-input-${index}"]`).fill(newOption);
+    await this.column.get().locator(`[data-nc="select-column-option-input-${index}"]`).fill(newOption);
 
     await this.column.save({ isUpdated: true });
   }
@@ -47,7 +47,7 @@ export class SelectOptionColumnPageObject extends BasePage {
   async deleteOption({ columnTitle, index }: { index: number; columnTitle: string }) {
     await this.column.openEdit({ title: columnTitle });
 
-    await this.column.get().locator(`svg[data-pw="select-column-option-remove-${index}"]`).click();
+    await this.column.get().locator(`svg[data-nc="select-column-option-remove-${index}"]`).click();
 
     await this.column.save({ isUpdated: true });
   }
@@ -66,8 +66,8 @@ export class SelectOptionColumnPageObject extends BasePage {
     await this.column.rootPage.waitForTimeout(150);
 
     await this.column.rootPage.dragAndDrop(
-      `svg[data-pw="select-option-column-handle-icon-${sourceOption}"]`,
+      `svg[data-nc="select-option-column-handle-icon-${sourceOption}"]`,
-      `svg[data-pw="select-option-column-handle-icon-${destinationOption}"]`,
+      `svg[data-nc="select-option-column-handle-icon-${destinationOption}"]`,
       {
         force: true,
       }

scripts/playwright/pages/Dashboard/Grid/Column/index.ts

@@ -14,7 +14,7 @@ export class ColumnPageObject extends BasePage {
   }
 
   get() {
-    return this.rootPage.locator('form[data-pw="add-or-edit-column"]');
+    return this.rootPage.locator('form[data-nc="add-or-edit-column"]');
   }
 
   async create({

scripts/playwright/pages/Dashboard/Grid/index.ts

@@ -26,11 +26,11 @@ export class GridPage extends BasePage {
   }
 
   get() {
-    return this.dashboard.get().locator('[pw-data="nc-grid-wrapper"]');
+    return this.dashboard.get().locator('[data-nc="nc-grid-wrapper"]');
   }
 
   row(index: number) {
-    return this.get().locator(`tr[data-pw="grid-row-${index}"]`);
+    return this.get().locator(`tr[data-nc="grid-row-${index}"]`);
   }
 
   async rowCount() {
@@ -122,17 +122,17 @@ export class GridPage extends BasePage {
   }
 
   async verifyRow({ index }: { index: number }) {
-    await this.get().locator(`td[data-pw="cell-Title-${index}"]`).waitFor({ state: 'visible' });
+    await this.get().locator(`td[data-nc="cell-Title-${index}"]`).waitFor({ state: 'visible' });
-    await expect(this.get().locator(`td[data-pw="cell-Title-${index}"]`)).toHaveCount(1);
+    await expect(this.get().locator(`td[data-nc="cell-Title-${index}"]`)).toHaveCount(1);
   }
 
   async verifyRowDoesNotExist({ index }: { index: number }) {
-    await this.get().locator(`td[data-pw="cell-Title-${index}"]`).waitFor({ state: 'hidden' });
+    await this.get().locator(`td[data-nc="cell-Title-${index}"]`).waitFor({ state: 'hidden' });
-    return await expect(this.get().locator(`td[data-pw="cell-Title-${index}"]`)).toHaveCount(0);
+    return await expect(this.get().locator(`td[data-nc="cell-Title-${index}"]`)).toHaveCount(0);
   }
 
   async deleteRow(index: number) {
-    await this.get().locator(`td[data-pw="cell-Title-${index}"]`).click({
+    await this.get().locator(`td[data-nc="cell-Title-${index}"]`).click({
       button: 'right',
     });
 
@@ -149,7 +149,7 @@ export class GridPage extends BasePage {
 
   async addRowRightClickMenu(index: number) {
     const rowCount = await this.get().locator('.nc-grid-row').count();
-    await this.get().locator(`td[data-pw="cell-Title-${index}"]`).click({
+    await this.get().locator(`td[data-nc="cell-Title-${index}"]`).click({
       button: 'right',
     });
     // Click text=Insert New Row
@@ -158,28 +158,28 @@ export class GridPage extends BasePage {
   }
 
   async openExpandedRow({ index }: { index: number }) {
-    await this.row(index).locator(`td[pw-data="cell-Id-${index}"]`).hover();
+    await this.row(index).locator(`td[data-nc="cell-Id-${index}"]`).hover();
-    await this.row(index).locator(`div[pw-data="nc-expand-${index}"]`).click();
+    await this.row(index).locator(`div[data-nc="nc-expand-${index}"]`).click();
     await (await this.rootPage.locator('.ant-drawer-body').elementHandle())?.waitForElementState('stable');
   }
 
   async selectAll() {
-    await this.get().locator('[pw-data="nc-check-all"]').hover();
+    await this.get().locator('[data-nc="nc-check-all"]').hover();
 
-    await this.get().locator('[pw-data="nc-check-all"]').locator('input[type="checkbox"]').check({
+    await this.get().locator('[data-nc="nc-check-all"]').locator('input[type="checkbox"]').check({
       force: true,
     });
 
     const rowCount = await this.rowCount();
     for (let i = 0; i < rowCount; i++) {
-      await expect(this.row(i).locator(`[pw-data="cell-Id-${i}"]`).locator('span.ant-checkbox-checked')).toHaveCount(1);
+      await expect(this.row(i).locator(`[data-nc="cell-Id-${i}"]`).locator('span.ant-checkbox-checked')).toHaveCount(1);
     }
     await this.rootPage.waitForTimeout(300);
   }
 
   async deleteAll() {
     await this.selectAll();
-    await this.get().locator('[pw-data="nc-check-all"]').nth(0).click({
+    await this.get().locator('[data-nc="nc-check-all"]').nth(0).click({
       button: 'right',
     });
     await this.rootPage.locator('text=Delete Selected Rows').click();
@@ -211,7 +211,7 @@ export class GridPage extends BasePage {
   }
 
   async waitLoading() {
-    await this.dashboard.get().locator('[pw-data="grid-load-spinner"]').waitFor({ state: 'hidden' });
+    await this.dashboard.get().locator('[data-nc="grid-load-spinner"]').waitFor({ state: 'hidden' });
   }
 
   async verifyEditDisabled({ columnHeader = 'Title' }: { columnHeader?: string } = {}) {
@@ -224,7 +224,7 @@ export class GridPage extends BasePage {
     await expect(await cell.locator('input')).not.toBeVisible();
 
     // right click menu
-    await this.get().locator(`td[data-pw="cell-${columnHeader}-0"]`).click({
+    await this.get().locator(`td[data-nc="cell-${columnHeader}-0"]`).click({
       button: 'right',
     });
     await expect(await this.rootPage.locator('text=Insert New Row')).not.toBeVisible();
@@ -252,7 +252,7 @@ export class GridPage extends BasePage {
     await expect(await cell.locator('input')).toBeVisible();
 
     // right click menu
-    await this.get().locator(`td[data-pw="cell-${columnHeader}-0"]`).click({
+    await this.get().locator(`td[data-nc="cell-${columnHeader}-0"]`).click({
       button: 'right',
     });
     await expect(await this.rootPage.locator('text=Insert New Row')).toBeVisible();

scripts/playwright/pages/Dashboard/Kanban/index.ts

@@ -14,7 +14,7 @@ export class KanbanPage extends BasePage {
   }
 
   get() {
-    return this.dashboard.get().locator('[data-pw="nc-kanban-wrapper"]');
+    return this.dashboard.get().locator('[data-nc="nc-kanban-wrapper"]');
   }
 
   card(index: number) {
@@ -65,7 +65,7 @@ export class KanbanPage extends BasePage {
     for (let i = 0; i < stacks; i++) {
       const stack = await this.get().locator(`.nc-kanban-stack`).nth(i);
       // Since otherwise stack title will be repeated as title is in two divs, with one having hidden class
-      const stackTitle = await stack.locator(`.nc-kanban-stack-head >> [nc-data="truncate-label"]`);
+      const stackTitle = await stack.locator(`.nc-kanban-stack-head >> [data-nc="truncate-label"]`);
       await expect(stackTitle).toHaveText(order[i], { ignoreCase: true });
     }
   }

scripts/playwright/pages/Dashboard/Settings/Acl.ts

@@ -11,7 +11,7 @@ export class AclPage extends BasePage {
   }
 
   get() {
-    return this.settings.get().locator(`[pw-data="nc-settings-subtab-UI Access Control"]`);
+    return this.settings.get().locator(`[data-nc="nc-settings-subtab-UI Access Control"]`);
   }
 
   async toggle({ table, role }: { table: string; role: string }) {

scripts/playwright/pages/Dashboard/Settings/AppStore.ts

@@ -11,7 +11,7 @@ export class AppStoreSettingsPage extends BasePage {
   }
 
   get() {
-    return this.settings.get().locator(`[pw-data="nc-settings-subtab-appStore"]`);
+    return this.settings.get().locator(`[data-nc="nc-settings-subtab-appStore"]`);
   }
 
   async install({ name }: { name: string }) {

scripts/playwright/pages/Dashboard/Settings/Audit.ts

@@ -11,7 +11,7 @@ export class AuditSettingsPage extends BasePage {
   }
 
   get() {
-    return this.settings.get().locator(`[pw-data="nc-settings-subtab-Audit"]`);
+    return this.settings.get().locator(`[data-nc="nc-settings-subtab-Audit"]`);
   }
 
   async verifyRow({

scripts/playwright/pages/Dashboard/Settings/Erd.ts

@@ -10,6 +10,6 @@ export class SettingsErdPage extends ErdBasePage {
   }
 
   get() {
-    return this.rootPage.locator(`[pw-data="nc-settings-subtab-ERD View"]`);
+    return this.rootPage.locator(`[data-nc="nc-settings-subtab-ERD View"]`);
   }
 }

scripts/playwright/pages/Dashboard/Settings/Metadata.ts

@@ -11,7 +11,7 @@ export class MetaDataPage extends BasePage {
   }
 
   get() {
-    return this.settings.get().locator(`[pw-data="nc-settings-subtab-Metadata"]`);
+    return this.settings.get().locator(`[data-nc="nc-settings-subtab-Metadata"]`);
   }
 
   async clickReload() {

scripts/playwright/pages/Dashboard/Settings/Miscellaneous.ts

@@ -11,7 +11,7 @@ export class MiscSettingsPage extends BasePage {
   }
 
   get() {
-    return this.settings.get().locator(`[pw-data="nc-settings-subtab-Miscellaneous"]`);
+    return this.settings.get().locator(`[data-nc="nc-settings-subtab-Miscellaneous"]`);
   }
 
   async clickShowM2MTables() {

scripts/playwright/pages/Dashboard/Settings/Teams.ts

@@ -17,7 +17,7 @@ export class TeamsPage extends BasePage {
   }
 
   get() {
-    return this.settings.get().locator(`[pw-data="nc-settings-subtab-Users Management"]`);
+    return this.settings.get().locator(`[data-nc="nc-settings-subtab-Users Management"]`);
   }
 
   prefixEmail(email: string) {
@@ -26,7 +26,7 @@ export class TeamsPage extends BasePage {
   }
 
   getSharedBaseSubModal() {
-    return this.rootPage.locator(`[data-pw="nc-share-base-sub-modal"]`);
+    return this.rootPage.locator(`[data-nc="nc-share-base-sub-modal"]`);
   }
 
   async invite({ email, role }: { email: string; role: string }) {

scripts/playwright/pages/Dashboard/Settings/index.ts

@@ -57,7 +57,7 @@ export class SettingsPage extends BasePage {
   }
 
   async close() {
-    await this.get().locator('[pw-data="settings-modal-close-button"]').click();
+    await this.get().locator('[data-nc="settings-modal-close-button"]').click();
     await this.get().waitFor({ state: 'hidden' });
   }
 }

scripts/playwright/pages/Dashboard/SurveyForm/index.ts

@@ -13,14 +13,14 @@ export class SurveyFormPage extends BasePage {
 
   constructor(rootPage: Page) {
     super(rootPage);
-    this.formHeading = this.get().locator('[data-pw="nc-survey-form__heading"]');
+    this.formHeading = this.get().locator('[data-nc="nc-survey-form__heading"]');
-    this.formSubHeading = this.get().locator('[data-pw="nc-survey-form__sub-heading"]');
+    this.formSubHeading = this.get().locator('[data-nc="nc-survey-form__sub-heading"]');
-    this.submitButton = this.get().locator('[data-pw="nc-survey-form__btn-submit"]');
+    this.submitButton = this.get().locator('[data-nc="nc-survey-form__btn-submit"]');
-    this.nextButton = this.get().locator('[data-pw="nc-survey-form__btn-next"]');
+    this.nextButton = this.get().locator('[data-nc="nc-survey-form__btn-next"]');
-    this.nextSlideButton = this.get().locator('[data-pw="nc-survey-form__icon-next"]');
+    this.nextSlideButton = this.get().locator('[data-nc="nc-survey-form__icon-next"]');
-    this.prevSlideButton = this.get().locator('[data-pw="nc-survey-form__icon-prev"]');
+    this.prevSlideButton = this.get().locator('[data-nc="nc-survey-form__icon-prev"]');
-    this.darkModeButton = this.get().locator('[data-pw="nc-form-dark-mode"]');
+    this.darkModeButton = this.get().locator('[data-nc="nc-form-dark-mode"]');
-    this.formFooter = this.get().locator('[data-pw="nc-survey-form__footer"]');
+    this.formFooter = this.get().locator('[data-nc="nc-survey-form__footer"]');
   }
 
   get() {
@@ -42,7 +42,7 @@ export class SurveyFormPage extends BasePage {
     await expect(this.formHeading).toHaveText(heading);
     await expect(this.formSubHeading).toHaveText(subHeading);
     await expect(this.formFooter).toHaveText(footer);
-    await expect(this.get().locator(`[data-pw="nc-form-column-label"]`)).toHaveText(fieldLabel);
+    await expect(this.get().locator(`[data-nc="nc-form-column-label"]`)).toHaveText(fieldLabel);
 
     // parse footer text ("1 / 3") to identify if last slide
     let isLastSlide = false;
@@ -60,11 +60,11 @@ export class SurveyFormPage extends BasePage {
   }
 
   async fill(param: { fieldLabel: string; type?: string; value?: string }) {
-    await this.get().locator(`[data-pw="nc-survey-form__input-${param.fieldLabel}"]`).click();
+    await this.get().locator(`[data-nc="nc-survey-form__input-${param.fieldLabel}"]`).click();
     if (param.type === 'SingleLineText') {
-      await this.get().locator(`[data-pw="nc-survey-form__input-${param.fieldLabel}"] >> input`).fill(param.value);
+      await this.get().locator(`[data-nc="nc-survey-form__input-${param.fieldLabel}"] >> input`).fill(param.value);
       // press enter key
-      await this.get().locator(`[data-pw="nc-survey-form__input-${param.fieldLabel}"] >> input`).press('Enter');
+      await this.get().locator(`[data-nc="nc-survey-form__input-${param.fieldLabel}"] >> input`).press('Enter');
     } else if (param.type === 'DateTime') {
       const modal = await this.rootPage.locator('.nc-picker-datetime');
       await expect(modal).toBeVisible();
@@ -76,7 +76,7 @@ export class SurveyFormPage extends BasePage {
 
   async validateSuccessMessage(param: { message: string; showAnotherForm?: boolean }) {
     await expect(
-      this.get().locator(`[data-pw="nc-survey-form__success-msg"]:has-text("${param.message}")`)
+      this.get().locator(`[data-nc="nc-survey-form__success-msg"]:has-text("${param.message}")`)
     ).toBeVisible();
 
     if (param.showAnotherForm) {

scripts/playwright/pages/Dashboard/TreeView.ts

@@ -107,8 +107,8 @@ export class TreeViewPage extends BasePage {
   async reorderTables({ sourceTable, destinationTable }: { sourceTable: string; destinationTable: string }) {
     await this.dashboard
       .get()
-      .locator(`[pw-data="tree-view-table-draggable-handle-${sourceTable}"]`)
+      .locator(`[data-nc="tree-view-table-draggable-handle-${sourceTable}"]`)
-      .dragTo(this.get().locator(`[pw-data="tree-view-table-${destinationTable}"]`));
+      .dragTo(this.get().locator(`[data-nc="tree-view-table-${destinationTable}"]`));
   }
 
   async quickImport({ title }: { title: string }) {

scripts/playwright/pages/Dashboard/ViewSidebar/index.ts

@@ -54,7 +54,7 @@ export class ViewSidebarPage extends BasePage {
   }
 
   async openView({ title }: { title: string }) {
-    await this.get().locator(`[pw-data="view-sidebar-view-${title}"]`).click();
+    await this.get().locator(`[data-nc="view-sidebar-view-${title}"]`).click();
   }
 
   async createKanbanView({ title }: { title: string }) {
@@ -64,7 +64,7 @@ export class ViewSidebarPage extends BasePage {
   // Todo: Make selection better
   async verifyView({ title, index }: { title: string; index: number }) {
     await expect(
-      this.get().locator('[nc-data="view-item"]').nth(index).locator('[nc-data="truncate-label"]')
+      this.get().locator('[data-nc="view-item"]').nth(index).locator('[data-nc="truncate-label"]')
     ).toHaveText(title, { ignoreCase: true });
   }
 
@@ -82,13 +82,13 @@ export class ViewSidebarPage extends BasePage {
   async reorderViews({ sourceView, destinationView }: { sourceView: string; destinationView: string }) {
     await this.dashboard
       .get()
-      .locator(`[pw-data="view-sidebar-drag-handle-${sourceView}"]`)
+      .locator(`[data-nc="view-sidebar-drag-handle-${sourceView}"]`)
-      .dragTo(this.get().locator(`[pw-data="view-sidebar-view-${destinationView}"]`));
+      .dragTo(this.get().locator(`[data-nc="view-sidebar-view-${destinationView}"]`));
   }
 
   async deleteView({ title }: { title: string }) {
-    await this.get().locator(`[pw-data="view-sidebar-view-${title}"]`).hover();
+    await this.get().locator(`[data-nc="view-sidebar-view-${title}"]`).hover();
-    await this.get().locator(`[pw-data="view-sidebar-view-actions-${title}"]`).locator('.nc-view-delete-icon').click();
+    await this.get().locator(`[data-nc="view-sidebar-view-actions-${title}"]`).locator('.nc-view-delete-icon').click();
 
     await this.rootPage.locator('.nc-modal-view-delete').locator('button:has-text("Submit"):visible').click();
 
@@ -101,15 +101,15 @@ export class ViewSidebarPage extends BasePage {
   }
 
   async renameView({ title, newTitle }: { title: string; newTitle: string }) {
-    await this.get().locator(`[pw-data="view-sidebar-view-${title}"]`).dblclick();
+    await this.get().locator(`[data-nc="view-sidebar-view-${title}"]`).dblclick();
-    await this.get().locator(`[pw-data="view-sidebar-view-${title}"]`).locator('input').fill(newTitle);
+    await this.get().locator(`[data-nc="view-sidebar-view-${title}"]`).locator('input').fill(newTitle);
     await this.get().press('Enter');
     await this.verifyToast({ message: 'View renamed successfully' });
   }
 
   async copyView({ title }: { title: string }) {
-    await this.get().locator(`[pw-data="view-sidebar-view-${title}"]`).hover();
+    await this.get().locator(`[data-nc="view-sidebar-view-${title}"]`).hover();
-    await this.get().locator(`[pw-data="view-sidebar-view-actions-${title}"]`).locator('.nc-view-copy-icon').click();
+    await this.get().locator(`[data-nc="view-sidebar-view-actions-${title}"]`).locator('.nc-view-copy-icon').click();
     const submitAction = this.rootPage
       .locator('.ant-modal-content')
       .locator('button:has-text("Submit"):visible')

scripts/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts

@@ -15,12 +15,12 @@ export class AttachmentCellPageObject extends BasePage {
   }
 
   clickFilePicker({ index, columnHeader }: { index?: number; columnHeader: string }) {
-    return this.get({ index, columnHeader }).locator('[pw-data="attachment-cell-file-picker-button"]').click();
+    return this.get({ index, columnHeader }).locator('[data-nc="attachment-cell-file-picker-button"]').click();
   }
 
   async addFile({ index, columnHeader, filePath }: { index?: number; columnHeader: string; filePath: string }) {
     const attachFileAction = this.get({ index, columnHeader })
-      .locator('[pw-data="attachment-cell-file-picker-button"]')
+      .locator('[data-nc="attachment-cell-file-picker-button"]')
       .click();
     return await this.attachFile({ filePickUIAction: attachFileAction, filePath });
   }

scripts/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts

@@ -27,12 +27,12 @@ export class SelectOptionCellPageObject extends BasePage {
   }) {
     await this.get({ index, columnHeader }).click();
 
-    await this.rootPage.locator(`[pw-data="select-option-${columnHeader}-${index}"]`, { hasText: option }).click();
+    await this.rootPage.locator(`[data-nc="select-option-${columnHeader}-${index}"]`, { hasText: option }).click();
 
     if (multiSelect) await this.get({ index, columnHeader }).click();
 
     await this.rootPage
-      .locator(`[pw-data="select-option-${columnHeader}-${index}"]`, { hasText: option })
+      .locator(`[data-nc="select-option-${columnHeader}-${index}"]`, { hasText: option })
       .waitFor({ state: 'hidden' });
   }
 

scripts/playwright/pages/Dashboard/common/Cell/index.ts

@@ -24,9 +24,9 @@ export class CellPageObject extends BasePage {
 
   get({ index, columnHeader }: { index?: number; columnHeader: string }): Locator {
     if (this.parent instanceof SharedFormPage) {
-      return this.parent.get().locator(`[pw-data="nc-form-input-cell-${columnHeader}"]`);
+      return this.parent.get().locator(`[data-nc="nc-form-input-cell-${columnHeader}"]`);
     } else {
-      return this.parent.get().locator(`td[data-pw="cell-${columnHeader}-${index}"]`);
+      return this.parent.get().locator(`td[data-nc="cell-${columnHeader}-${index}"]`);
     }
   }
 

scripts/playwright/pages/Dashboard/common/ProjectMenu/index.ts

@@ -10,11 +10,11 @@ export class ProjectMenuObject extends BasePage {
   }
 
   get() {
-    return this.rootPage.locator(`[pw-data="nc-fields-menu"]`);
+    return this.rootPage.locator(`[data-nc="nc-fields-menu"]`);
   }
 
   async toggle() {
-    await this.rootPage.locator('[pw-data="nc-project-menu"]').click();
+    await this.rootPage.locator('[data-nc="nc-project-menu"]').click();
   }
 
   async click({ menu, subMenu }: { menu: string; subMenu: string }) {

scripts/playwright/pages/Dashboard/common/Toolbar/Actions/index.ts

@@ -13,7 +13,7 @@ export class ToolbarActionsPage extends BasePage {
   }
 
   get() {
-    return this.rootPage.locator(`[pw-data="toolbar-actions"]`);
+    return this.rootPage.locator(`[data-nc="toolbar-actions"]`);
   }
 
   // todo: use enum

scripts/playwright/pages/Dashboard/common/Toolbar/Fields.ts

@@ -11,14 +11,14 @@ export class ToolbarFieldsPage extends BasePage {
   }
 
   get() {
-    return this.rootPage.locator(`[pw-data="nc-fields-menu"]`);
+    return this.rootPage.locator(`[data-nc="nc-fields-menu"]`);
   }
 
   // todo: Click and toggle are similar method. Remove one of them
   async toggle({ title, isLocallySaved }: { title: string; isLocallySaved?: boolean }) {
     await this.toolbar.clickFields();
     const toggleColumn = this.get()
-      .locator(`[pw-data="nc-fields-menu-${title}"]`)
+      .locator(`[data-nc="nc-fields-menu-${title}"]`)
       .locator('input[type="checkbox"]')
       .click();
 
@@ -32,7 +32,7 @@ export class ToolbarFieldsPage extends BasePage {
   }
 
   async verify({ title, checked }: { title: string; checked: boolean }) {
-    const checkbox = this.get().locator(`[pw-data="nc-fields-menu-${title}"]`).locator('input[type="checkbox"]');
+    const checkbox = this.get().locator(`[data-nc="nc-fields-menu-${title}"]`).locator('input[type="checkbox"]');
 
     if (checked) {
       await expect(checkbox).toBeChecked();
@@ -43,7 +43,7 @@ export class ToolbarFieldsPage extends BasePage {
 
   async click({ title, isLocallySaved }: { title: string; isLocallySaved?: boolean }) {
     await this.waitForResponse({
-      uiAction: this.get().locator(`[pw-data="nc-fields-menu-${title}"]`).locator('input[type="checkbox"]').click(),
+      uiAction: this.get().locator(`[data-nc="nc-fields-menu-${title}"]`).locator('input[type="checkbox"]').click(),
       requestUrlPathToMatch: isLocallySaved ? '/api/v1/db/public/' : '/api/v1/db/data/noco/',
       httpMethodsToMatch: ['GET'],
     });

scripts/playwright/pages/Dashboard/common/Toolbar/Filter.ts

@@ -11,7 +11,7 @@ export class ToolbarFilterPage extends BasePage {
   }
 
   get() {
-    return this.rootPage.locator(`[pw-data="nc-filter-menu"]`);
+    return this.rootPage.locator(`[data-nc="nc-filter-menu"]`);
   }
 
   async verify({ index, column, operator, value }: { index: number; column: string; operator: string; value: string }) {
@@ -24,7 +24,7 @@ export class ToolbarFilterPage extends BasePage {
 
   async verifyFilter({ title }: { title: string }) {
     await expect(
-      this.get().locator(`[pw-data="nc-fields-menu-${title}"]`).locator('input[type="checkbox"]')
+      this.get().locator(`[data-nc="nc-fields-menu-${title}"]`).locator('input[type="checkbox"]')
     ).toBeChecked();
   }
 

scripts/playwright/pages/Dashboard/common/Toolbar/ShareView.ts

@@ -14,22 +14,22 @@ export class ToolbarShareViewPage extends BasePage {
   }
 
   async enablePassword(pwd: string) {
-    await this.get().locator(`[data-pw="nc-modal-share-view__with-password"]`).click();
+    await this.get().locator(`[data-nc="nc-modal-share-view__with-password"]`).click();
-    await this.get().locator(`[data-pw="nc-modal-share-view__password"]`).fill(pwd);
+    await this.get().locator(`[data-nc="nc-modal-share-view__password"]`).fill(pwd);
-    await this.get().locator(`[data-pw="nc-modal-share-view__save-password"]`).click();
+    await this.get().locator(`[data-nc="nc-modal-share-view__save-password"]`).click();
     await this.verifyToast({ message: 'Successfully updated' });
   }
 
   async disablePassword() {
-    await this.get().locator(`[data-pw="nc-modal-share-view__with-password"`).click();
+    await this.get().locator(`[data-nc="nc-modal-share-view__with-password"`).click();
   }
 
   async toggleDownload() {
-    await this.get().locator(`[data-pw="nc-modal-share-view__with-csv-download"]`).click();
+    await this.get().locator(`[data-nc="nc-modal-share-view__with-csv-download"]`).click();
   }
 
   async getShareLink() {
-    return await this.get().locator(`[data-pw="nc-modal-share-view__link"]`).innerText();
+    return await this.get().locator(`[data-nc="nc-modal-share-view__link"]`).innerText();
   }
 
   async close() {
@@ -37,6 +37,6 @@ export class ToolbarShareViewPage extends BasePage {
   }
 
   async toggleSurveyMode() {
-    await this.get().locator(`[data-pw="nc-modal-share-view__survey-mode"]`).click();
+    await this.get().locator(`[data-nc="nc-modal-share-view__survey-mode"]`).click();
   }
 }

scripts/playwright/pages/Dashboard/common/Toolbar/Sort.ts

@@ -11,7 +11,7 @@ export class ToolbarSortPage extends BasePage {
   }
 
   get() {
-    return this.rootPage.locator(`[pw-data="nc-sorts-menu"]`);
+    return this.rootPage.locator(`[data-nc="nc-sorts-menu"]`);
   }
 
   async verify({ index, column, direction }: { index: number; column: string; direction: string }) {
@@ -78,6 +78,6 @@ export class ToolbarSortPage extends BasePage {
   }
 
   click({ title }: { title: string }) {
-    return this.get().locator(`[pw-data="nc-fields-menu-${title}"]`).locator('input[type="checkbox"]').click();
+    return this.get().locator(`[data-nc="nc-fields-menu-${title}"]`).locator('input[type="checkbox"]').click();
   }
 }

scripts/playwright/pages/Dashboard/index.ts

@@ -61,7 +61,7 @@ export class DashboardPage extends BasePage {
   }
 
   async gotoSettings() {
-    await this.rootPage.locator('[pw-data="nc-project-menu"]').click();
+    await this.rootPage.locator('[data-nc="nc-project-menu"]').click();
     await this.rootPage.locator('div.nc-project-menu-item:has-text(" Team & Settings")').click();
   }
 
@@ -96,7 +96,7 @@ export class DashboardPage extends BasePage {
           state: 'visible',
         });
     } else {
-      await this.get().locator('[pw-data="grid-id-column"]').waitFor({
+      await this.get().locator('[data-nc="grid-id-column"]').waitFor({
         state: 'visible',
       });
     }
@@ -106,13 +106,13 @@ export class DashboardPage extends BasePage {
     // wait active tab animation to finish
     await expect
       .poll(async () => {
-        return await this.tabBar.locator(`[data-pw="nc-root-tabs-${title}"]`).evaluate(el => {
+        return await this.tabBar.locator(`[data-nc="nc-root-tabs-${title}"]`).evaluate(el => {
           return window.getComputedStyle(el).getPropertyValue('color');
         });
       })
       .toBe('rgb(67, 81, 232)'); // active tab text color
 
-    await this.get().locator('[pw-data="grid-load-spinner"]').waitFor({ state: 'hidden' });
+    await this.get().locator('[data-nc="grid-load-spinner"]').waitFor({ state: 'hidden' });
 
     if (mode === 'standard') {
       await expect(this.rootPage).toHaveURL(
@@ -144,7 +144,7 @@ export class DashboardPage extends BasePage {
   }
 
   async signOut() {
-    await this.rootPage.locator('[pw-data="nc-project-menu"]').click();
+    await this.rootPage.locator('[data-nc="nc-project-menu"]').click();
     const projMenu = await this.rootPage.locator('.nc-dropdown-project-menu');
     await projMenu.locator('[data-menu-id="account"]:visible').click();
     await this.rootPage.locator('div.nc-project-menu-item:has-text("Sign Out"):visible').click();
@@ -152,7 +152,7 @@ export class DashboardPage extends BasePage {
   }
 
   async validateProjectMenu(param: { role: string; mode?: string }) {
-    await this.rootPage.locator('[pw-data="nc-project-menu"]').click();
+    await this.rootPage.locator('[data-nc="nc-project-menu"]').click();
     const pMenu = this.rootPage.locator(`.nc-dropdown-project-menu:visible`);
 
     // menu items
@@ -186,11 +186,11 @@ export class DashboardPage extends BasePage {
     for (const item of menuItems[param.role]) {
       await expect(pMenu).toContainText(item);
     }
-    await this.rootPage.locator('[pw-data="nc-project-menu"]').click();
+    await this.rootPage.locator('[data-nc="nc-project-menu"]').click();
   }
 
   // Wait for the loader i.e the loader than appears when rows are being fetched, saved etc on the top right of dashboard
   async waitForLoaderToDisappear() {
-    await this.rootPage.locator('[pw-data="nc-loading"]').waitFor({ state: 'hidden' });
+    await this.rootPage.locator('[data-nc="nc-loading"]').waitFor({ state: 'hidden' });
   }
 }

scripts/playwright/pages/LoginPage/index.ts

@@ -22,16 +22,16 @@ export class LoginPage extends BasePage {
   async fillEmail({ email, withoutPrefix }: { email: string; withoutPrefix?: boolean }) {
     if (!withoutPrefix) email = this.prefixEmail(email);
 
-    await this.get().locator(`[pw-data="nc-form-signin__email"]`).waitFor();
+    await this.get().locator(`[data-nc="nc-form-signin__email"]`).waitFor();
-    await this.get().locator(`[pw-data="nc-form-signin__email"]`).fill(email);
+    await this.get().locator(`[data-nc="nc-form-signin__email"]`).fill(email);
   }
 
   async fillPassword(password: string) {
-    await this.get().locator(`[pw-data="nc-form-signin__password"]`).fill(password);
+    await this.get().locator(`[data-nc="nc-form-signin__password"]`).fill(password);
   }
 
   async submit() {
-    await this.get().locator(`[pw-data="nc-form-signin__submit"]`).click();
+    await this.get().locator(`[data-nc="nc-form-signin__submit"]`).click();
 
     // todo: Login api can take some time to respond if server is under load
     await expect(this.rootPage).toHaveURL('http://localhost:3000/#/', {

scripts/playwright/pages/ProjectsPage/index.ts

@@ -13,7 +13,7 @@ export class ProjectsPage extends BasePage {
   }
 
   get() {
-    return this.rootPage.locator('[pw-data="projects-container"]');
+    return this.rootPage.locator('[data-nc="projects-container"]');
   }
 
   // create project
@@ -46,7 +46,7 @@ export class ProjectsPage extends BasePage {
   }
 
   async reloadProjects() {
-    const reloadUiAction = this.get().locator('[pw-data="projects-reload-button"]').click();
+    const reloadUiAction = this.get().locator('[data-nc="projects-reload-button"]').click();
     await this.waitForResponse({
       uiAction: reloadUiAction,
       requestUrlPathToMatch: '/api/v1/db/meta/projects',
@@ -121,7 +121,7 @@ export class ProjectsPage extends BasePage {
   async deleteProject({ title, withoutPrefix }: { title: string; withoutPrefix?: boolean }) {
     if (!withoutPrefix) title = this.prefixTitle(title);
 
-    await this.get().locator(`[pw-data="delete-project-${title}"]`).click();
+    await this.get().locator(`[data-nc="delete-project-${title}"]`).click();
     await this.rootPage.locator(`button:has-text("Yes")`).click();
 
     await this.get().locator('.ant-table-row', { hasText: title }).waitFor({ state: 'hidden' });

scripts/playwright/pages/SharedForm/index.ts

@@ -16,7 +16,7 @@ export class SharedFormPage extends BasePage {
 
   async submit() {
     await this.waitForResponse({
-      uiAction: this.get().locator('[pw-data="shared-form-submit-button"]').click(),
+      uiAction: this.get().locator('[data-nc="shared-form-submit-button"]').click(),
       httpMethodsToMatch: ['POST'],
       requestUrlPathToMatch: '/rows',
     });