mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 20:38:52 +00:00
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
This commit is contained in:
yoyoyohamapi
276
tests/affine-cloud-copilot/e2e/utils/chat-panel-utils.ts
Normal file
276
tests/affine-cloud-copilot/e2e/utils/chat-panel-utils.ts
Normal file
@@ -0,0 +1,276 @@
|
||||
// eslint-disable eslint-plugin-unicorn(prefer-dom-node-dataset
|
||||
import type { Page } from '@playwright/test';
|
||||
import { expect } from '@playwright/test';
|
||||
|
||||
type ChatStatus = 'loading' | 'success' | 'error' | 'idle' | 'transmitting';
|
||||
|
||||
type ChatUserMessage = {
|
||||
role: 'user';
|
||||
content: string;
|
||||
};
|
||||
|
||||
type ChatAssistantMessage = {
|
||||
role: 'assistant';
|
||||
status: ChatStatus;
|
||||
title: string;
|
||||
content: string;
|
||||
};
|
||||
|
||||
type ChatActionMessage = {
|
||||
role: 'action';
|
||||
title: string;
|
||||
content: string;
|
||||
};
|
||||
|
||||
type ChatMessage = ChatUserMessage | ChatAssistantMessage | ChatActionMessage;
|
||||
|
||||
export class ChatPanelUtils {
|
||||
public static async openChatPanel(page: Page) {
|
||||
if (await page.getByTestId('sidebar-tab-chat').isHidden()) {
|
||||
await page.getByTestId('right-sidebar-toggle').click({
|
||||
delay: 200,
|
||||
});
|
||||
}
|
||||
await page.getByTestId('sidebar-tab-chat').click();
|
||||
await expect(page.getByTestId('sidebar-tab-content-chat')).toBeVisible();
|
||||
}
|
||||
|
||||
public static async typeChat(page: Page, content: string) {
|
||||
await page.getByTestId('chat-panel-input').focus();
|
||||
await page.keyboard.type(content);
|
||||
}
|
||||
|
||||
public static async typeChatSequentially(page: Page, content: string) {
|
||||
const input = await page.locator('chat-panel-input textarea').nth(0);
|
||||
await input.pressSequentially(content, {
|
||||
delay: 50,
|
||||
});
|
||||
}
|
||||
|
||||
public static async makeChat(page: Page, content: string) {
|
||||
await this.openChatPanel(page);
|
||||
await this.typeChat(page, content);
|
||||
await page.keyboard.press('Enter');
|
||||
}
|
||||
|
||||
public static async clearChat(page: Page) {
|
||||
await page.getByTestId('chat-panel-clear').click();
|
||||
await page.getByTestId('confirm-modal-confirm').click();
|
||||
await page.waitForTimeout(500);
|
||||
}
|
||||
|
||||
public static async collectHistory(page: Page) {
|
||||
return await page.evaluate(() => {
|
||||
const chatPanel = document.querySelector<HTMLElement>(
|
||||
'[data-testid="chat-panel-messages"]'
|
||||
);
|
||||
if (!chatPanel) {
|
||||
return [] as ChatMessage[];
|
||||
}
|
||||
const messages = chatPanel.querySelectorAll<HTMLElement>(
|
||||
'chat-message-user,chat-message-assistant,chat-message-action'
|
||||
);
|
||||
|
||||
return Array.from(messages).map(m => {
|
||||
const isAssistant = m.dataset.testid === 'chat-message-assistant';
|
||||
const isChatAction = m.dataset.testid === 'chat-message-action';
|
||||
|
||||
const isUser = !isAssistant && !isChatAction;
|
||||
|
||||
if (isUser) {
|
||||
return {
|
||||
role: 'user' as const,
|
||||
content:
|
||||
m.querySelector<HTMLElement>(
|
||||
'[data-testid="chat-content-pure-text"]'
|
||||
)?.innerText || '',
|
||||
};
|
||||
}
|
||||
|
||||
if (isAssistant) {
|
||||
return {
|
||||
role: 'assistant' as const,
|
||||
status: m.dataset.status as ChatStatus,
|
||||
title: m.querySelector<HTMLElement>('.user-info')?.innerText || '',
|
||||
content:
|
||||
m.querySelector<HTMLElement>('chat-content-rich-text editor-host')
|
||||
?.innerText || '',
|
||||
};
|
||||
}
|
||||
|
||||
// Must be chat action at this point
|
||||
return {
|
||||
role: 'action' as const,
|
||||
title: m.querySelector<HTMLElement>('.user-info')?.innerText || '',
|
||||
content:
|
||||
m.querySelector<HTMLElement>('chat-content-rich-text editor-host')
|
||||
?.innerText || '',
|
||||
};
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private static expectHistory(
|
||||
history: ChatMessage[],
|
||||
expected: (
|
||||
| Partial<ChatUserMessage>
|
||||
| Partial<ChatAssistantMessage>
|
||||
| Partial<ChatActionMessage>
|
||||
)[]
|
||||
) {
|
||||
expect(history).toHaveLength(expected.length);
|
||||
history.forEach((message, index) => {
|
||||
const expectedMessage = expected[index];
|
||||
expect(message).toMatchObject(expectedMessage);
|
||||
});
|
||||
}
|
||||
|
||||
public static async expectToHaveHistory(
|
||||
page: Page,
|
||||
expected: (
|
||||
| Partial<ChatUserMessage>
|
||||
| Partial<ChatAssistantMessage>
|
||||
| Partial<ChatActionMessage>
|
||||
)[]
|
||||
) {
|
||||
const history = await this.collectHistory(page);
|
||||
this.expectHistory(history, expected);
|
||||
}
|
||||
|
||||
public static async waitForHistory(
|
||||
page: Page,
|
||||
expected: (
|
||||
| Partial<ChatUserMessage>
|
||||
| Partial<ChatAssistantMessage>
|
||||
| Partial<ChatActionMessage>
|
||||
)[],
|
||||
timeout = 2 * 60000
|
||||
) {
|
||||
await expect(async () => {
|
||||
const history = await this.collectHistory(page);
|
||||
this.expectHistory(history, expected);
|
||||
}).toPass({ timeout });
|
||||
}
|
||||
|
||||
public static async getLatestAssistantMessage(page: Page) {
|
||||
const message = page.getByTestId('chat-message-assistant').last();
|
||||
const actions = await message.getByTestId('chat-actions');
|
||||
const actionList = await message.getByTestId('chat-action-list');
|
||||
return {
|
||||
message,
|
||||
content: await message
|
||||
.locator('chat-content-rich-text editor-host')
|
||||
.innerText(),
|
||||
actions: {
|
||||
copy: async () => actions.getByTestId('action-copy-button').click(),
|
||||
retry: async () => actions.getByTestId('action-retry-button').click(),
|
||||
insert: async () => actionList.getByTestId('action-insert').click(),
|
||||
saveAsBlock: async () =>
|
||||
actionList.getByTestId('action-save-as-block').click(),
|
||||
saveAsDoc: async () =>
|
||||
actionList.getByTestId('action-save-as-doc').click(),
|
||||
addAsNote: async () =>
|
||||
actionList.getByTestId('action-add-to-edgeless-as-note').click(),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public static async getLatestAIActionMessage(page: Page) {
|
||||
const message = page.getByTestId('chat-message-action').last();
|
||||
const actionName = await message.getByTestId('action-name');
|
||||
await actionName.click();
|
||||
const answer = await message.getByTestId('answer-prompt');
|
||||
const prompt = await message.getByTestId('chat-message-action-prompt');
|
||||
return {
|
||||
message,
|
||||
answer,
|
||||
prompt,
|
||||
actionName,
|
||||
};
|
||||
}
|
||||
|
||||
public static async chatWithDoc(page: Page, docName: string) {
|
||||
const withButton = await page.getByTestId('chat-panel-with-button');
|
||||
await withButton.click();
|
||||
const withMenu = await page.getByTestId('ai-add-popover');
|
||||
await withMenu.getByText(docName).click();
|
||||
await page.getByTestId('chat-panel-chips').getByText(docName);
|
||||
}
|
||||
|
||||
public static async chatWithAttachments(
|
||||
page: Page,
|
||||
attachments: { name: string; mimeType: string; buffer: Buffer }[],
|
||||
text: string
|
||||
) {
|
||||
await page.evaluate(() => {
|
||||
delete window.showOpenFilePicker;
|
||||
});
|
||||
|
||||
for (const attachment of attachments) {
|
||||
const fileChooserPromise = page.waitForEvent('filechooser');
|
||||
const withButton = await page.getByTestId('chat-panel-with-button');
|
||||
await withButton.click();
|
||||
const withMenu = await page.getByTestId('ai-add-popover');
|
||||
await withMenu.getByTestId('ai-chat-with-files').click();
|
||||
const fileChooser = await fileChooserPromise;
|
||||
await fileChooser.setFiles(attachment);
|
||||
}
|
||||
await expect(async () => {
|
||||
const states = await page
|
||||
.getByTestId('chat-panel-chip')
|
||||
.evaluateAll(elements =>
|
||||
elements.map(el => el.getAttribute('data-state'))
|
||||
);
|
||||
await expect(states).toHaveLength(attachments.length);
|
||||
await expect(states.every(state => state === 'finished')).toBe(true);
|
||||
}).toPass({ timeout: 20000 });
|
||||
|
||||
await page.pause();
|
||||
await this.makeChat(page, text);
|
||||
}
|
||||
|
||||
public static async chatWithImages(
|
||||
page: Page,
|
||||
images: { name: string; mimeType: string; buffer: Buffer }[],
|
||||
text: string
|
||||
) {
|
||||
await page.evaluate(() => {
|
||||
delete window.showOpenFilePicker;
|
||||
});
|
||||
|
||||
const fileChooserPromise = page.waitForEvent('filechooser');
|
||||
// Open file upload dialog
|
||||
await page.getByTestId('chat-panel-input-image-upload').click();
|
||||
|
||||
const fileChooser = await fileChooserPromise;
|
||||
await fileChooser.setFiles(images);
|
||||
|
||||
await page.waitForSelector('chat-panel-input img');
|
||||
await this.makeChat(page, text);
|
||||
}
|
||||
|
||||
public static async enableNetworkSearch(page: Page) {
|
||||
const networkSearch = await page.getByTestId('chat-network-search');
|
||||
if ((await networkSearch.getAttribute('data-active')) === 'false') {
|
||||
await networkSearch.click();
|
||||
}
|
||||
}
|
||||
|
||||
public static async disableNetworkSearch(page: Page) {
|
||||
const networkSearch = await page.getByTestId('chat-network-search');
|
||||
if ((await networkSearch.getAttribute('data-active')) === 'true') {
|
||||
await networkSearch.click();
|
||||
}
|
||||
}
|
||||
|
||||
public static async isNetworkSearchEnabled(page: Page) {
|
||||
const networkSearch = await page.getByTestId('chat-network-search');
|
||||
return (await networkSearch.getAttribute('aria-disabled')) === 'false';
|
||||
}
|
||||
|
||||
public static async isImageUploadEnabled(page: Page) {
|
||||
const imageUpload = await page.getByTestId('chat-panel-input-image-upload');
|
||||
const disabled = await imageUpload.getAttribute('data-disabled');
|
||||
return disabled === 'false';
|
||||
}
|
||||
}
|
||||
528
tests/affine-cloud-copilot/e2e/utils/editor-utils.ts
Normal file
528
tests/affine-cloud-copilot/e2e/utils/editor-utils.ts
Normal file
@@ -0,0 +1,528 @@
|
||||
import {
|
||||
createEdgelessNoteBlock,
|
||||
setEdgelessTool,
|
||||
} from '@affine-test/kit/utils/editor';
|
||||
import {
|
||||
pressEscape,
|
||||
selectAllByKeyboard,
|
||||
} from '@affine-test/kit/utils/keyboard';
|
||||
import { getBlockSuiteEditorTitle } from '@affine-test/kit/utils/page-logic';
|
||||
import type { EdgelessRootBlockComponent } from '@blocksuite/affine/blocks/root';
|
||||
import type {
|
||||
MindmapElementModel,
|
||||
ShapeElementModel,
|
||||
} from '@blocksuite/affine-model';
|
||||
import type { GfxModel } from '@blocksuite/std/gfx';
|
||||
import { type Page } from '@playwright/test';
|
||||
export class EditorUtils {
|
||||
public static async focusToEditor(page: Page) {
|
||||
const title = getBlockSuiteEditorTitle(page);
|
||||
await title.focus();
|
||||
await page.keyboard.press('Enter');
|
||||
}
|
||||
|
||||
public static async getEditorContent(page: Page) {
|
||||
let content = '';
|
||||
let retry = 3;
|
||||
while (!content && retry > 0) {
|
||||
const lines = await page.$$('page-editor .inline-editor');
|
||||
const contents = await Promise.all(lines.map(el => el.innerText()));
|
||||
content = contents
|
||||
.map(c => c.replace(/\u200B/g, '').trim())
|
||||
.filter(c => !!c)
|
||||
.join('\n');
|
||||
if (!content) {
|
||||
await page.waitForTimeout(500);
|
||||
retry -= 1;
|
||||
}
|
||||
}
|
||||
return content;
|
||||
}
|
||||
|
||||
public static async getNoteContent(page: Page) {
|
||||
const edgelessNode = await page.waitForSelector(
|
||||
'affine-edgeless-note .edgeless-note-page-content'
|
||||
);
|
||||
return (await edgelessNode.innerText()).replace(/\u200B/g, '').trim();
|
||||
}
|
||||
|
||||
public static async switchToEdgelessMode(page: Page) {
|
||||
const editor = await page.waitForSelector('page-editor');
|
||||
await page.getByTestId('switch-edgeless-mode-button').click();
|
||||
editor.waitForElementState('hidden');
|
||||
await page.waitForSelector('edgeless-editor');
|
||||
}
|
||||
|
||||
public static async switchToPageMode(page: Page) {
|
||||
await page.getByTestId('switch-page-mode-button').click();
|
||||
await page.waitForSelector('page-editor');
|
||||
}
|
||||
|
||||
public static async isPageMode(page: Page) {
|
||||
return await page.waitForSelector('page-editor');
|
||||
}
|
||||
|
||||
public static async isEdgelessMode(page: Page) {
|
||||
return await page.waitForSelector('edgeless-editor');
|
||||
}
|
||||
|
||||
public static async getDocTitle(page: Page) {
|
||||
return page.getByTestId('title-edit-button').innerText();
|
||||
}
|
||||
|
||||
public static async waitForAiAnswer(page: Page) {
|
||||
const answer = await page.getByTestId('ai-penel-answer');
|
||||
await answer.waitFor({
|
||||
state: 'visible',
|
||||
timeout: 2 * 60000,
|
||||
});
|
||||
return answer;
|
||||
}
|
||||
|
||||
private static createAction(page: Page, action: () => Promise<void>) {
|
||||
return async () => {
|
||||
await action();
|
||||
const responses = new Set<string>();
|
||||
const answer = await this.waitForAiAnswer(page);
|
||||
const responsesMenu = answer.getByTestId('answer-responses');
|
||||
await responsesMenu.isVisible();
|
||||
await responsesMenu.scrollIntoViewIfNeeded({ timeout: 60000 });
|
||||
|
||||
if (await responsesMenu.getByTestId('answer-insert-below').isVisible()) {
|
||||
responses.add('insert-below');
|
||||
}
|
||||
if (await responsesMenu.getByTestId('answer-insert-above').isVisible()) {
|
||||
responses.add('insert-above');
|
||||
}
|
||||
if (await responsesMenu.getByTestId('answer-replace').isVisible()) {
|
||||
responses.add('replace-selection');
|
||||
}
|
||||
if (
|
||||
await responsesMenu.getByTestId('answer-use-as-caption').isVisible()
|
||||
) {
|
||||
responses.add('use-as-caption');
|
||||
}
|
||||
if (
|
||||
await responsesMenu.getByTestId('answer-create-new-note').isVisible()
|
||||
) {
|
||||
responses.add('create-new-note');
|
||||
}
|
||||
|
||||
return {
|
||||
answer: await this.waitForAiAnswer(page),
|
||||
responses,
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
public static async createEdgelessText(page: Page, text: string) {
|
||||
await setEdgelessTool(page, 'text');
|
||||
await page.mouse.click(400, 400);
|
||||
await page.locator('affine-edgeless-text').waitFor({ state: 'visible' });
|
||||
await page.waitForTimeout(100);
|
||||
const texts = text.split('\n');
|
||||
for (const [index, line] of texts.entries()) {
|
||||
await page.keyboard.insertText(line);
|
||||
if (index !== texts.length - 1) {
|
||||
await page.keyboard.press('Enter');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public static async createEdgelessNote(page: Page, text: string) {
|
||||
await createEdgelessNoteBlock(page, [500, 300]);
|
||||
const texts = text.split('\n');
|
||||
for (const [index, line] of texts.entries()) {
|
||||
await page.keyboard.insertText(line);
|
||||
if (index !== texts.length - 1) {
|
||||
await page.keyboard.press('Enter');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public static async createMindmap(page: Page) {
|
||||
await page.keyboard.press('m');
|
||||
await page.mouse.click(400, 400);
|
||||
const id = await page.evaluate(() => {
|
||||
const edgelessBlock = document.querySelector(
|
||||
'affine-edgeless-root'
|
||||
) as EdgelessRootBlockComponent;
|
||||
if (!edgelessBlock) {
|
||||
throw new Error('edgeless block not found');
|
||||
}
|
||||
const mindmaps = edgelessBlock.gfx.gfxElements.filter(
|
||||
(el: GfxModel) => 'type' in el && el.type === 'mindmap'
|
||||
);
|
||||
|
||||
return mindmaps[mindmaps.length - 1].id;
|
||||
});
|
||||
|
||||
return id;
|
||||
}
|
||||
|
||||
public static async getMindMapNode(
|
||||
page: Page,
|
||||
mindmapId: string,
|
||||
path: number[]
|
||||
) {
|
||||
return page.evaluate(
|
||||
({ mindmapId, path }) => {
|
||||
const edgelessBlock = document.querySelector(
|
||||
'affine-edgeless-root'
|
||||
) as EdgelessRootBlockComponent;
|
||||
if (!edgelessBlock) {
|
||||
throw new Error('edgeless block not found');
|
||||
}
|
||||
|
||||
const mindmap = edgelessBlock.gfx.getElementById(
|
||||
mindmapId
|
||||
) as MindmapElementModel;
|
||||
if (!mindmap) {
|
||||
throw new Error(`Mindmap not found: ${mindmapId}`);
|
||||
}
|
||||
|
||||
const node = mindmap.getNodeByPath(path);
|
||||
if (!node) {
|
||||
throw new Error(`Mindmap node not found at: ${path}`);
|
||||
}
|
||||
|
||||
const rect = edgelessBlock.gfx.viewport.toViewBound(
|
||||
node.element.elementBound
|
||||
);
|
||||
|
||||
return {
|
||||
path: mindmap.getPath(node),
|
||||
id: node.id,
|
||||
text: (node.element as ShapeElementModel).text?.toString() ?? '',
|
||||
rect: {
|
||||
x: rect.x,
|
||||
y: rect.y,
|
||||
w: rect.w,
|
||||
h: rect.h,
|
||||
},
|
||||
};
|
||||
},
|
||||
{
|
||||
mindmapId,
|
||||
path,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
public static async selectElementInEdgeless(page: Page, elements: string[]) {
|
||||
await page.evaluate(
|
||||
({ elements }) => {
|
||||
const edgelessBlock = document.querySelector(
|
||||
'affine-edgeless-root'
|
||||
) as EdgelessRootBlockComponent;
|
||||
if (!edgelessBlock) {
|
||||
throw new Error('edgeless block not found');
|
||||
}
|
||||
|
||||
edgelessBlock.gfx.selection.set({
|
||||
elements,
|
||||
});
|
||||
},
|
||||
{ elements }
|
||||
);
|
||||
}
|
||||
|
||||
public static async askAIWithEdgeless(
|
||||
page: Page,
|
||||
createBlock: () => Promise<void>,
|
||||
afterSelected?: () => Promise<void>
|
||||
) {
|
||||
await this.switchToEdgelessMode(page);
|
||||
await selectAllByKeyboard(page);
|
||||
await page.keyboard.press('Delete');
|
||||
await createBlock();
|
||||
await pressEscape(page, 5);
|
||||
await selectAllByKeyboard(page);
|
||||
await afterSelected?.();
|
||||
await page.getByTestId('ask-ai-button').click();
|
||||
|
||||
return {
|
||||
aiImageFilter: this.createAction(page, () =>
|
||||
page.getByTestId('action-ai-image-filter').click()
|
||||
),
|
||||
brainstorm: this.createAction(page, () =>
|
||||
page.getByTestId('action-brainstorm').click()
|
||||
),
|
||||
brainstormMindMap: this.createAction(page, () =>
|
||||
page.getByTestId('action-brainstorm-mindmap').click()
|
||||
),
|
||||
changeTone: (
|
||||
tone: 'professional' | 'informal' | 'friendly' | 'critical' | 'humorous'
|
||||
) =>
|
||||
this.createAction(page, async () => {
|
||||
await page.getByTestId('action-change-tone').hover();
|
||||
await page.getByTestId(`action-change-tone-${tone}`).click();
|
||||
})(),
|
||||
checkCodeError: this.createAction(page, () =>
|
||||
page.getByTestId('action-check-code-error').click()
|
||||
),
|
||||
continueWithAi: async () => {
|
||||
page.getByTestId('action-continue-with-ai').click();
|
||||
},
|
||||
continueWriting: this.createAction(page, () =>
|
||||
page.getByTestId('action-continue-writing').click()
|
||||
),
|
||||
createHeadings: this.createAction(page, () =>
|
||||
page.getByTestId('action-create-headings').click()
|
||||
),
|
||||
explainSelection: this.createAction(page, () =>
|
||||
page.getByTestId('action-explain-selection').click()
|
||||
),
|
||||
findActions: this.createAction(page, () =>
|
||||
page.getByTestId('action-find-actions').click()
|
||||
),
|
||||
fixGrammar: this.createAction(page, () =>
|
||||
page.getByTestId('action-fix-grammar').click()
|
||||
),
|
||||
fixSpelling: this.createAction(page, () =>
|
||||
page.getByTestId('action-fix-spelling').click()
|
||||
),
|
||||
generateCaption: this.createAction(page, () =>
|
||||
page.getByTestId('action-generate-caption').click()
|
||||
),
|
||||
generateHeadings: this.createAction(page, () =>
|
||||
page.getByTestId('action-generate-headings').click()
|
||||
),
|
||||
generateImage: this.createAction(page, () =>
|
||||
page.getByTestId('action-generate-image').click()
|
||||
),
|
||||
generateOutline: this.createAction(page, () =>
|
||||
page.getByTestId('action-generate-outline').click()
|
||||
),
|
||||
generatePresentation: this.createAction(page, () =>
|
||||
page.getByTestId('action-generate-presentation').click()
|
||||
),
|
||||
imageProcessing: this.createAction(page, () =>
|
||||
page.getByTestId('action-image-processing').click()
|
||||
),
|
||||
improveGrammar: this.createAction(page, () =>
|
||||
page.getByTestId('action-improve-grammar').click()
|
||||
),
|
||||
improveWriting: this.createAction(page, () =>
|
||||
page.getByTestId('action-improve-writing').click()
|
||||
),
|
||||
makeItLonger: this.createAction(page, () =>
|
||||
page.getByTestId('action-make-it-longer').click()
|
||||
),
|
||||
makeItReal: this.createAction(page, () =>
|
||||
page.getByTestId('action-make-it-real').click()
|
||||
),
|
||||
makeItShorter: this.createAction(page, () =>
|
||||
page.getByTestId('action-make-it-shorter').click()
|
||||
),
|
||||
summarize: this.createAction(page, () =>
|
||||
page.getByTestId('action-summarize').click()
|
||||
),
|
||||
translate: (language: string) =>
|
||||
this.createAction(page, async () => {
|
||||
await page.getByTestId('action-translate').hover();
|
||||
await page.getByTestId(`action-translate-${language}`).click();
|
||||
})(),
|
||||
writeArticle: this.createAction(page, () =>
|
||||
page.getByTestId('action-write-article').click()
|
||||
),
|
||||
writeBlogPost: this.createAction(page, () =>
|
||||
page.getByTestId('action-write-blog-post').click()
|
||||
),
|
||||
writePoem: this.createAction(page, () =>
|
||||
page.getByTestId('action-write-poem').click()
|
||||
),
|
||||
writeTwitterPost: this.createAction(page, () =>
|
||||
page.getByTestId('action-write-twitter-post').click()
|
||||
),
|
||||
regenerateMindMap: this.createAction(page, () =>
|
||||
page.getByTestId('action-regenerate-mindmap').click()
|
||||
),
|
||||
expandMindMapNode: async () =>
|
||||
page.getByTestId('action-expand-mindmap-node').click(),
|
||||
} as const;
|
||||
}
|
||||
|
||||
public static async askAIWithCode(
|
||||
page: Page,
|
||||
code: string,
|
||||
language: string
|
||||
) {
|
||||
await this.focusToEditor(page);
|
||||
await page.keyboard.insertText(`\`\`\`${language}`);
|
||||
await page.keyboard.press('Enter');
|
||||
await page.keyboard.insertText(code);
|
||||
await page.locator('affine-code').blur();
|
||||
await page.locator('affine-code').hover();
|
||||
await page.getByTestId('ask-ai-button').click();
|
||||
return {
|
||||
explainCode: this.createAction(page, () =>
|
||||
page.getByTestId('action-explain-code').click()
|
||||
),
|
||||
checkCodeError: this.createAction(page, () =>
|
||||
page.getByTestId('action-check-code-error').click()
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
public static async askAIWithImage(
|
||||
page: Page,
|
||||
image: { name: string; mimeType: string; buffer: Buffer }
|
||||
) {
|
||||
await page.evaluate(() => {
|
||||
delete window.showOpenFilePicker;
|
||||
});
|
||||
|
||||
const fileChooserPromise = page.waitForEvent('filechooser');
|
||||
|
||||
await this.focusToEditor(page);
|
||||
await page.keyboard.press('/');
|
||||
await page.keyboard.insertText('image');
|
||||
await page.locator('affine-slash-menu').getByTestId('Image').click();
|
||||
|
||||
const fileChooser = await fileChooserPromise;
|
||||
await fileChooser.setFiles(image);
|
||||
|
||||
await page.locator('affine-page-image').click();
|
||||
await page.getByTestId('ask-ai-button').click();
|
||||
|
||||
return {
|
||||
explainImage: this.createAction(page, () =>
|
||||
page.getByTestId('action-explain-image').click()
|
||||
),
|
||||
generateImage: this.createAction(page, () =>
|
||||
page.getByTestId('action-generate-image').click()
|
||||
),
|
||||
generateCaption: this.createAction(page, () =>
|
||||
page.getByTestId('action-generate-caption').click()
|
||||
),
|
||||
imageProcessing: (type: string) =>
|
||||
this.createAction(page, async () => {
|
||||
await page.getByTestId('action-image-processing').hover();
|
||||
await page.getByTestId(`action-image-processing-${type}`).click();
|
||||
})(),
|
||||
imageFilter: (style: string) =>
|
||||
this.createAction(page, async () => {
|
||||
await page.getByTestId('action-ai-image-filter').hover();
|
||||
await page.getByTestId(`action-image-filter-${style}`).click();
|
||||
})(),
|
||||
};
|
||||
}
|
||||
|
||||
public static async askAIWithText(page: Page, text: string) {
|
||||
await this.focusToEditor(page);
|
||||
const texts = text.split('\n');
|
||||
for (const [index, line] of texts.entries()) {
|
||||
await page.keyboard.insertText(line);
|
||||
if (index !== texts.length - 1) {
|
||||
await page.keyboard.press('Enter');
|
||||
}
|
||||
}
|
||||
await page.keyboard.press('ControlOrMeta+A');
|
||||
await page.keyboard.press('ControlOrMeta+A');
|
||||
await page.keyboard.press('ControlOrMeta+A');
|
||||
|
||||
const askAI = await page.locator('page-editor editor-toolbar ask-ai-icon');
|
||||
await askAI.waitFor({
|
||||
state: 'attached',
|
||||
timeout: 5000,
|
||||
});
|
||||
await askAI.click();
|
||||
|
||||
return {
|
||||
aiImageFilter: this.createAction(page, () =>
|
||||
page.getByTestId('action-ai-image-filter').click()
|
||||
),
|
||||
brainstorm: this.createAction(page, () =>
|
||||
page.getByTestId('action-brainstorm').click()
|
||||
),
|
||||
brainstormMindMap: this.createAction(page, () =>
|
||||
page.getByTestId('action-brainstorm-mindmap').click()
|
||||
),
|
||||
changeTone: (
|
||||
tone: 'professional' | 'informal' | 'friendly' | 'critical' | 'humorous'
|
||||
) =>
|
||||
this.createAction(page, async () => {
|
||||
await page.getByTestId('action-change-tone').hover();
|
||||
await page.getByTestId(`action-change-tone-${tone}`).click();
|
||||
})(),
|
||||
checkCodeError: this.createAction(page, () =>
|
||||
page.getByTestId('action-check-code-error').click()
|
||||
),
|
||||
continueWithAi: async () => {
|
||||
page.getByTestId('action-continue-with-ai').click();
|
||||
},
|
||||
continueWriting: this.createAction(page, () =>
|
||||
page.getByTestId('action-continue-writing').click()
|
||||
),
|
||||
createHeadings: this.createAction(page, () =>
|
||||
page.getByTestId('action-create-headings').click()
|
||||
),
|
||||
explainSelection: this.createAction(page, () =>
|
||||
page.getByTestId('action-explain-selection').click()
|
||||
),
|
||||
findActions: this.createAction(page, () =>
|
||||
page.getByTestId('action-find-actions').click()
|
||||
),
|
||||
fixGrammar: this.createAction(page, () =>
|
||||
page.getByTestId('action-fix-grammar').click()
|
||||
),
|
||||
fixSpelling: this.createAction(page, () =>
|
||||
page.getByTestId('action-fix-spelling').click()
|
||||
),
|
||||
generateCaption: this.createAction(page, () =>
|
||||
page.getByTestId('action-generate-caption').click()
|
||||
),
|
||||
generateHeadings: this.createAction(page, () =>
|
||||
page.getByTestId('action-generate-headings').click()
|
||||
),
|
||||
generateImage: this.createAction(page, () =>
|
||||
page.getByTestId('action-generate-image').click()
|
||||
),
|
||||
generateOutline: this.createAction(page, () =>
|
||||
page.getByTestId('action-generate-outline').click()
|
||||
),
|
||||
generatePresentation: this.createAction(page, () =>
|
||||
page.getByTestId('action-generate-presentation').click()
|
||||
),
|
||||
imageProcessing: this.createAction(page, () =>
|
||||
page.getByTestId('action-image-processing').click()
|
||||
),
|
||||
improveGrammar: this.createAction(page, () =>
|
||||
page.getByTestId('action-improve-grammar').click()
|
||||
),
|
||||
improveWriting: this.createAction(page, () =>
|
||||
page.getByTestId('action-improve-writing').click()
|
||||
),
|
||||
makeItLonger: this.createAction(page, () =>
|
||||
page.getByTestId('action-make-it-longer').click()
|
||||
),
|
||||
makeItReal: this.createAction(page, () =>
|
||||
page.getByTestId('action-make-it-real').click()
|
||||
),
|
||||
makeItShorter: this.createAction(page, () =>
|
||||
page.getByTestId('action-make-it-shorter').click()
|
||||
),
|
||||
summarize: this.createAction(page, () =>
|
||||
page.getByTestId('action-summarize').click()
|
||||
),
|
||||
translate: (language: string) =>
|
||||
this.createAction(page, async () => {
|
||||
await page.getByTestId('action-translate').hover();
|
||||
await page.getByTestId(`action-translate-${language}`).click();
|
||||
})(),
|
||||
writeArticle: this.createAction(page, () =>
|
||||
page.getByTestId('action-write-article').click()
|
||||
),
|
||||
writeBlogPost: this.createAction(page, () =>
|
||||
page.getByTestId('action-write-blog-post').click()
|
||||
),
|
||||
writePoem: this.createAction(page, () =>
|
||||
page.getByTestId('action-write-poem').click()
|
||||
),
|
||||
writeTwitterPost: this.createAction(page, () =>
|
||||
page.getByTestId('action-write-twitter-post').click()
|
||||
),
|
||||
} as const;
|
||||
}
|
||||
}
|
||||
64
tests/affine-cloud-copilot/e2e/utils/test-utils.ts
Normal file
64
tests/affine-cloud-copilot/e2e/utils/test-utils.ts
Normal file
@@ -0,0 +1,64 @@
|
||||
import { createRandomAIUser } from '@affine-test/kit/utils/cloud';
|
||||
import { openHomePage, setCoreUrl } from '@affine-test/kit/utils/load-page';
|
||||
import {
|
||||
clickNewPageButton,
|
||||
waitForEditorLoad,
|
||||
} from '@affine-test/kit/utils/page-logic';
|
||||
import { createLocalWorkspace } from '@affine-test/kit/utils/workspace';
|
||||
import type { Store } from '@blocksuite/affine/store';
|
||||
import type { Page } from '@playwright/test';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
doc: Store;
|
||||
}
|
||||
}
|
||||
|
||||
export class TestUtils {
|
||||
private static instance: TestUtils;
|
||||
private isProduction: boolean;
|
||||
|
||||
private constructor() {
|
||||
this.isProduction = process.env.NODE_ENV === 'production';
|
||||
if (
|
||||
process.env.PLAYWRIGHT_USER_AGENT &&
|
||||
process.env.PLAYWRIGHT_EMAIL &&
|
||||
!process.env.PLAYWRIGHT_PASSWORD
|
||||
) {
|
||||
setCoreUrl(process.env.PLAYWRIGHT_CORE_URL || 'http://localhost:8080');
|
||||
this.isProduction = true;
|
||||
}
|
||||
}
|
||||
|
||||
public static getInstance(): TestUtils {
|
||||
if (!TestUtils.instance) {
|
||||
TestUtils.instance = new TestUtils();
|
||||
}
|
||||
return TestUtils.instance;
|
||||
}
|
||||
|
||||
public getUser() {
|
||||
if (
|
||||
!this.isProduction ||
|
||||
!process.env.PLAYWRIGHT_EMAIL ||
|
||||
!process.env.PLAYWRIGHT_PASSWORD
|
||||
) {
|
||||
return createRandomAIUser();
|
||||
}
|
||||
|
||||
return {
|
||||
email: process.env.PLAYWRIGHT_EMAIL,
|
||||
password: process.env.PLAYWRIGHT_PASSWORD,
|
||||
};
|
||||
}
|
||||
|
||||
public async setupTestEnvironment(page: Page) {
|
||||
await openHomePage(page);
|
||||
await clickNewPageButton(page);
|
||||
await waitForEditorLoad(page);
|
||||
}
|
||||
|
||||
public async createTestWorkspace(page: Page, name: string = 'test') {
|
||||
await createLocalWorkspace({ name }, page);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user