test(core): split and enhance copilot e2e tests (#11007)

### TL;DR

Split and enhance copilot e2e tests.

### What Changed

#### Tests Structure

The e2e tests are organized into the following categories:

1. **Basic Tests (`/basic`)**: Tests for verifying core AI capabilities including feature onboarding, authorization workflows, and basic chat interactions.
2. **Chat Interaction Tests (`/chat-with`)**: Tests for verifying the AI's interaction with various ​object types, such as attachments, images, text content, Edgeless elements, etc.
3. **AI Action Tests (`/ai-action`)**: Tests for verifying the AI's actions, such as text translation, gramma correction, etc.
4. **Insertion Tests (`/insertion`)**: Tests for verifying answer insertion functionality.

#### Tests Writing

Writing a copilot test cases is easier and clear

e.g.
```ts
test('support chat with specified doc', async ({ page, utils }) => {
  // Initialize the doc
  await focusDocTitle(page);
  await page.keyboard.insertText('Test Doc');
  await page.keyboard.press('Enter');
  await page.keyboard.insertText('EEee is a cute cat');

  await utils.chatPanel.chatWithDoc(page, 'Test Doc');

  await utils.chatPanel.makeChat(page, 'What is EEee?');
  await utils.chatPanel.waitForHistory(page, [
    {
      role: 'user',
      content: 'What is EEee?',
    },
    {
      role: 'assistant',
      status: 'success',
    },
  ]);

  const { content } = await utils.chatPanel.getLatestAssistantMessage(page);
  expect(content).toMatch(/EEee/);
});
```

#### Summary

||Cases|
|------|----|
|Before|19||
|After|151||

> Close BS-2769

tests/affine-cloud-copilot/e2e/basic/authority.spec.ts

@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIBasic/Authority', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should show error & login button when no login', async ({
+    page,
+    utils,
+  }) => {
+    await utils.chatPanel.makeChat(page, 'Hello');
+
+    await expect(page.getByTestId('ai-error')).toBeVisible();
+    await expect(page.getByTestId('ai-error-action-button')).toBeVisible();
+  });
+
+  test('should support login in error state', async ({ page, utils }) => {
+    await utils.chatPanel.makeChat(page, 'Hello');
+    const loginButton = page.getByTestId('ai-error-action-button');
+    await loginButton.click();
+
+    await expect(page.getByTestId('auth-modal')).toBeVisible();
+  });
+});

tests/affine-cloud-copilot/e2e/basic/chat.spec.ts

