diff --git a/e2e/core/card-view/card-view-component.e2e.ts b/e2e/core/card-view/card-view-component.e2e.ts
index 4e1f9f85be..fda813fc4f 100644
--- a/e2e/core/card-view/card-view-component.e2e.ts
+++ b/e2e/core/card-view/card-view-component.e2e.ts
@@ -286,6 +286,19 @@ describe('CardView Component', () => {
 
     });
 
+    it('[C306895] Should display the form field as editable and clickable depending on the \'Editable\' toggle mode.', async () => {
+        const message = 'clickable updated';
+        await cardViewPageComponent.clickOnResetButton();
+        await expect(await cardViewPageComponent.getClickableValue()).toContain('click here');
+
+        await cardViewPageComponent.updateClickableField(message);
+        await expect(await cardViewPageComponent.hasCardViewConsoleLog(message)).toContain(`[This is clickable ] - ${message}`);
+
+        await cardViewPageComponent.clickOnResetButton();
+        await cardViewPageComponent.updateClickableField('');
+        await expect(await cardViewPageComponent.hasCardViewConsoleLog('[This is clickable ] -' )).toContain('[This is clickable ] -');
+    });
+
     it('[C279936] Should not be possible edit any parameter when editable property is false', async () => {
         await cardViewPageComponent.disableEdit();
 
diff --git a/e2e/pages/adf/cardViewComponentPage.ts b/e2e/pages/adf/cardViewComponentPage.ts
index a1744a9189..944e03d1ef 100644
--- a/e2e/pages/adf/cardViewComponentPage.ts
+++ b/e2e/pages/adf/cardViewComponentPage.ts
@@ -36,6 +36,7 @@ export class CardViewComponentPage {
     editableSwitch: ElementFinder = element(by.id('app-toggle-editable'));
     clearDateSwitch: ElementFinder = element(by.id('app-toggle-clear-date'));
     noneOptionSwitch: ElementFinder = element(by.id('app-toggle-none-option'));
+    clickableField: ElementFinder = element(by.css(`[data-automation-id="card-textitem-toggle-click"]`));
 
     async clickOnAddButton(): Promise<void> {
         await BrowserActions.click(this.addButton);
@@ -225,6 +226,27 @@ export class CardViewComponentPage {
             }
     }
 
+    async getClickableValue(): Promise<string> {
+        return this.clickableField.getText();
+    }
+
+    async updateClickableField(text: string): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.clickableField);
+        await BrowserActions.click(this.clickableField);
+        const inputField = element(by.css('input[data-automation-id="card-textitem-editinput-click"]'));
+        await BrowserVisibility.waitUntilElementIsPresent(inputField);
+        await BrowserActions.clearSendKeys(inputField, text);
+        const save = element(by.css('[data-automation-id="card-textitem-update-click"]'));
+        await BrowserVisibility.waitUntilElementIsVisible(save);
+        await BrowserActions.click(save);
+    }
+
+    async hasCardViewConsoleLog(text: string): Promise<string> {
+        const cardViewConsole = element(by.cssContainingText('.app-console', text));
+        await BrowserVisibility.waitUntilElementIsVisible(cardViewConsole);
+        return cardViewConsole.getText();
+    }
+
     async clearIntField(): Promise<void> {
          await this.intField.clear();
     }