diff --git a/cypress/integration/clients_test.spec.ts b/cypress/integration/clients_test.spec.ts
index 4683a7f9a8..2b2898e51e 100644
--- a/cypress/integration/clients_test.spec.ts
+++ b/cypress/integration/clients_test.spec.ts
@@ -7,7 +7,7 @@ import CreateClientPage from "../support/pages/admin_console/manage/clients/Crea
 import adminClient from "../support/util/AdminClient";
 import { keycloakBefore } from "../support/util/keycloak_hooks";
 import RoleMappingTab from "../support/pages/admin_console/manage/RoleMappingTab";
-import CreateRealmRolePage from "../support/pages/admin_console/manage/realm_roles/CreateRealmRolePage";
+import createRealmRolePage from "../support/pages/admin_console/manage/realm_roles/CreateRealmRolePage";
 import AssociatedRolesPage from "../support/pages/admin_console/manage/realm_roles/AssociatedRolesPage";
 import ClientRolesTab from "../support/pages/admin_console/manage/clients/ClientRolesTab";
 import InitialAccessTokenTab from "../support/pages/admin_console/manage/clients/tabs/InitialAccessTokenTab";
@@ -22,7 +22,6 @@ const loginPage = new LoginPage();
 const associatedRolesPage = new AssociatedRolesPage();
 const createClientPage = new CreateClientPage();
 const clientDetailsPage = new ClientDetailsPage();