@@ -0,0 +1,346 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIBasic/Chat', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should display empty state when no messages', async ({ page }) => {
+    // Verify empty state UI
+    await expect(page.getByTestId('chat-panel-empty-state')).toBeVisible();
+    await expect(page.getByTestId('ai-onboarding')).toBeVisible();
+  });
+
+  test(`should send message and receive AI response:
+        - send message
+        - AI is loading
+        - AI generating
+        - AI success
+    `, async ({ page, utils }) => {
+    // Type and send a message
+    await utils.chatPanel.makeChat(page, 'Introduce AFFiNE to me');
+
+    // AI is loading
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Introduce AFFiNE to me',
+      },
+      {
+        role: 'assistant',
+        status: 'loading',
+      },
+    ]);
+
+    await expect(page.getByTestId('ai-loading')).toBeVisible();
+
+    // AI Generating
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Introduce AFFiNE to me',
+      },
+      {
+        role: 'assistant',
+        status: 'transmitting',
+      },
+    ]);
+
+    await expect(page.getByTestId('ai-loading')).not.toBeVisible();
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Introduce AFFiNE to me',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+  });
+
+  test('should support stop generating', async ({ page, utils }) => {
+    await utils.chatPanel.makeChat(page, 'Introduce AFFiNE to me');
+
+    // AI Generating
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Introduce AFFiNE to me',
+      },
+      {
+        role: 'assistant',
+        status: 'transmitting',
+      },
+    ]);
+
+    await page.getByTestId('chat-panel-stop').click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Introduce AFFiNE to me',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+  });
+
+  test('should render ai actions inline if the answer is the last one in the list, otherwise, nest them under the "More" menu', async ({
+    page,
+    utils,
+  }) => {
+    await utils.chatPanel.makeChat(page, 'Hello, how can you help me?');
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello, how can you help me?',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    expect(page.getByTestId('chat-action-list')).toBeVisible();
+    await utils.chatPanel.makeChat(page, 'Nice to meet you');
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello, how can you help me?',
+      },
+      {
+        role: 'assistant',
+        status: 'idle',
+      },
+      {
+        role: 'user',
+        content: 'Nice to meet you',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    const firstAnswer = await page
+      .getByTestId('chat-message-assistant')
+      .first();
+    const more = firstAnswer.getByTestId('action-more-button');
+    await more.click();
+    await expect(firstAnswer.getByTestId('chat-actions')).toBeVisible();
+  });
+
+  test('should show scroll indicator when there are many messages', async ({
+    page,
+    utils,
+  }) => {
+    // Set window height to 100px to ensure scroll indicator appears
+    await page.setViewportSize({ width: 1280, height: 400 });
+
+    // Type and send a message
+    await utils.chatPanel.makeChat(
+      page,
+      'Hello, write a poem about the moon with 50 words.'
+    );
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello, write a poem about the moon with 50 words.',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    // Wait for the answer to be completely rendered
+    await page.waitForTimeout(1000);
+
+    // Scroll up to trigger scroll indicator
+    const chatMessagesContainer = page.getByTestId(
+      'chat-panel-messages-container'
+    );
+    await chatMessagesContainer.evaluate(el => {
+      el.scrollTop = 0;
+    });
+
+    const scrollDownIndicator = page.getByTestId(
+      'chat-panel-scroll-down-indicator'
+    );
+
+    // Verify scroll indicator appears
+    await expect(scrollDownIndicator).toBeVisible();
+
+    // Click scroll indicator to scroll to bottom
+    await scrollDownIndicator.click();
+
+    // Verify scroll indicator disappears
+    await expect(scrollDownIndicator).not.toBeVisible();
+  });
+
+  test('should show error when request failed', async ({ page, utils }) => {
+    // Simulate network error by disconnecting
+    await page.route('**/graphql', route => route.abort('failed'));
+
+    // Send a message that will fail
+    await utils.chatPanel.makeChat(page, 'Hello');
+
+    await expect(page.getByTestId('ai-error')).toBeVisible();
+    await expect(page.getByTestId('action-retry-button')).toBeVisible();
+  });
+
+  test('should support retrying failed messages', async ({ page, utils }) => {
+    // Simulate network error by disconnecting
+    await page.route('**/graphql', route => route.abort('failed'));
+
+    // Send a message that will fail
+    await utils.chatPanel.makeChat(page, 'Hello');
+
+    // Verify error state
+    await expect(page.getByTestId('ai-error')).toBeVisible();
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'error',
+      },
+    ]);
+
+    // Reconnect network
+    await page.route('**/graphql', route => route.continue());
+
+    await page.getByTestId('action-retry-button').click();
+
+    // Verify message is resent and AI responds
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+  });
+
+  test('should support retrying question', async ({ page, utils }) => {
+    await utils.chatPanel.makeChat(
+      page,
+      'Introduce Large Language Model in under 500 words'
+    );
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Introduce Large Language Model in under 500 words',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    const { actions } = await utils.chatPanel.getLatestAssistantMessage(page);
+    await page.pause();
+    await actions.retry();
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Introduce Large Language Model in under 500 words',
+      },
+      {
+        role: 'assistant',
+        status: 'transmitting',
+      },
+    ]);
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Introduce Large Language Model in under 500 words',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+  });
+
+  test('should support sending message with button', async ({
+    page,
+    utils,
+  }) => {
+    await utils.chatPanel.openChatPanel(page);
+    await utils.chatPanel.typeChat(page, 'Hello');
+    await page.getByTestId('chat-panel-send').click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'loading',
+      },
+    ]);
+  });
+
+  test('should support clearing chat', async ({ page, utils }) => {
+    await utils.chatPanel.openChatPanel(page);
+    await utils.chatPanel.makeChat(page, 'Hello');
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+    await utils.chatPanel.clearChat(page);
+    await utils.chatPanel.waitForHistory(page, []);
+  });
+
+  test('should support copying answer', async ({ page, utils }) => {
+    await utils.chatPanel.openChatPanel(page);
+    await utils.chatPanel.makeChat(page, 'Hello');
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    const { actions } = await utils.chatPanel.getLatestAssistantMessage(page);
+    await actions.copy();
+    await page.getByText('Copied to clipboard').isVisible();
+    await expect(async () => {
+      const { content } = await utils.chatPanel.getLatestAssistantMessage(page);
+      const clipboardText = await page.evaluate(() =>
+        navigator.clipboard.readText()
+      );
+      expect(clipboardText).toBe(content);
+    }).toPass({ timeout: 5000 });
+  });
+});

