diff --git a/packages/nc-gui/components/account/Token.vue b/packages/nc-gui/components/account/Token.vue
index d7aaeb142b..8eeea51946 100644
--- a/packages/nc-gui/components/account/Token.vue
+++ b/packages/nc-gui/components/account/Token.vue
@@ -160,7 +160,7 @@ const descriptionInput = ref((el) => {
                   <span v-else> {{ $t('general.show') }} </span>
                 </template>
 
-                <a-button type="text" class="!rounded-md" @click="record.show = !record.show">
+                <a-button type="text" class="!rounded-md nc-toggle-token-visibility" @click="record.show = !record.show">
                   <template #icon>
                     <MaterialSymbolsVisibilityOff v-if="record.show" class="flex mx-auto h-[1.1rem]" />
                     <MaterialSymbolsVisibility v-else class="flex mx-auto h-[1rem]" />
diff --git a/tests/playwright/pages/Account/Token.ts b/tests/playwright/pages/Account/Token.ts
index 3abed37ee4..4bed02e320 100644
--- a/tests/playwright/pages/Account/Token.ts
+++ b/tests/playwright/pages/Account/Token.ts
@@ -29,6 +29,15 @@ export class AccountTokenPage extends BasePage {
     await this.verifyToast({ message: 'Token generated successfully' });
   }
 
+  getTokenRow({ idx = 0 }) {
+    return this.get().locator(`tr:nth-child(${idx})`);
+  }
+
+  async toggleVisibility({ idx = 0 }) {
+    const row = this.getTokenRow({ idx });
+    await row.locator('.nc-toggle-token-visibility').click();
+  }
+
   async openRowActionMenu({ description }: { description: string }) {
     const userRow = this.get().locator(`tr:has-text("${description}")`);
     return userRow.locator(`.nc-token-menu`).click();