diff --git a/packages/app/src/components/header/header-right-items/sync-user.tsx b/packages/app/src/components/header/header-right-items/sync-user.tsx
index 87d7b2f603..3d7fba5299 100644
--- a/packages/app/src/components/header/header-right-items/sync-user.tsx
+++ b/packages/app/src/components/header/header-right-items/sync-user.tsx
@@ -12,7 +12,11 @@ export const SyncUser = () => {
       <CloudInsyncIcon />
     </IconButton>
   ) : (
-    <IconButton iconSize="middle" onClick={triggerLoginModal}>
+    <IconButton
+      iconSize="middle"
+      data-testid="cloud-unsync-icon"
+      onClick={triggerLoginModal}
+    >
       <CloudUnsyncedIcon />
     </IconButton>
   );
diff --git a/tests/login.spec.ts b/tests/login.spec.ts
index 520ab1495e..c68c298360 100644
--- a/tests/login.spec.ts
+++ b/tests/login.spec.ts
@@ -4,7 +4,7 @@ import { loadPage } from './libs/load-page';
 loadPage();
 
 test.describe('Login Flow', () => {
-  test('Open Login Modal', async ({ page }) => {
+  test('Open login modal by click current workspace', async ({ page }) => {
     await page.getByTestId('current-workspace').click();
     await page.waitForTimeout(800);
     // why don't we use waitForSelector, It seems that waitForSelector not stable?
@@ -15,6 +15,15 @@ test.describe('Login Flow', () => {
       .click();
   });
 
+  test('Open login modal by click cloud-unsync-icon', async ({ page }) => {
+    await page.getByTestId('cloud-unsync-icon').click();
+
+    await page.waitForTimeout(800);
+    await page
+      .getByRole('heading', { name: 'Currently not logged in' })
+      .click();
+  });
+
   test('Open google firebase page', async ({ page }) => {
     await page.getByTestId('current-workspace').click();
     await page.waitForTimeout(800);