tests/affine-cloud-copilot/e2e/basic/onboarding.spec.ts

@@ -0,0 +1,72 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe.configure({ mode: 'parallel' });
+
+test.describe('AIBasic/Onboarding', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should show AI onboarding', async ({ page }) => {
+    await expect(page.getByTestId('ai-onboarding')).toBeVisible();
+
+    // Show options
+    await expect(
+      page.getByTestId('read-foreign-language-article-with-ai')
+    ).toBeVisible();
+    await expect(
+      page.getByTestId('tidy-an-article-with-ai-mindmap-action')
+    ).toBeVisible();
+    await expect(
+      page.getByTestId('add-illustrations-to-the-article')
+    ).toBeVisible();
+    await expect(page.getByTestId('complete-writing-with-ai')).toBeVisible();
+    await expect(page.getByTestId('freely-communicate-with-ai')).toBeVisible();
+  });
+
+  test('read a foreign language article with AI', async ({ page, utils }) => {
+    await page.getByTestId('read-foreign-language-article-with-ai').click();
+
+    await utils.editor.isEdgelessMode(page);
+    const docTitle = await utils.editor.getDocTitle(page);
+    await expect(docTitle).toContain('Read a foreign language');
+  });
+
+  test('tidy an article with AI MindMap Action', async ({ page, utils }) => {
+    await page.getByTestId('tidy-an-article-with-ai-mindmap-action').click();
+
+    await utils.editor.isEdgelessMode(page);
+    const docTitle = await utils.editor.getDocTitle(page);
+    await expect(docTitle).toContain('Tidy');
+  });
+
+  test('add illustrations to the article', async ({ page, utils }) => {
+    await page.getByTestId('add-illustrations-to-the-article').click();
+
+    await utils.editor.isEdgelessMode(page);
+    const docTitle = await utils.editor.getDocTitle(page);
+    await expect(docTitle).toContain('Add illustrations');
+  });
+
+  test('complete writing with AI', async ({ page, utils }) => {
+    await page.getByTestId('complete-writing-with-ai').click();
+
+    await utils.editor.isEdgelessMode(page);
+    const docTitle = await utils.editor.getDocTitle(page);
+    await expect(docTitle).toContain('Complete writing');
+  });
+
+  test('freely communicate with AI', async ({ page, utils }) => {
+    await page.getByTestId('freely-communicate-with-ai').click();
+
+    await utils.editor.isEdgelessMode(page);
+    const docTitle = await utils.editor.getDocTitle(page);
+    await expect(docTitle).toContain('Freely communicate');
+  });
+});