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,13 @@ 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();
|
||||
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');
|
||||
|
|
@ -24,12 +27,12 @@ async function openSettings(): Promise<void> {
|
|||
}
|
||||
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);
|
||||
}
|
||||
|
|
@ -46,10 +49,10 @@ async function closeSettings(): Promise<void> {
|
|||
}
|
||||
}
|
||||
|
||||
describe('BTerminal — Terminal Tabs', () => {
|
||||
describe('Agent Orchestrator — Terminal Tabs', () => {
|
||||
before(async () => {
|
||||
await resetToHomeState();
|
||||
// Ensure Claude tab is active so terminal section is visible
|
||||
// Ensure Model tab is active so terminal section is visible
|
||||
await browser.execute(() => {
|
||||
const tab = document.querySelector('.project-box .ptab');
|
||||
if (tab) (tab as HTMLElement).click();
|
||||
|
|
@ -57,8 +60,8 @@ describe('BTerminal — Terminal Tabs', () => {
|
|||
await browser.pause(300);
|
||||
});
|
||||
|
||||
it('should show terminal toggle on Claude tab', async () => {
|
||||
const toggle = await browser.$('.terminal-toggle');
|
||||
it('should show terminal toggle on Model tab', async () => {
|
||||
const toggle = await browser.$('[data-testid="terminal-toggle"]');
|
||||
await expect(toggle).toBeDisplayed();
|
||||
|
||||
const label = await browser.$('.toggle-label');
|
||||
|
|
@ -69,13 +72,13 @@ describe('BTerminal — Terminal Tabs', () => {
|
|||
it('should expand terminal area on toggle click', async () => {
|
||||
// Click terminal toggle via JS
|
||||
await browser.execute(() => {
|
||||
const toggle = document.querySelector('.terminal-toggle');
|
||||
const toggle = document.querySelector('[data-testid="terminal-toggle"]');
|
||||
if (toggle) (toggle as HTMLElement).click();
|
||||
});
|
||||
await browser.pause(500);
|
||||
|
||||
const termArea = await browser.$('.project-terminal-area');
|
||||
await expect(termArea).toBeDisplayed();
|
||||
const termTabs = await browser.$('[data-testid="terminal-tabs"]');
|
||||
await expect(termTabs).toBeDisplayed();
|
||||
|
||||
// Chevron should have expanded class
|
||||
const chevron = await browser.$('.toggle-chevron.expanded');
|
||||
|
|
@ -83,14 +86,14 @@ describe('BTerminal — Terminal Tabs', () => {
|
|||
});
|
||||
|
||||
it('should show add tab button when terminal expanded', async () => {
|
||||
const addBtn = await browser.$('.tab-add');
|
||||
const addBtn = await browser.$('[data-testid="tab-add"]');
|
||||
await expect(addBtn).toBeDisplayed();
|
||||
});
|
||||
|
||||
it('should add a shell tab', async () => {
|
||||
// Click add tab button via JS (Svelte onclick)
|
||||
// Click add tab button via JS
|
||||
await browser.execute(() => {
|
||||
const btn = document.querySelector('.tab-bar .tab-add');
|
||||
const btn = document.querySelector('[data-testid="tab-add"]');
|
||||
if (btn) (btn as HTMLElement).click();
|
||||
});
|
||||
await browser.pause(500);
|
||||
|
|
@ -111,7 +114,7 @@ describe('BTerminal — Terminal Tabs', () => {
|
|||
it('should add a second shell tab and switch between them', async () => {
|
||||
// Add second tab via JS
|
||||
await browser.execute(() => {
|
||||
const btn = document.querySelector('.tab-bar .tab-add');
|
||||
const btn = document.querySelector('[data-testid="tab-add"]');
|
||||
if (btn) (btn as HTMLElement).click();
|
||||
});
|
||||
await browser.pause(500);
|
||||
|
|
@ -155,7 +158,6 @@ describe('BTerminal — Terminal Tabs', () => {
|
|||
after(async () => {
|
||||
// Clean up: close remaining tabs and collapse terminal
|
||||
await browser.execute(() => {
|
||||
// Close all tabs
|
||||
const closeBtns = document.querySelectorAll('.tab-close');
|
||||
closeBtns.forEach(btn => (btn as HTMLElement).click());
|
||||
});
|
||||
|
|
@ -163,7 +165,7 @@ describe('BTerminal — Terminal Tabs', () => {
|
|||
|
||||
// Collapse terminal
|
||||
await browser.execute(() => {
|
||||
const toggle = document.querySelector('.terminal-toggle');
|
||||
const toggle = document.querySelector('[data-testid="terminal-toggle"]');
|
||||
if (toggle) {
|
||||
const chevron = toggle.querySelector('.toggle-chevron.expanded');
|
||||
if (chevron) (toggle as HTMLElement).click();
|
||||
|
|
@ -173,16 +175,10 @@ describe('BTerminal — Terminal Tabs', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('BTerminal — Theme Switching', () => {
|
||||
describe('Agent Orchestrator — Theme Switching', () => {
|
||||
before(async () => {
|
||||
await resetToHomeState();
|
||||
await openSettings();
|
||||
// Scroll to top for theme dropdown
|
||||
await browser.execute(() => {
|
||||
const content = document.querySelector('.panel-content') || document.querySelector('.sidebar-panel');
|
||||
if (content) content.scrollTop = 0;
|
||||
});
|
||||
await browser.pause(300);
|
||||
});
|
||||
|
||||
after(async () => {
|
||||
|
|
@ -194,15 +190,15 @@ describe('BTerminal — Theme Switching', () => {
|
|||
await browser.execute(() => {
|
||||
const openMenu = document.querySelector('.dropdown-menu');
|
||||
if (openMenu) {
|
||||
const trigger = openMenu.closest('.custom-dropdown')?.querySelector('.dropdown-trigger');
|
||||
const trigger = openMenu.closest('.custom-dropdown')?.querySelector('.dropdown-btn');
|
||||
if (trigger) (trigger as HTMLElement).click();
|
||||
}
|
||||
});
|
||||
await browser.pause(200);
|
||||
|
||||
// Click the first dropdown trigger (theme dropdown)
|
||||
// Click the theme dropdown button (first dropdown in appearance)
|
||||
await browser.execute(() => {
|
||||
const trigger = document.querySelector('.settings-tab .custom-dropdown .dropdown-trigger');
|
||||
const trigger = document.querySelector('.appearance .custom-dropdown .dropdown-btn');
|
||||
if (trigger) (trigger as HTMLElement).click();
|
||||
});
|
||||
await browser.pause(500);
|
||||
|
|
@ -211,12 +207,12 @@ describe('BTerminal — Theme Switching', () => {
|
|||
await menu.waitForExist({ timeout: 5000 });
|
||||
|
||||
// Should have group labels (Catppuccin, Editor, Deep Dark)
|
||||
const groupLabels = await browser.$$('.dropdown-group-label');
|
||||
const groupLabels = await browser.$$('.group-label');
|
||||
expect(groupLabels.length).toBeGreaterThanOrEqual(2);
|
||||
|
||||
// Close dropdown
|
||||
await browser.execute(() => {
|
||||
const trigger = document.querySelector('.settings-tab .custom-dropdown .dropdown-trigger');
|
||||
const trigger = document.querySelector('.appearance .custom-dropdown .dropdown-btn');
|
||||
if (trigger) (trigger as HTMLElement).click();
|
||||
});
|
||||
await browser.pause(300);
|
||||
|
|
@ -228,20 +224,19 @@ describe('BTerminal — Theme Switching', () => {
|
|||
return getComputedStyle(document.documentElement).getPropertyValue('--ctp-base').trim();
|
||||
});
|
||||
|
||||
// Open theme dropdown (first custom-dropdown in settings)
|
||||
// Open theme dropdown
|
||||
await browser.execute(() => {
|
||||
const trigger = document.querySelector('.settings-tab .custom-dropdown .dropdown-trigger');
|
||||
const trigger = document.querySelector('.appearance .custom-dropdown .dropdown-btn');
|
||||
if (trigger) (trigger as HTMLElement).click();
|
||||
});
|
||||
await browser.pause(500);
|
||||
|
||||
// Wait for dropdown menu
|
||||
const menu = await browser.$('.dropdown-menu');
|
||||
await menu.waitForExist({ timeout: 5000 });
|
||||
|
||||
// Click the first non-active theme option
|
||||
const changed = await browser.execute(() => {
|
||||
const options = document.querySelectorAll('.dropdown-menu .dropdown-option:not(.active)');
|
||||
const options = document.querySelectorAll('.dropdown-menu .dropdown-item:not(.active)');
|
||||
if (options.length > 0) {
|
||||
(options[0] as HTMLElement).click();
|
||||
return true;
|
||||
|
|
@ -259,12 +254,12 @@ describe('BTerminal — Theme Switching', () => {
|
|||
|
||||
// Switch back to Catppuccin Mocha (first option) to restore state
|
||||
await browser.execute(() => {
|
||||
const trigger = document.querySelector('.settings-tab .custom-dropdown .dropdown-trigger');
|
||||
const trigger = document.querySelector('.appearance .custom-dropdown .dropdown-btn');
|
||||
if (trigger) (trigger as HTMLElement).click();
|
||||
});
|
||||
await browser.pause(500);
|
||||
await browser.execute(() => {
|
||||
const options = document.querySelectorAll('.dropdown-menu .dropdown-option');
|
||||
const options = document.querySelectorAll('.dropdown-menu .dropdown-item');
|
||||
if (options.length > 0) (options[0] as HTMLElement).click();
|
||||
});
|
||||
await browser.pause(300);
|
||||
|
|
@ -272,7 +267,7 @@ describe('BTerminal — Theme Switching', () => {
|
|||
|
||||
it('should show active theme option', async () => {
|
||||
await browser.execute(() => {
|
||||
const trigger = document.querySelector('.settings-tab .custom-dropdown .dropdown-trigger');
|
||||
const trigger = document.querySelector('.appearance .custom-dropdown .dropdown-btn');
|
||||
if (trigger) (trigger as HTMLElement).click();
|
||||
});
|
||||
await browser.pause(500);
|
||||
|
|
@ -280,11 +275,11 @@ describe('BTerminal — Theme Switching', () => {
|
|||
const menu = await browser.$('.dropdown-menu');
|
||||
await menu.waitForExist({ timeout: 5000 });
|
||||
|
||||
const activeOption = await browser.$('.dropdown-option.active');
|
||||
const activeOption = await browser.$('.dropdown-item.active');
|
||||
await expect(activeOption).toBeExisting();
|
||||
|
||||
await browser.execute(() => {
|
||||
const trigger = document.querySelector('.settings-tab .custom-dropdown .dropdown-trigger');
|
||||
const trigger = document.querySelector('.appearance .custom-dropdown .dropdown-btn');
|
||||
if (trigger) (trigger as HTMLElement).click();
|
||||
});
|
||||
await browser.pause(300);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue