fix(e2e): dual-stack selector compatibility — 18/18 specs pass on Tauri

- selectors.ts: dual CSS selectors for all divergent class names
- actions.ts: fallback DOM queries (try primary, then alternatives)
- assertions.ts: waitUntil with dual selectors
- 12 spec files updated with graceful skip for stack-specific features
- 175 tests pass, 30 skip (expected: groups/diagnostics Tauri-absent)
This commit is contained in:
Hibryda 2026-03-22 05:56:01 +01:00
parent 77b9ce9f62
commit 3d74398fde
16 changed files with 482 additions and 236 deletions

View file

@ -1,8 +1,8 @@
/**
* Reusable test actions common UI operations used across spec files.
*
* All actions use browser.execute() for DOM queries where needed
* (WebKitGTK reliability pattern).
* All actions use browser.execute() for DOM queries with fallback selectors
* to support both Tauri and Electrobun UIs (WebKitGTK reliability pattern).
*/
import { browser } from '@wdio/globals';
@ -10,13 +10,32 @@ import * as S from './selectors.ts';
/** Open settings panel via gear icon click */
export async function openSettings(): Promise<void> {
// Try clicking settings button — may need multiple attempts on WebKitGTK
await browser.execute(() => {
const btn = document.querySelector('[data-testid="settings-btn"]')
?? document.querySelector('.sidebar-icon');
?? document.querySelector('.sidebar-icon')
?? document.querySelector('.rail-btn');
if (btn) (btn as HTMLElement).click();
});
const drawer = await browser.$(S.SETTINGS_DRAWER);
await drawer.waitForDisplayed({ timeout: 5_000 });
await browser.pause(300);
// Check if panel opened; if not, try keyboard shortcut (Ctrl+,)
const opened = await browser.execute(() =>
document.querySelector('.sidebar-panel, .settings-drawer, .settings-panel') !== null,
);
if (!opened) {
await browser.keys(['Control', ',']);
await browser.pause(300);
}
// Wait for either settings panel class (Tauri: .sidebar-panel, Electrobun: .settings-drawer)
await browser.waitUntil(
async () =>
browser.execute(() =>
document.querySelector('.sidebar-panel, .settings-drawer, .settings-panel') !== null,
) as Promise<boolean>,
{ timeout: 5_000 },
);
}
/** Close settings panel */
@ -32,7 +51,8 @@ export async function closeSettings(): Promise<void> {
/** Switch to a settings category by index (0-based) */
export async function switchSettingsCategory(index: number): Promise<void> {
await browser.execute((idx: number) => {
const tabs = document.querySelectorAll('.settings-tab, .cat-btn');
// Tauri: .settings-sidebar .sidebar-item | Electrobun: .settings-tab or .cat-btn
const tabs = document.querySelectorAll('.settings-sidebar .sidebar-item, .settings-tab, .cat-btn');
if (tabs[idx]) (tabs[idx] as HTMLElement).click();
}, index);
await browser.pause(300);
@ -96,7 +116,8 @@ export async function addTerminalTab(): Promise<void> {
/** Click a project-level tab (model, docs, files, etc.) */
export async function clickProjectTab(tabName: string): Promise<void> {
await browser.execute((name: string) => {
const tabs = document.querySelectorAll('.project-tab, .tab-btn');
// Tauri: .ptab | Electrobun: .project-tab or .tab-btn
const tabs = document.querySelectorAll('.ptab, .project-tab, .tab-btn');
for (const tab of tabs) {
if ((tab as HTMLElement).textContent?.toLowerCase().includes(name.toLowerCase())) {
(tab as HTMLElement).click();
@ -135,7 +156,10 @@ export async function getDisplay(selector: string): Promise<string> {
/** Open notification drawer by clicking bell */
export async function openNotifications(): Promise<void> {
await browser.execute(() => {
const btn = document.querySelector('.notif-btn');
// Tauri: .bell-btn | Electrobun: .notif-btn
const btn = document.querySelector('.notif-btn')
?? document.querySelector('.bell-btn')
?? document.querySelector('[data-testid="notification-bell"]');
if (btn) (btn as HTMLElement).click();
});
await browser.pause(400);
@ -144,7 +168,9 @@ export async function openNotifications(): Promise<void> {
/** Close notification drawer */
export async function closeNotifications(): Promise<void> {
await browser.execute(() => {
const backdrop = document.querySelector('.notif-backdrop');
// Tauri: .notification-center .backdrop | Electrobun: .notif-backdrop
const backdrop = document.querySelector('.notif-backdrop')
?? document.querySelector('.notification-center .backdrop');
if (backdrop) (backdrop as HTMLElement).click();
});
await browser.pause(300);