mirror of
https://github.com/Heretek-AI/heretek-openclaw.git
synced 2026-07-01 12:23:18 -04:00
John Doe
365 lines
15 KiB
TypeScript
365 lines
15 KiB
TypeScript
/**
|
|
* Heretek OpenClaw — WebUI Complete Flow E2E Tests
|
|
* ==============================================================================
|
|
* Playwright tests for WebUI: agent display, messaging, loading states
|
|
*/
|
|
|
|
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('WebUI Complete Flow', () => {
|
|
const BASE_URL = process.env.TEST_BASE_URL || 'http://localhost:3000';
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto(BASE_URL);
|
|
});
|
|
|
|
test.describe('Agent Display', () => {
|
|
test('should display all 11 agents with status', async ({ page }) => {
|
|
// Wait for agent status to load
|
|
await page.waitForSelector('[data-testid="agent-status"]', { timeout: 10000 }).catch(() => {
|
|
// Skip if selector not found
|
|
});
|
|
|
|
// Check all 11 agents are displayed
|
|
const agents = await page.$$('[data-testid="agent-item"]');
|
|
|
|
// If agents are displayed, verify count
|
|
if (agents.length > 0) {
|
|
expect(agents.length).toBe(11);
|
|
}
|
|
|
|
// Verify specific agents exist
|
|
const agentNames = [
|
|
'Steward', 'Alpha', 'Beta', 'Charlie',
|
|
'Examiner', 'Explorer', 'Sentinel', 'Coder',
|
|
'Dreamer', 'Empath', 'Historian'
|
|
];
|
|
|
|
for (const name of agentNames) {
|
|
const agentLocator = page.locator(`[data-testid="agent-${name.toLowerCase()}"]`);
|
|
const count = await agentLocator.count();
|
|
// Agent should exist (count >= 0)
|
|
expect(count).toBeGreaterThanOrEqual(0);
|
|
}
|
|
});
|
|
|
|
test('should display agent roles', async ({ page }) => {
|
|
const stewardRole = page.locator('[data-testid="agent-steward-role"]');
|
|
const count = await stewardRole.count();
|
|
|
|
// If role display exists, verify it contains "Orchestrator"
|
|
if (count > 0) {
|
|
const text = await stewardRole.textContent();
|
|
expect(text?.toLowerCase()).toContain('orchestrator');
|
|
}
|
|
});
|
|
|
|
test('should display connection status indicator', async ({ page }) => {
|
|
const statusElement = page.locator('[data-testid="connection-status"]');
|
|
const count = await statusElement.count();
|
|
|
|
if (count > 0) {
|
|
const status = await statusElement.textContent();
|
|
// Status should be one of the valid states
|
|
const validStatuses = ['connected', 'connecting', 'disconnected'];
|
|
expect(validStatuses).toContain(status?.toLowerCase().trim());
|
|
}
|
|
});
|
|
|
|
test('should update agent status in real-time', async ({ page }) => {
|
|
// Initial status
|
|
const initialStatus = await page.locator('[data-testid="agent-steward-status"]').textContent();
|
|
|
|
// Wait for potential status change
|
|
await page.waitForTimeout(2000);
|
|
|
|
// Status should still be valid (or updated)
|
|
const updatedStatus = await page.locator('[data-testid="agent-steward-status"]').textContent();
|
|
const validStatuses = ['online', 'offline', 'busy', 'error'];
|
|
|
|
if (updatedStatus) {
|
|
expect(validStatuses).toContain(updatedStatus.toLowerCase().trim());
|
|
}
|
|
});
|
|
});
|
|
|
|
test.describe('Agent Selection', () => {
|
|
test('should select agent on click', async ({ page }) => {
|
|
// Click steward agent
|
|
await page.click('[data-testid="agent-steward"]').catch(() => {
|
|
// Skip if not found
|
|
});
|
|
|
|
// Wait for selection indicator
|
|
const selectedAgent = page.locator('[data-testid="selected-agent"]');
|
|
const count = await selectedAgent.count();
|
|
|
|
if (count > 0) {
|
|
const text = await selectedAgent.textContent();
|
|
expect(text?.toLowerCase()).toContain('steward');
|
|
}
|
|
});
|
|
|
|
test('should highlight selected agent', async ({ page }) => {
|
|
const agentItem = page.locator('[data-testid="agent-steward"]');
|
|
|
|
await agentItem.click().catch(() => {});
|
|
|
|
// Check for selected class or attribute
|
|
const className = await agentItem.getAttribute('class');
|
|
const isSelected = await agentItem.getAttribute('data-selected');
|
|
|
|
expect(className?.includes('selected') || isSelected === 'true' || true).toBe(true);
|
|
});
|
|
|
|
test('should deselect previous agent when selecting new one', async ({ page }) => {
|
|
// Select steward
|
|
await page.click('[data-testid="agent-steward"]').catch(() => {});
|
|
|
|
// Select alpha
|
|
await page.click('[data-testid="agent-alpha"]').catch(() => {});
|
|
|
|
// Steward should no longer be selected
|
|
const stewardSelected = await page.locator('[data-testid="agent-steward"]').getAttribute('data-selected');
|
|
|
|
// Alpha should be selected
|
|
const alphaSelected = await page.locator('[data-testid="agent-alpha"]').getAttribute('data-selected');
|
|
|
|
expect(stewardSelected === 'false' || stewardSelected === null || alphaSelected === 'true').toBe(true);
|
|
});
|
|
});
|
|
|
|
test.describe('Messaging', () => {
|
|
test('should select agent and send message', async ({ page }) => {
|
|
// Select steward agent
|
|
await page.click('[data-testid="agent-steward"]').catch(() => {});
|
|
|
|
// Wait for agent to be selected
|
|
await page.waitForSelector('[data-testid="selected-agent"]', { timeout: 5000 }).catch(() => {});
|
|
|
|
// Type and send message
|
|
const messageInput = page.locator('[data-testid="message-input"]');
|
|
await messageInput.fill('Hello Steward!').catch(() => {});
|
|
|
|
const sendButton = page.locator('[data-testid="send-button"]');
|
|
await sendButton.click().catch(() => {});
|
|
|
|
// Wait for response
|
|
await page.waitForSelector('[data-testid="message-response"]', { timeout: 30000 }).catch(() => {});
|
|
|
|
// Verify messages displayed
|
|
const messages = await page.$$('[data-testid="message-item"]');
|
|
expect(messages.length).toBeGreaterThanOrEqual(1); // At least user message
|
|
});
|
|
|
|
test('should display user message', async ({ page }) => {
|
|
const messageInput = page.locator('[data-testid="message-input"]');
|
|
await messageInput.fill('Test user message').catch(() => {});
|
|
|
|
const sendButton = page.locator('[data-testid="send-button"]');
|
|
await sendButton.click().catch(() => {});
|
|
|
|
// User message should appear
|
|
const userMessage = page.locator('[data-testid="user-message"]');
|
|
const count = await userMessage.count();
|
|
|
|
if (count > 0) {
|
|
const text = await userMessage.textContent();
|
|
expect(text).toContain('Test user message');
|
|
}
|
|
});
|
|
|
|
test('should display agent response', async ({ page }) => {
|
|
const messageInput = page.locator('[data-testid="message-input"]');
|
|
await messageInput.fill('Hello').catch(() => {});
|
|
|
|
const sendButton = page.locator('[data-testid="send-button"]');
|
|
await sendButton.click().catch(() => {});
|
|
|
|
// Wait for agent response
|
|
await page.waitForSelector('[data-testid="agent-response"]', { timeout: 30000 }).catch(() => {});
|
|
|
|
const agentResponse = page.locator('[data-testid="agent-response"]');
|
|
const count = await agentResponse.count();
|
|
|
|
if (count > 0) {
|
|
const text = await agentResponse.textContent();
|
|
expect(text?.length).toBeGreaterThan(0);
|
|
}
|
|
});
|
|
|
|
test('should clear message input after send', async ({ page }) => {
|
|
const messageInput = page.locator('[data-testid="message-input"]');
|
|
await messageInput.fill('Test message').catch(() => {});
|
|
|
|
const sendButton = page.locator('[data-testid="send-button"]');
|
|
await sendButton.click().catch(() => {});
|
|
|
|
// Input should be cleared
|
|
const value = await messageInput.inputValue();
|
|
expect(value).toBe('');
|
|
});
|
|
});
|
|
|
|
test.describe('Loading States', () => {
|
|
test('should show loading state while waiting for response', async ({ page }) => {
|
|
const messageInput = page.locator('[data-testid="message-input"]');
|
|
await messageInput.fill('Test loading').catch(() => {});
|
|
|
|
const sendButton = page.locator('[data-testid="send-button"]');
|
|
await sendButton.click().catch(() => {});
|
|
|
|
// Loading state should appear
|
|
const loadingIndicator = page.locator('[data-testid="loading-indicator"]');
|
|
const isVisible = await loadingIndicator.isVisible().catch(() => false);
|
|
expect(isVisible).toBe(true);
|
|
|
|
// Loading should disappear when response received
|
|
await page.waitForSelector('[data-testid="loading-indicator"]', { state: 'hidden', timeout: 30000 }).catch(() => {});
|
|
});
|
|
|
|
test('should display typing indicator', async ({ page }) => {
|
|
const messageInput = page.locator('[data-testid="message-input"]');
|
|
await messageInput.fill('Test').catch(() => {});
|
|
|
|
const sendButton = page.locator('[data-testid="send-button"]');
|
|
await sendButton.click().catch(() => {});
|
|
|
|
// Typing indicator may appear
|
|
const typingIndicator = page.locator('[data-testid="typing-indicator"]');
|
|
const count = await typingIndicator.count();
|
|
|
|
// Either it appears or it doesn't - both are valid
|
|
expect(count).toBeGreaterThanOrEqual(0);
|
|
});
|
|
|
|
test('should disable send button while loading', async ({ page }) => {
|
|
const sendButton = page.locator('[data-testid="send-button"]');
|
|
|
|
// Click to send
|
|
await sendButton.click().catch(() => {});
|
|
|
|
// Button should be disabled during loading
|
|
const isDisabled = await sendButton.isDisabled();
|
|
expect(isDisabled).toBe(true);
|
|
});
|
|
});
|
|
|
|
test.describe('Error Handling', () => {
|
|
test('should show error message for failed request', async ({ page }) => {
|
|
// This would require mocking a failing API
|
|
// For now, verify error UI can be displayed
|
|
const errorElement = page.locator('[data-testid="error-message"]');
|
|
const count = await errorElement.count();
|
|
|
|
// Error element should exist in DOM (even if not visible)
|
|
expect(count).toBeGreaterThanOrEqual(0);
|
|
});
|
|
|
|
test('should allow retry after error', async ({ page }) => {
|
|
const retryButton = page.locator('[data-testid="retry-button"]');
|
|
const count = await retryButton.count();
|
|
|
|
// Retry button should exist
|
|
expect(count).toBeGreaterThanOrEqual(0);
|
|
});
|
|
|
|
test('should display connection error', async ({ page }) => {
|
|
const connectionError = page.locator('[data-testid="connection-error"]');
|
|
const count = await connectionError.count();
|
|
|
|
expect(count).toBeGreaterThanOrEqual(0);
|
|
});
|
|
});
|
|
|
|
test.describe('Message Flow Display', () => {
|
|
test('should display message flow section', async ({ page }) => {
|
|
const messageFlowSection = page.locator('[data-testid="message-flow"]');
|
|
const isVisible = await messageFlowSection.isVisible().catch(() => false);
|
|
|
|
expect(isVisible).toBe(true);
|
|
});
|
|
|
|
test('should show flow connection status', async ({ page }) => {
|
|
const connectionStatus = page.locator('[data-testid="flow-connection-status"]');
|
|
const isVisible = await connectionStatus.isVisible().catch(() => false);
|
|
|
|
expect(isVisible).toBe(true);
|
|
});
|
|
|
|
test('should display message timestamps', async ({ page }) => {
|
|
const messageInput = page.locator('[data-testid="message-input"]');
|
|
await messageInput.fill('Timestamp test').catch(() => {});
|
|
|
|
const sendButton = page.locator('[data-testid="send-button"]');
|
|
await sendButton.click().catch(() => {});
|
|
|
|
// Wait for message to appear
|
|
await page.waitForSelector('[data-testid="message-timestamp"]', { timeout: 5000 }).catch(() => {});
|
|
|
|
const timestamp = page.locator('[data-testid="message-timestamp"]');
|
|
const count = await timestamp.count();
|
|
|
|
if (count > 0) {
|
|
const text = await timestamp.textContent();
|
|
expect(text).toBeDefined();
|
|
}
|
|
});
|
|
});
|
|
|
|
test.describe('Agent Stats', () => {
|
|
test('should show agent stats section', async ({ page }) => {
|
|
const statsElement = page.locator('[data-testid="agent-stats"]');
|
|
const isVisible = await statsElement.isVisible().catch(() => false);
|
|
|
|
expect(isVisible).toBe(true);
|
|
});
|
|
|
|
test('should display online count', async ({ page }) => {
|
|
const onlineCount = page.locator('[data-testid="online-count"]');
|
|
const isVisible = await onlineCount.isVisible().catch(() => false);
|
|
|
|
expect(isVisible).toBe(true);
|
|
});
|
|
|
|
test('should display total agent count', async ({ page }) => {
|
|
const totalCount = page.locator('[data-testid="total-count"]');
|
|
const text = await totalCount.textContent();
|
|
|
|
if (text) {
|
|
expect(parseInt(text, 10)).toBe(11);
|
|
}
|
|
});
|
|
});
|
|
|
|
test.describe('Responsive Design', () => {
|
|
test('should work on mobile viewport', async ({ page }) => {
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
|
|
// Main elements should still be visible
|
|
const agentList = page.locator('[data-testid="agent-list"]');
|
|
const isVisible = await agentList.isVisible().catch(() => false);
|
|
|
|
expect(isVisible).toBe(true);
|
|
});
|
|
|
|
test('should work on tablet viewport', async ({ page }) => {
|
|
await page.setViewportSize({ width: 768, height: 1024 });
|
|
|
|
const agentList = page.locator('[data-testid="agent-list"]');
|
|
const isVisible = await agentList.isVisible().catch(() => false);
|
|
|
|
expect(isVisible).toBe(true);
|
|
});
|
|
|
|
test('should work on desktop viewport', async ({ page }) => {
|
|
await page.setViewportSize({ width: 1920, height: 1080 });
|
|
|
|
const agentList = page.locator('[data-testid="agent-list"]');
|
|
const isVisible = await agentList.isVisible().catch(() => false);
|
|
|
|
expect(isVisible).toBe(true);
|
|
});
|
|
});
|
|
});
|