test(e2e): update page objects for tabbed config page UI

Update ImportPage, SettingsPage, and plugin test helpers to navigate
to correct tabs after config page refactoring. Import/Export section
is now in Sync & Backup tab, plugins in Plugins tab.

Fixes 6 failing E2E tests:
- archive-import-persistence (3 tests)
- archive-subtasks (3 tests)
This commit is contained in:
Johannes Millan 2026-01-17 13:20:35 +01:00
parent 1c0581bca8
commit 1f3098a48f
3 changed files with 58 additions and 5 deletions

View file

@ -97,7 +97,25 @@ export const waitForPluginManagementInit = async (
// Wait a bit for the page to stabilize
await page.waitForTimeout(500);
// Expand plugin section if collapsed and scroll it into view
// Navigate to the Plugins tab (4th tab, index 3)
// The plugin section is now inside the Plugins tab, not directly on the page
await page.evaluate(() => {
const pluginsTab = Array.from(
document.querySelectorAll('mat-tab-header .mat-mdc-tab'),
).find((tab) => {
const icon = tab.querySelector('mat-icon');
return icon?.textContent?.trim() === 'extension';
});
if (pluginsTab) {
(pluginsTab as HTMLElement).click();
}
});
// Wait for tab content to load
await page.waitForTimeout(500);
// Now expand plugin section if collapsed and scroll it into view
await page.evaluate(() => {
const pluginSection = document.querySelector('.plugin-section');
if (pluginSection) {

View file

@ -40,8 +40,34 @@ export class ImportPage extends BasePage {
// Wait for page content to fully render
await this.page.waitForTimeout(1000);
// The file-imex component is inside the collapsible "Import/Export" section
// First, find and expand the Import/Export section
// Dismiss any tour/welcome dialogs that might be blocking interactions
// Look for Shepherd tour dialog or Material dialogs
const tourDialog = this.page.locator('[data-shepherd-step-id="Welcome"]');
if (await tourDialog.isVisible().catch(() => false)) {
// Close button is in the tour dialog
const closeBtn = tourDialog.locator(
'.shepherd-cancel-icon, button.shepherd-cancel-icon',
);
if (await closeBtn.isVisible().catch(() => false)) {
await closeBtn.click();
await this.page.waitForTimeout(300);
} else {
// Try pressing Escape to dismiss
await this.page.keyboard.press('Escape');
await this.page.waitForTimeout(300);
}
}
// The file-imex component is now in the "Sync & Backup" tab (5th tab, index 4)
// Step 1: Click on the "Sync & Backup" tab to navigate to it
const syncBackupTab = this.page.locator(
'mat-tab-header .mat-mdc-tab:has(mat-icon:has-text("cloud_sync"))',
);
await syncBackupTab.waitFor({ state: 'visible', timeout: 10000 });
await syncBackupTab.click();
await this.page.waitForTimeout(500);
// Step 2: Within the tab, expand the "Import/Export" collapsible section
const importExportSection = this.page.locator(
'collapsible:has-text("Import/Export")',
);
@ -53,7 +79,7 @@ export class ImportPage extends BasePage {
await collapsibleHeader.click();
await this.page.waitForTimeout(500);
// Now the file-imex component should be visible
// Now the file-imex component should be visible in the active tab
await this.importFromFileBtn.waitFor({ state: 'visible', timeout: 10000 });
}

View file

@ -64,9 +64,18 @@ export class SettingsPage extends BasePage {
/**
* Expand plugin section
* Note: The plugin section is now in the "Plugins" tab (4th tab, index 3)
*/
async expandPluginSection(): Promise<void> {
await this.expandSection(PLUGIN_SECTION);
// The plugin section is now in the "Plugins" tab (4th tab, index 3)
// Click on the "Plugins" tab to navigate to it
const pluginsTab = this.page.locator(
'mat-tab-header .mat-mdc-tab:has(mat-icon:has-text("extension"))',
);
await pluginsTab.waitFor({ state: 'visible', timeout: 10000 });
await pluginsTab.click();
await this.page.waitForTimeout(500);
// Ensure plugin management component and at least file input are visible
await this.pluginManagement.waitFor({ state: 'visible', timeout: 5000 });
await this.page