diff --git a/ui/components/accounts/AccountsListRow.vue b/ui/components/accounts/AccountsListRow.vue
index 90ccb51fed..1f4622c07b 100644
--- a/ui/components/accounts/AccountsListRow.vue
+++ b/ui/components/accounts/AccountsListRow.vue
@@ -7,22 +7,22 @@
     <oc-table-cell v-text="account.displayName || '-'" />
     <oc-table-cell v-text="account.mail" />
     <oc-table-cell>
-      <oc-button :class="`accounts-roles-select-trigger-${account.id}`" variation="raw">
-        <span class="uk-flex uk-flex-middle">
+      <oc-button :id="`accounts-roles-select-trigger-${account.id}`" class="accounts-roles-select-trigger" variation="raw">
+        <span class="uk-flex uk-flex-middle accounts-roles-current-role">
           {{ currentRole ? currentRole.displayName : $gettext('Select role') }}
           <oc-icon name="expand_more" aria-hidden="true" />
         </span>
       </oc-button>
       <oc-drop
         :drop-id="`accounts-roles-select-dropdown-${account.id}`"
-        :toggle="`.accounts-roles-select-trigger-${account.id}`"
+        :toggle="`#accounts-roles-select-trigger-${account.id}`"
         mode="click"
         close-on-click
         :options="{ delayHide: 0 }"
       >
         <ul class="uk-list">
           <li v-for="role in roles" :key="role.id">
-            <label>
+            <label class="accounts-roles-dropdown-role">
               <input
                 type="radio"
                 class="oc-radiobutton"
diff --git a/ui/tests/acceptance/features/accounts.feature b/ui/tests/acceptance/features/accounts.feature
index 24681d8c38..0153eb993d 100644
--- a/ui/tests/acceptance/features/accounts.feature
+++ b/ui/tests/acceptance/features/accounts.feature
@@ -10,4 +10,10 @@ Feature: Accounts
 		And user "reva" should be displayed in the accounts list on the WebUI
 		And user "richard" should be displayed in the accounts list on the WebUI
 
-
+	Scenario: change users role
+		Given user "user1" has been created with default attributes
+		And user "user1" has logged in using the webUI
+		When the user browses to the accounts page
+		Then user "einstein" should be displayed in the accounts list on the WebUI
+		When the users changes the role of user "einstein" to "Admin role" using the WebUI
+		Then the displayed role of user "einstein" should be "Admin role" on the WebUI
diff --git a/ui/tests/acceptance/pageobjects/accountsPage.js b/ui/tests/acceptance/pageobjects/accountsPage.js
index 66f263685e..0b45dea3cd 100644
--- a/ui/tests/acceptance/pageobjects/accountsPage.js
+++ b/ui/tests/acceptance/pageobjects/accountsPage.js
@@ -21,6 +21,25 @@ module.exports = {
           user = result
         })
       return user.value
+    },
+
+    selectRole: function (username, role) {
+      const roleSelector =
+        util.format(this.elements.rowByUsername.selector, username) +
+        util.format(this.elements.roleInRolesDropdown.selector, role)
+
+      return this
+        .click('@rolesDropdownTrigger')
+        .waitForElementVisible(roleSelector)
+        .click(roleSelector)
+    },
+
+    checkUsersRole: function (username, role) {
+      const roleSelector =
+        util.format(this.elements.rowByUsername.selector, username) +
+        util.format(this.elements.currentRole.selector, role)
+
+      return this.useXpath().expect.element(roleSelector).to.be.visible
     }
   },
 
@@ -36,6 +55,22 @@ module.exports = {
     userInAccountsList: {
       selector: '//table//td[text()="%s"]',
       locateStrategy: 'xpath'
+    },
+    rowByUsername: {
+      selector: '//table//td[text()="%s"]/ancestor::tr',
+      locateStrategy: 'xpath'
+    },
+    currentRole: {
+      selector: '//span[contains(@class, "accounts-roles-current-role") and text()="%s"]',
+      locateStrategy: 'xpath'
+    },
+    roleInRolesDropdown: {
+      selector: '//label[@class="accounts-roles-dropdown-role" and normalize-space()="%s"]',
+      locateStrategy: 'xpath'
+    },
+    rolesDropdownTrigger: {
+      selector: '//button[@class="accounts-roles-select-trigger"]',
+      locateStrategy: 'xpath'
     }
   }
 }
diff --git a/ui/tests/acceptance/stepDefinitions/accountsContext.js b/ui/tests/acceptance/stepDefinitions/accountsContext.js
index 7cbd108007..fbbcd7952c 100644
--- a/ui/tests/acceptance/stepDefinitions/accountsContext.js
+++ b/ui/tests/acceptance/stepDefinitions/accountsContext.js
@@ -11,3 +11,11 @@ Then('user {string} should be displayed in the accounts list on the WebUI', asyn
   const userListed = await client.page.accountsPage().isUserListed(username)
   return assert.strictEqual(userListed, username)
 })
+
+When('the users changes the role of user {string} to {string} using the WebUI', function (username, role) {
+  return client.page.accountsPage().selectRole(username, role)
+})
+
+Then('the displayed role of user {string} should be {string} on the WebUI', function (username, role) {
+  return client.page.accountsPage().checkUsersRole(username, role)
+})