-const createRealmRolePage = new CreateRealmRolePage();
 const commonPage = new CommonPage();
 
 describe("Clients test", () => {
diff --git a/cypress/integration/realm_roles_test.spec.ts b/cypress/integration/realm_roles_test.spec.ts
index 2f53926a26..d4e4ad5737 100644
--- a/cypress/integration/realm_roles_test.spec.ts
+++ b/cypress/integration/realm_roles_test.spec.ts
@@ -3,11 +3,12 @@ import Masthead from "../support/pages/admin_console/Masthead";
 import ModalUtils from "../support/util/ModalUtils";
 import ListingPage from "../support/pages/admin_console/ListingPage";
 import SidebarPage from "../support/pages/admin_console/SidebarPage";
-import CreateRealmRolePage from "../support/pages/admin_console/manage/realm_roles/CreateRealmRolePage";
+import createRealmRolePage from "../support/pages/admin_console/manage/realm_roles/CreateRealmRolePage";
 import AssociatedRolesPage from "../support/pages/admin_console/manage/realm_roles/AssociatedRolesPage";
 import { keycloakBefore } from "../support/util/keycloak_hooks";
 import adminClient from "../support/util/AdminClient";
 import ClientRolesTab from "../support/pages/admin_console/manage/clients/ClientRolesTab";
+import KeyValueInput from "../support/pages/admin_console/manage/KeyValueInput";
 
 let itemId = "realm_role_crud";
 const loginPage = new LoginPage();
@@ -15,7 +16,6 @@ const masthead = new Masthead();
 const modalUtils = new ModalUtils();
 const sidebarPage = new SidebarPage();
 const listingPage = new ListingPage();
-const createRealmRolePage = new CreateRealmRolePage();
 const associatedRolesPage = new AssociatedRolesPage();
 const rolesTab = new ClientRolesTab();
 
@@ -224,6 +224,8 @@ describe("Realm roles test", () => {
   describe("edit role details", () => {
     const editRoleName = "going to edit";
     const description = "some description";
+    const updateDescription = "updated description";
+
     before(() =>
       adminClient.createRealmRole({
         name: editRoleName,
@@ -236,10 +238,45 @@ describe("Realm roles test", () => {
     it("should edit realm role details", () => {
       listingPage.itemExist(editRoleName).goToItemDetails(editRoleName);
       createRealmRolePage.checkNameDisabled().checkDescription(description);
-      const updateDescription = "updated description";
       createRealmRolePage.updateDescription(updateDescription).save();
       masthead.checkNotificationMessage("The role has been saved", true);
       createRealmRolePage.checkDescription(updateDescription);
     });
+
+    it("should revert realm role", () => {
+      listingPage.itemExist(editRoleName).goToItemDetails(editRoleName);
+      createRealmRolePage.checkDescription(updateDescription);
+      createRealmRolePage.updateDescription("going to revert").cancel();
+      createRealmRolePage.checkDescription(updateDescription);
+    });
+
+    const keyValue = new KeyValueInput("attribute");
+    it("should add attribute", () => {
+      listingPage.itemExist(editRoleName).goToItemDetails(editRoleName);
+
+      createRealmRolePage.goToAttributesTab();
+      keyValue.fillKeyValue({ key: "one", value: "1" }).validateRows(2);
+      keyValue.save();
+      masthead.checkNotificationMessage("The role has been saved", true);
+      keyValue.validateRows(1);
+    });
+
+    it("should add attribute multiple", () => {
+      listingPage.itemExist(editRoleName).goToItemDetails(editRoleName);
+
+      createRealmRolePage.goToAttributesTab();
+      keyValue
+        .fillKeyValue({ key: "two", value: "2" }, 1)
+        .fillKeyValue({ key: "three", value: "3" }, 2)
+        .save()
+        .validateRows(3);
+    });
+
+    it("should delete attribute", () => {
+      listingPage.itemExist(editRoleName).goToItemDetails(editRoleName);
+      createRealmRolePage.goToAttributesTab();
+
+      keyValue.deleteRow(1).save().validateRows(2);
+    });
   });
 });
diff --git a/cypress/support/pages/admin_console/manage/KeyValueInput.ts b/cypress/support/pages/admin_console/manage/KeyValueInput.ts
new file mode 100644
index 0000000000..9fd8546923
--- /dev/null
+++ b/cypress/support/pages/admin_console/manage/KeyValueInput.ts
@@ -0,0 +1,41 @@
+import type { KeyValueType } from "../../../../../src/components/attribute-form/attribute-convert";
+
+export default class KeyValueInput {
+  private name: string;
+
+  constructor(name: string) {
+    this.name = name;
+  }
+
+  private getRow(row: number) {
+    return `table tr:nth-child(${row + 1})`;
+  }
+
+  fillKeyValue({ key, value }: KeyValueType, row: number | undefined = 0) {
+    cy.get(`${this.getRow(row)} [data-testid=${this.name}-key-input]`)
+      .clear()
+      .type(key);
+    cy.get(`${this.getRow(row)} [data-testid=${this.name}-value-input]`)
+      .clear()
+      .type(value);
+    cy.findByTestId(`${this.name}-add-row`).click();
+    return this;
+  }
+
+  deleteRow(row: number) {
+    cy.get(`${this.getRow(row)} button`).click();
+    return this;
+  }
+
+  validateRows(num: number) {
+    cy.get(".kc-attributes__table tbody")
+      .children()
+      .should("have.length", num + 1);
+    return this;
+  }
+
+  save() {
+    cy.findByTestId("save-attributes").click();
+    return this;
+  }
+}
diff --git a/cypress/support/pages/admin_console/manage/realm_roles/CreateRealmRolePage.ts b/cypress/support/pages/admin_console/manage/realm_roles/CreateRealmRolePage.ts
index afb0ba4c14..bfc1929d54 100644
--- a/cypress/support/pages/admin_console/manage/realm_roles/CreateRealmRolePage.ts
+++ b/cypress/support/pages/admin_console/manage/realm_roles/CreateRealmRolePage.ts
@@ -1,18 +1,9 @@
-export default class CreateRealmRolePage {
-  realmRoleNameInput: string;
-  realmRoleNameError: string;
-  realmRoleDescriptionInput: string;
-  saveBtn: string;
-  cancelBtn: string;
-
-  constructor() {
-    this.realmRoleNameInput = "#kc-name";
-    this.realmRoleNameError = "#kc-name-helper";
-    this.realmRoleDescriptionInput = "#kc-role-description";
-
-    this.saveBtn = "realm-roles-save-button";
-    this.cancelBtn = '[type="button"]';
-  }
+class CreateRealmRolePage {
+  private realmRoleNameInput = "#kc-name";
+  private realmRoleNameError = "#kc-name-helper";
+  private realmRoleDescriptionInput = "#kc-role-description";
+  private saveBtn = "realm-roles-save-button";
+  private cancelBtn = "cancel";
 
   //#region General Settings
   fillRealmRoleData(name: string, description = "") {
@@ -66,8 +57,17 @@ export default class CreateRealmRolePage {
   }
 
   cancel() {
-    cy.get(this.cancelBtn).click();
+    cy.findByTestId(this.cancelBtn).click();
 
     return this;
   }
+
+  goToAttributesTab() {
+    cy.intercept("admin/realms/master/roles-by-id/*").as("load");
+    cy.get(".kc-attributes-tab > button").click();
+    cy.wait(["@load", "@load"]);
+    return this;
+  }
 }
+
+export default new CreateRealmRolePage();
diff --git a/src/realm-roles/RealmRoleForm.tsx b/src/realm-roles/RealmRoleForm.tsx
index ec249e1628..1c98307ecf 100644
--- a/src/realm-roles/RealmRoleForm.tsx
+++ b/src/realm-roles/RealmRoleForm.tsx
@@ -100,6 +100,7 @@ export const RealmRoleForm = ({
               {t("common:save")}
             </Button>
             <Button
+              data-testid="cancel"
               onClick={() =>
                 editMode ? reset() : history.push(`/${realmName}/roles`)
               }