diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 0fd653a20c..d3c2c5ad9e 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -584,7 +584,7 @@ const onFormItemClick = (element: any) => {
>
-
+
{{ element.label || element.title }}
*
@@ -607,7 +607,7 @@ const onFormItemClick = (element: any) => {
{{ element.label || element.title }}
-
+
{{ element.label || element.title }}
diff --git a/tests/playwright/pages/Dashboard/Form/index.ts b/tests/playwright/pages/Dashboard/Form/index.ts
index c288acfafb..cef6fcc50b 100644
--- a/tests/playwright/pages/Dashboard/Form/index.ts
+++ b/tests/playwright/pages/Dashboard/Form/index.ts
@@ -22,14 +22,16 @@ export class FormPage extends BasePage {
readonly formSubHeading: Locator;
readonly afterSubmitMsg: Locator;
+ readonly formFields: Locator;
+
constructor(dashboard: DashboardPage) {
super(dashboard.rootPage);
this.dashboard = dashboard;
this.toolbar = new ToolbarPage(this);
this.topbar = new TopbarPage(this);
- this.addAllButton = dashboard.get().locator('[data-testid="nc-form-add-all"]');
- this.removeAllButton = dashboard.get().locator('[data-testid="nc-form-remove-all"]');
+ this.addAllButton = dashboard.get().locator('[data-testid="nc-form-show-all-fields"]').locator('.nc-switch');
+ this.removeAllButton = dashboard.get().locator('[data-testid="nc-form-show-all-fields"]').locator('.nc-switch');
this.submitButton = dashboard.get().locator('[data-testid="nc-form-submit"]');
this.showAnotherFormRadioButton = dashboard.get().locator('[data-testid="nc-form-checkbox-submit-another-form"]');
@@ -40,6 +42,8 @@ export class FormPage extends BasePage {
this.formHeading = dashboard.get().locator('[data-testid="nc-form-heading"]');
this.formSubHeading = dashboard.get().locator('[data-testid="nc-form-sub-heading"]');
this.afterSubmitMsg = dashboard.get().locator('[data-testid="nc-form-after-submit-msg"]');
+
+ this.formFields = dashboard.get().locator('.nc-form-fields-list');
}
get() {
@@ -50,21 +54,21 @@ export class FormPage extends BasePage {
return this.dashboard.get().locator('[data-testid="nc-form-wrapper-submit"]');
}
- getFormHiddenColumn() {
- return this.get().locator('[data-testid="nc-form-hidden-column"]');
- }
+ // getFormHiddenColumn() {
+ // return this.get().locator('[data-testid="nc-form-hidden-column"]');
+ // }
getFormFields() {
return this.get().locator('[data-testid="nc-form-fields"]');
}
- getDragNDropToHide() {
- return this.get().locator('[data-testid="nc-drag-n-drop-to-hide"]');
- }
-
- getFormFieldsRemoveIcon() {
- return this.get().locator('[data-testid="nc-field-remove-icon"]');
- }
+ // getDragNDropToHide() {
+ // return this.get().locator('[data-testid="nc-drag-n-drop-to-hide"]');
+ // }
+ //
+ // getFormFieldsRemoveIcon() {
+ // return this.get().locator('[data-testid="nc-field-remove-icon"]');
+ // }
getFormFieldsRequired() {
return this.get().locator('[data-testid="nc-form-input-required"] + button');
@@ -124,8 +128,11 @@ export class FormPage extends BasePage {
const dst = this.get().locator(`[data-testid="nc-drag-n-drop-to-hide"]`);
await src.dragTo(dst);
} else if (mode === 'hideField') {
- const src = this.get().locator(`.nc-form-drag-${field.replace(' ', '')}`);
- await src.locator(`[data-testid="nc-field-remove-icon"]`).click();
+ // const src = this.get().locator(`.nc-form-drag-${field.replace(' ', '')}`);
+ // await src.locator(`[data-testid="nc-field-remove-icon"]`).click();
+
+ // in form-v2, hide field will be using right sidebar
+ await this.formFields.locator(`[data-testid="nc-form-field-item-${field}"]`).locator('.nc-switch').click();
}
}
@@ -141,15 +148,13 @@ export class FormPage extends BasePage {
await src.dragTo(dst, { trial: true });
await src.dragTo(dst);
} else if (mode === 'clickField') {
- const src = this.get().locator(`[data-testid="nc-form-hidden-column-${field}"]`);
- await src.click();
+ // const src = this.get().locator(`[data-testid="nc-form-hidden-column-${field}"]`);
+ // await src.click();
+ await this.formFields.locator(`[data-testid="nc-form-field-item-${field}"]`).locator('.nc-switch').click();
}
}
async removeAllFields() {
- // TODO: Otherwise form input boxes are not visible sometimes
- await this.rootPage.waitForTimeout(1000);
-
await this.removeAllButton.click();
}
diff --git a/tests/playwright/tests/db/views/viewForm.spec.ts b/tests/playwright/tests/db/views/viewForm.spec.ts
index 82fc2db602..a30c868a69 100644
--- a/tests/playwright/tests/db/views/viewForm.spec.ts
+++ b/tests/playwright/tests/db/views/viewForm.spec.ts
@@ -49,17 +49,18 @@ test.describe('Form view', () => {
fields: ['LastUpdate', 'Country', 'Cities'],
});
+ // drag-drop feature to remove a field will not be supported in form v2
// remove & verify (drag-drop)
- await form.removeField({ field: 'Cities', mode: 'dragDrop' });
- await form.verifyFormViewFieldsOrder({
- fields: ['LastUpdate', 'Country'],
- });
+ // await form.removeField({ field: 'Cities', mode: 'dragDrop' });
+ // await form.verifyFormViewFieldsOrder({
+ // fields: ['LastUpdate', 'Country'],
+ // });
// add & verify (drag-drop)
- await form.addField({ field: 'Cities', mode: 'dragDrop' });
- await form.verifyFormViewFieldsOrder({
- fields: ['LastUpdate', 'Country', 'Cities'],
- });
+ // await form.addField({ field: 'Cities', mode: 'dragDrop' });
+ // await form.verifyFormViewFieldsOrder({
+ // fields: ['LastUpdate', 'Country', 'Cities'],
+ // });
// remove & verify (hide field button)
await form.removeField({ field: 'Cities', mode: 'hideField' });
@@ -88,7 +89,7 @@ test.describe('Form view', () => {
});
});
- test('Form elements validation', async ({ page }) => {
+ test('Form elements validation', async () => {
// close 'Team & Auth' tab
await dashboard.closeTab({ title: 'Team & Auth' });
await dashboard.treeView.openTable({ title: 'Country' });