fix(e2e): update selectors for redesigned UI (9 spec files)
- BTerminal → Agent Orchestrator (title, describe blocks, LLM context) - Settings: .sidebar-panel → .settings-panel .settings-content, .dropdown-trigger → .dropdown-btn, .dropdown-option → .dropdown-item - Settings open: [data-testid=settings-btn] + .panel-close - Font controls: .size-control → .stepper, .size-btn → stepper button - Terminal: data-testid selectors for toggle/tab-add - Agent pane: .cost-bar → .status-strip/.done-bar, context meter conditional - Project header: .cwd → .info-cwd - Health: .health-dot → .status-dot - Multi-project: proper this.skip() when single-project fixture
This commit is contained in:
Hibryda
parent
6459877c89
commit
1b838eb9fc
8 changed files with 233 additions and 206 deletions
|
|
@ -2,10 +2,14 @@ import { browser, expect } from '@wdio/globals';
|
|||
|
||||
/** Reset UI to home state (close any open panels/overlays). */
|
||||
async function resetToHomeState(): Promise<void> {
|
||||
const settingsPanel = await browser.$('.settings-panel');
|
||||
if (await settingsPanel.isExisting()) {
|
||||
const closeBtn = await browser.$('.settings-close');
|
||||
if (await closeBtn.isExisting()) await closeBtn.click();
|
||||
// Close sidebar panel if open
|
||||
const panel = await browser.$('.sidebar-panel');
|
||||
if (await panel.isDisplayed().catch(() => false)) {
|
||||
await browser.execute(() => {
|
||||
const btn = document.querySelector('.panel-close');
|
||||
if (btn) (btn as HTMLElement).click();
|
||||
});
|
||||
await browser.pause(500);
|
||||
}
|
||||
const overlay = await browser.$('.search-overlay');
|
||||
if (await overlay.isExisting()) await browser.keys('Escape');
|
||||
|
|
@ -16,22 +20,21 @@ async function openSettings(): Promise<void> {
|
|||
const panel = await browser.$('.sidebar-panel');
|
||||
const isOpen = await panel.isDisplayed().catch(() => false);
|
||||
if (!isOpen) {
|
||||
// Use data-testid for unambiguous selection
|
||||
await browser.execute(() => {
|
||||
const btn = document.querySelector('[data-testid="settings-btn"]');
|
||||
if (btn) (btn as HTMLElement).click();
|
||||
});
|
||||
await panel.waitForDisplayed({ timeout: 5000 });
|
||||
}
|
||||
// Wait for settings content to mount
|
||||
// Wait for settings panel content to mount (SettingsPanel has .settings-panel inside sidebar-panel)
|
||||
await browser.waitUntil(
|
||||
async () => {
|
||||
const count = await browser.execute(() =>
|
||||
document.querySelectorAll('.settings-tab .settings-section').length,
|
||||
const has = await browser.execute(() =>
|
||||
document.querySelector('.settings-panel .settings-content') !== null,
|
||||
);
|
||||
return (count as number) >= 1;
|
||||
return has as boolean;
|
||||
},
|
||||
{ timeout: 5000, timeoutMsg: 'Settings sections did not render within 5s' },
|
||||
{ timeout: 5000, timeoutMsg: 'Settings content did not render within 5s' },
|
||||
);
|
||||
await browser.pause(200);
|
||||
}
|
||||
|
|
@ -48,7 +51,7 @@ async function closeSettings(): Promise<void> {
|
|||
}
|
||||
}
|
||||
|
||||
describe('BTerminal — Settings Panel', () => {
|
||||
describe('Agent Orchestrator — Settings Panel', () => {
|
||||
before(async () => {
|
||||
await resetToHomeState();
|
||||
await openSettings();
|
||||
|
|
@ -58,26 +61,25 @@ describe('BTerminal — Settings Panel', () => {
|
|||
await closeSettings();
|
||||
});
|
||||
|
||||
it('should display the settings tab container', async () => {
|
||||
const settingsTab = await browser.$('.settings-tab');
|
||||
await expect(settingsTab).toBeDisplayed();
|
||||
it('should display the settings panel container', async () => {
|
||||
const settingsPanel = await browser.$('.settings-panel');
|
||||
await expect(settingsPanel).toBeDisplayed();
|
||||
});
|
||||
|
||||
it('should show settings sections', async () => {
|
||||
const sections = await browser.$$('.settings-section');
|
||||
expect(sections.length).toBeGreaterThanOrEqual(1);
|
||||
it('should show settings category sidebar', async () => {
|
||||
const items = await browser.$$('.settings-sidebar .sidebar-item');
|
||||
expect(items.length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
|
||||
it('should display theme dropdown', async () => {
|
||||
const dropdown = await browser.$('.custom-dropdown .dropdown-trigger');
|
||||
const dropdown = await browser.$('.appearance .custom-dropdown .dropdown-btn');
|
||||
await expect(dropdown).toBeDisplayed();
|
||||
});
|
||||
|
||||
it('should open theme dropdown and show options', async () => {
|
||||
// Use JS click — WebDriver clicks don't reliably trigger Svelte onclick
|
||||
// on buttons inside scrollable panels via WebKit2GTK/tauri-driver
|
||||
// Use JS click for reliability
|
||||
await browser.execute(() => {
|
||||
const trigger = document.querySelector('.custom-dropdown .dropdown-trigger');
|
||||
const trigger = document.querySelector('.appearance .custom-dropdown .dropdown-btn');
|
||||
if (trigger) (trigger as HTMLElement).click();
|
||||
});
|
||||
await browser.pause(500);
|
||||
|
|
@ -85,33 +87,44 @@ describe('BTerminal — Settings Panel', () => {
|
|||
const menu = await browser.$('.dropdown-menu');
|
||||
await menu.waitForExist({ timeout: 3000 });
|
||||
|
||||
const options = await browser.$$('.dropdown-option');
|
||||
const options = await browser.$$('.dropdown-item');
|
||||
expect(options.length).toBeGreaterThan(0);
|
||||
|
||||
// Close dropdown by clicking trigger again
|
||||
await browser.execute(() => {
|
||||
const trigger = document.querySelector('.custom-dropdown .dropdown-trigger');
|
||||
const trigger = document.querySelector('.appearance .custom-dropdown .dropdown-btn');
|
||||
if (trigger) (trigger as HTMLElement).click();
|
||||
});
|
||||
await browser.pause(300);
|
||||
});
|
||||
|
||||
it('should display group list', async () => {
|
||||
// Groups section is below Appearance/Defaults/Providers — scroll into view
|
||||
it('should display group list in Projects category', async () => {
|
||||
// Switch to Projects category
|
||||
await browser.execute(() => {
|
||||
const el = document.querySelector('.group-list');
|
||||
if (el) el.scrollIntoView({ behavior: 'instant', block: 'center' });
|
||||
const items = document.querySelectorAll('.settings-sidebar .sidebar-item');
|
||||
for (const item of items) {
|
||||
if (item.textContent?.includes('Projects')) {
|
||||
(item as HTMLElement).click();
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
await browser.pause(300);
|
||||
|
||||
const groupList = await browser.$('.group-list');
|
||||
await expect(groupList).toBeDisplayed();
|
||||
|
||||
// Switch back to Appearance
|
||||
await browser.execute(() => {
|
||||
const items = document.querySelectorAll('.settings-sidebar .sidebar-item');
|
||||
if (items[0]) (items[0] as HTMLElement).click();
|
||||
});
|
||||
await browser.pause(300);
|
||||
});
|
||||
|
||||
it('should close settings panel with close button', async () => {
|
||||
// Ensure settings is open
|
||||
await openSettings();
|
||||
|
||||
// Use JS click for reliability
|
||||
await browser.execute(() => {
|
||||
const btn = document.querySelector('.panel-close');
|
||||
if (btn) (btn as HTMLElement).click();
|
||||
|
|
@ -123,71 +136,79 @@ describe('BTerminal — Settings Panel', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('BTerminal — Settings Interaction', () => {
|
||||
describe('Agent Orchestrator — Settings Interaction', () => {
|
||||
before(async () => {
|
||||
await resetToHomeState();
|
||||
await openSettings();
|
||||
// Scroll to top for font controls
|
||||
await browser.execute(() => {
|
||||
const content = document.querySelector('.panel-content') || document.querySelector('.sidebar-panel');
|
||||
if (content) content.scrollTop = 0;
|
||||
});
|
||||
await browser.pause(300);
|
||||
});
|
||||
|
||||
after(async () => {
|
||||
await closeSettings();
|
||||
});
|
||||
|
||||
it('should show font size controls with increment/decrement', async () => {
|
||||
const sizeControls = await browser.$$('.size-control');
|
||||
expect(sizeControls.length).toBeGreaterThanOrEqual(1);
|
||||
it('should show font size controls with increment/decrement (stepper)', async () => {
|
||||
const steppers = await browser.$$('.stepper');
|
||||
expect(steppers.length).toBeGreaterThanOrEqual(1);
|
||||
|
||||
const sizeBtns = await browser.$$('.size-btn');
|
||||
expect(sizeBtns.length).toBeGreaterThanOrEqual(2); // at least - and + for one control
|
||||
|
||||
const sizeInput = await browser.$('.size-input');
|
||||
await expect(sizeInput).toBeExisting();
|
||||
const stepperBtns = await browser.$$('.stepper button');
|
||||
expect(stepperBtns.length).toBeGreaterThanOrEqual(2); // at least - and + for one stepper
|
||||
});
|
||||
|
||||
it('should increment font size', async () => {
|
||||
const sizeInput = await browser.$('.size-input');
|
||||
const valueBefore = await sizeInput.getValue();
|
||||
const sizeBefore = await browser.execute(() => {
|
||||
const span = document.querySelector('.stepper span');
|
||||
return span?.textContent?.trim() ?? '';
|
||||
});
|
||||
|
||||
// Click the + button (second .size-btn in first .size-control)
|
||||
// Click the + button (second button in first stepper)
|
||||
await browser.execute(() => {
|
||||
const btns = document.querySelectorAll('.size-control .size-btn');
|
||||
const btns = document.querySelectorAll('.stepper button');
|
||||
// Second button is + (first is -)
|
||||
if (btns.length >= 2) (btns[1] as HTMLElement).click();
|
||||
});
|
||||
await browser.pause(300);
|
||||
|
||||
const afterEl = await browser.$('.size-input');
|
||||
const valueAfter = await afterEl.getValue();
|
||||
expect(parseInt(valueAfter as string)).toBe(parseInt(valueBefore as string) + 1);
|
||||
const sizeAfter = await browser.execute(() => {
|
||||
const span = document.querySelector('.stepper span');
|
||||
return span?.textContent?.trim() ?? '';
|
||||
});
|
||||
const before = parseInt(sizeBefore as string);
|
||||
const after = parseInt(sizeAfter as string);
|
||||
expect(after).toBe(before + 1);
|
||||
});
|
||||
|
||||
it('should decrement font size back', async () => {
|
||||
const sizeInput = await browser.$('.size-input');
|
||||
const valueBefore = await sizeInput.getValue();
|
||||
const sizeBefore = await browser.execute(() => {
|
||||
const span = document.querySelector('.stepper span');
|
||||
return span?.textContent?.trim() ?? '';
|
||||
});
|
||||
|
||||
// Click the - button (first .size-btn)
|
||||
// Click the - button (first stepper button)
|
||||
await browser.execute(() => {
|
||||
const btns = document.querySelectorAll('.size-control .size-btn');
|
||||
const btns = document.querySelectorAll('.stepper button');
|
||||
if (btns.length >= 1) (btns[0] as HTMLElement).click();
|
||||
});
|
||||
await browser.pause(300);
|
||||
|
||||
const afterEl = await browser.$('.size-input');
|
||||
const valueAfter = await afterEl.getValue();
|
||||
expect(parseInt(valueAfter as string)).toBe(parseInt(valueBefore as string) - 1);
|
||||
const sizeAfter = await browser.execute(() => {
|
||||
const span = document.querySelector('.stepper span');
|
||||
return span?.textContent?.trim() ?? '';
|
||||
});
|
||||
const before = parseInt(sizeBefore as string);
|
||||
const after = parseInt(sizeAfter as string);
|
||||
expect(after).toBe(before - 1);
|
||||
});
|
||||
|
||||
it('should display group rows with active indicator', async () => {
|
||||
// Scroll to Groups section (below Appearance, Defaults, Providers)
|
||||
// Switch to Projects category
|
||||
await browser.execute(() => {
|
||||
const el = document.querySelector('.group-list');
|
||||
if (el) el.scrollIntoView({ behavior: 'instant', block: 'center' });
|
||||
const items = document.querySelectorAll('.settings-sidebar .sidebar-item');
|
||||
for (const item of items) {
|
||||
if (item.textContent?.includes('Projects')) {
|
||||
(item as HTMLElement).click();
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
await browser.pause(300);
|
||||
|
||||
|
|
@ -199,49 +220,46 @@ describe('BTerminal — Settings Interaction', () => {
|
|||
});
|
||||
|
||||
it('should show project cards', async () => {
|
||||
// Scroll to Projects section
|
||||
await browser.execute(() => {
|
||||
const el = document.querySelector('.project-cards');
|
||||
if (el) el.scrollIntoView({ behavior: 'instant', block: 'center' });
|
||||
});
|
||||
await browser.pause(300);
|
||||
|
||||
const cards = await browser.$$('.project-card');
|
||||
expect(cards.length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
|
||||
it('should display project card with name and path', async () => {
|
||||
const nameInput = await browser.$('.card-name-input');
|
||||
const nameInput = await browser.$('.name-input');
|
||||
await expect(nameInput).toBeExisting();
|
||||
const name = await nameInput.getValue() as string;
|
||||
expect(name.length).toBeGreaterThan(0);
|
||||
|
||||
const cwdInput = await browser.$('.cwd-input');
|
||||
await expect(cwdInput).toBeExisting();
|
||||
const cwd = await cwdInput.getValue() as string;
|
||||
expect(cwd.length).toBeGreaterThan(0);
|
||||
const pathInput = await browser.$('.path-input');
|
||||
await expect(pathInput).toBeExisting();
|
||||
const path = await pathInput.getValue() as string;
|
||||
expect(path.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should show project toggle switch', async () => {
|
||||
const toggle = await browser.$('.card-toggle');
|
||||
const toggle = await browser.$('.toggle-wrap');
|
||||
await expect(toggle).toBeExisting();
|
||||
|
||||
const track = await browser.$('.toggle-track');
|
||||
await expect(track).toBeDisplayed();
|
||||
});
|
||||
|
||||
it('should show add project form', async () => {
|
||||
// Scroll to add project form (at bottom of Projects section)
|
||||
// Scroll to add row (at bottom of Projects section)
|
||||
await browser.execute(() => {
|
||||
const el = document.querySelector('.add-project-form');
|
||||
const el = document.querySelector('.add-row');
|
||||
if (el) el.scrollIntoView({ behavior: 'instant', block: 'center' });
|
||||
});
|
||||
await browser.pause(300);
|
||||
|
||||
const addForm = await browser.$('.add-project-form');
|
||||
await expect(addForm).toBeDisplayed();
|
||||
const addRow = await browser.$('.add-row');
|
||||
await expect(addRow).toBeDisplayed();
|
||||
|
||||
const addBtn = await browser.$('.add-project-form .btn-primary');
|
||||
const addBtn = await browser.$('.add-row .btn-sm.primary');
|
||||
await expect(addBtn).toBeExisting();
|
||||
|
||||
// Switch back to Appearance
|
||||
await browser.execute(() => {
|
||||
const items = document.querySelectorAll('.settings-sidebar .sidebar-item');
|
||||
if (items[0]) (items[0] as HTMLElement).click();
|
||||
});
|
||||
await browser.pause(300);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue