fix: correct data-testid for VolumeViewer to distinguish 3D from 2D views

Changed VolumeViewer's data-testid from "vtk-view vtk-two-view" to
"vtk-view vtk-volume-view" to properly distinguish it from SliceViewer (2D).
This was causing confusion as both 2D and 3D views had the same testid.

Also updated test helpers to use the corrected, more semantic selectors.

Author: PaulHax

.github/workflows/e2e.yml

@@ -10,7 +10,7 @@ jobs:
     name: E2E Testing on ${{ matrix.os }}
     runs-on: ${{ matrix.os }}
     env:
-      DOWNLOAD_TIMEOUT: 90000
+      DOWNLOAD_TIMEOUT: 240000
     steps:
       - uses: actions/checkout@v4
         with:

src/components/VolumeViewer.vue

@@ -12,7 +12,7 @@
         <vtk-volume-view
           class="vtk-view"
           ref="vtkView"
-          data-testid="vtk-view vtk-two-view"
+          data-testid="vtk-view vtk-volume-view"
           :view-id="viewId"
           :image-id="currentImageID"
           :view-direction="viewDirection"

tests/pageobjects/volview.page.ts

@@ -51,15 +51,37 @@ class VolViewPage extends Page {
     await browser.waitUntil(
       async function viewsExist() {
         const views = await this_.views;
-        if ((await views.length) === 0) return false;
-        const inView = await Promise.all(
-          Array.from(views).map((v) => v.isDisplayed({ withinViewport: true }))
+        const viewCount = await views.length;
+
+        if (viewCount === 0) return false;
+
+        // Check if at least one view has real dimensions
+        const viewsArray = await Promise.all(
+          Array.from({ length: viewCount }).map(async (_, i) => {
+            const view = views[i];
+            const [width, height, exists] = await Promise.all([
+              view.getAttribute('width').catch(() => null),
+              view.getAttribute('height').catch(() => null),
+              view.isExisting().catch(() => false),
+            ]);
+
+            // Canvas should have real dimensions, not be a 1x1 placeholder
+            // Accept any size > 10 as a real view
+            if (width && height && exists) {
+              const w = parseInt(width, 10);
+              const h = parseInt(height, 10);
+              return w > 10 && h > 10;
+            }
+            return false;
+          })
         );
-        return inView.every(Boolean);
+
+        return viewsArray.some(Boolean);
       },
       {
         timeout,
-        timeoutMsg: `expected at least 1 view to be displayed in viewport`,
+        interval: 1000,
+        timeoutMsg: `expected at least 1 view to be rendered with real dimensions`,
       }
     );
   }
@@ -169,65 +191,20 @@ class VolViewPage extends Page {
     return exists ? pwfEditor : null;
   }
 
-  async getVolumePresetsPanel() {
-    const titles = $('div.v-expansion-panel').$$('div.v-expansion-panel-title');
-    const length = await titles.length;
-    if (length === 0) return null;
-
-    const titleTexts = await Promise.all(
-      Array.from({ length }).map(async (_, i) => ({
-        element: titles[i],
-        text: await titles[i].getText(),
-      }))
-    );
-
-    const found = titleTexts.find(({ text }) => text.includes('Color Presets'));
-    return found?.element || null;
-  }
-
-  async getCinematicRenderingPanel() {
-    const titles = $('div.v-expansion-panel').$$('div.v-expansion-panel-title');
-    const length = await titles.length;
-    if (length === 0) return null;
-
-    const titleTexts = await Promise.all(
-      Array.from({ length }).map(async (_, i) => ({
-        element: titles[i],
-        text: await titles[i].getText(),
-      }))
-    );
-
-    const found = titleTexts.find(({ text }) =>
-      text.includes('Cinematic Rendering')
-    );
-    return found?.element || null;
-  }
-
   get create3DViewMessage() {
     return $('div.text-body-2.text-center.text-medium-emphasis');
   }
 
   async getView3D() {
-    // The 3D view is the second view in the default layout (index 1)
-    // All views have the same data-testid, so we need to get by position
-    const views = $$('div[data-testid="vtk-view vtk-two-view"]');
-    const length = await views.length;
-    if (length >= 2) {
-      // The Volume (3D) view is at index 1 in the default layout
-      return views[1];
-    }
-    return null;
+    const view3D = $('div[data-testid="vtk-view vtk-volume-view"]');
+    const exists = await view3D.isExisting();
+    return exists ? view3D : null;
   }
 
   async getView2D() {
-    // Get the first view (Coronal at index 0 in default layout)
-    const views = $$('div[data-testid="vtk-view vtk-two-view"]');
-    const length = await views.length;
-    if (length >= 1) {
-      // The Coronal (2D) view is at index 0 in the default layout
-      return views[0];
-    }
-    return null;
+    const view2D = $('div[data-testid="vtk-view vtk-two-view"]');
+    const exists = await view2D.isExisting();
+    return exists ? view2D : null;
   }
 }
 

tests/specs/layers.e2e.ts

@@ -1,4 +1,4 @@
-import { DOWNLOAD_TIMEOUT } from '../../wdio.shared.conf';
+import { DOWNLOAD_TIMEOUT } from '@/wdio.shared.conf';
 import { volViewPage } from '../pageobjects/volview.page';
 import { openUrls } from './utils';
 
@@ -15,27 +15,26 @@ describe('Add Layer button', () => {
       },
     ]);
 
-    // Wait for both volumes to appear in list
     await browser.waitUntil(
       async () => {
-        const menus = volViewPage.datasetMenuButtons;
+        const menus = await volViewPage.datasetMenuButtons;
         return (await menus.length) >= 2;
       },
       {
         timeout: DOWNLOAD_TIMEOUT,
-        timeoutMsg: `Expected 2 volumes to appear in list`,
+        timeoutMsg: 'Expected at least 2 dataset menu buttons to be available',
       }
     );
 
-    // kludge for waitForViews to work
-    await browser.pause(5000);
-    // Wait for a primary selection
-    await volViewPage.waitForViews();
-    // kludge for CI (dataset not seen as layerable yet without?)
-    await browser.pause(5000);
-
     const menus = await volViewPage.datasetMenuButtons;
+    const menuCount = await menus.length;
+    if (menuCount < 2) {
+      throw new Error(
+        `Expected at least 2 dataset menu buttons, but found ${menuCount}`
+      );
+    }
     await menus[1].click();
+
     await browser.waitUntil(
       async () => {
         const addLayerButton = await $(

tests/specs/rendering-controls-3d-view.e2e.ts

@@ -15,37 +15,24 @@ describe('3D Rendering Controls', () => {
     const renderTab = volViewPage.renderingModuleTab;
     await renderTab.click();
 
-    // Verify 3D controls are shown even with 2D view active
-    const volumeRenderingSection = await volViewPage.getVolumeRenderingSection();
+    const view3D = await volViewPage.getView3D();
+
+    const volumeRenderingSection =
+      await volViewPage.getVolumeRenderingSection();
     await expect(volumeRenderingSection).toExist();
     await expect(volumeRenderingSection).toBeDisplayed();
 
-    // Verify expansion panels exist
-    const expansionPanels = $$('div.v-expansion-panel');
-    const panelCount = await expansionPanels.length;
-    await expect(panelCount).toBeGreaterThan(0);
+    const pwfCanvas = await $('div.pwf-editor canvas');
+    await expect(pwfCanvas).toExist();
 
-    // Click on 3D view to make it active
-    const view3D = await volViewPage.getView3D();
     await view3D!.click();
-
-    // Controls should still be displayed with 3D view active
     await expect(volumeRenderingSection).toBeDisplayed();
 
-    // Click on 2D view to make it active again
     const view2D = await volViewPage.getView2D();
     await view2D!.click();
 
     // Controls should still be displayed because 3D view exists (even if not active)
     await expect(volumeRenderingSection).toBeDisplayed();
-  });
-
-  it.skip('should show "Create a 3D view" message when no 3D view exists', async () => {
-    // Skipping this test as there's no simple way to close a 3D view in the current UI
-    // The UI would need a layout editor or view close button to test this scenario
-  });
-
-  it.skip('should update controls when switching between multiple datasets', async () => {
-    // Skipping as loading multiple datasets has timing issues in test environment
+    await expect(pwfCanvas).toExist();
   });
 });

tests/specs/utils.ts

@@ -10,10 +10,28 @@ import { RemoteResource } from '../../src/io/manifest';
 export const downloadFile = async (url: string, fileName: string) => {
   const savePath = path.join(TEMP_DIR, fileName);
   if (!fs.existsSync(savePath)) {
+    // Download to a temporary file first to avoid race conditions
+    const tempPath = `${savePath}.${process.pid}.${Date.now()}.tmp`;
     const response = await fetch(url);
     const data = await response.arrayBuffer();
     const buffer = Buffer.from(data);
-    fs.writeFileSync(savePath, buffer);
+    fs.writeFileSync(tempPath, buffer);
+
+    // Atomic rename - if another process already created the file, this will fail safely
+    try {
+      fs.renameSync(tempPath, savePath);
+    } catch (err) {
+      // Another process beat us to it, clean up our temp file
+      try {
+        fs.unlinkSync(tempPath);
+      } catch {
+        // ignore
+      }
+      // Check if the final file exists and is complete
+      if (!fs.existsSync(savePath)) {
+        throw new Error(`Failed to download ${fileName}: ${err}`);
+      }
+    }
   }
   return savePath;
 };
@@ -43,7 +61,10 @@ export async function openUrls(urlsAndNames: Array<RemoteResourceType>) {
   const manifest = {
     resources,
   };
-  const fileName = 'openUrlsManifest.json';
+  // Use a unique filename to avoid race conditions when tests run in parallel
+  const fileName = `openUrlsManifest_${Date.now()}_${Math.random()
+    .toString(36)
+    .substring(7)}.json`;
   await writeManifestToFile(manifest, fileName);
   await openVolViewPage(fileName);
   await volViewPage.waitForViews();

wdio.chrome.conf.ts

@@ -1,17 +1,29 @@
-import { config, TEMP_DIR } from './wdio.shared.conf';
+import { config as sharedConfig, TEMP_DIR } from './wdio.shared.conf';
 
-config.capabilities = [
-  {
-    browserName: 'chrome',
-    // this overrides the default chrome download directory with our temporary one
-    'goog:chromeOptions': {
-      prefs: {
-        directory_upgrade: true,
-        prompt_for_download: false,
-        'download.default_directory': TEMP_DIR,
+// Chrome arguments for CI environments
+const chromeArgs: string[] = [];
+if (process.env.CI || process.env.GITHUB_ACTIONS) {
+  chromeArgs.push(
+    '--no-sandbox',
+    '--disable-dev-shm-usage',
+    '--disable-infobars'
+  );
+}
+
+export const config = {
+  ...sharedConfig,
+  capabilities: [
+    {
+      browserName: 'chrome',
+      // this overrides the default chrome download directory with our temporary one
+      'goog:chromeOptions': {
+        args: chromeArgs,
+        prefs: {
+          directory_upgrade: true,
+          prompt_for_download: false,
+          'download.default_directory': TEMP_DIR,
+        },
       },
     },
-  },
-];
-
-export { config };
+  ],
+};

wdio.shared.conf.ts

@@ -7,7 +7,7 @@ export const WINDOW_SIZE = [1200, 800] as const;
 export const TEST_PORT = 4567;
 // for slow connections try:
 // DOWNLOAD_TIMEOUT=60000 npm run test:e2e:dev
-export const DOWNLOAD_TIMEOUT = Number(process.env.DOWNLOAD_TIMEOUT ?? 8000);
+export const DOWNLOAD_TIMEOUT = Number(process.env.DOWNLOAD_TIMEOUT ?? 20000);
 
 const ROOT = projectRoot();
 const TMP = '.tmp/';
@@ -72,7 +72,7 @@ export const config: Options.Testrunner = {
   reporters: ['spec', 'html-nice'],
   mochaOpts: {
     ui: 'bdd',
-    timeout: 120 * 1000,
+    timeout: 240 * 1000,
   },
 
   //
@@ -91,5 +91,12 @@ export const config: Options.Testrunner = {
     browser: any
   ) {
     await browser.setWindowSize(...WINDOW_SIZE);
+
+    // Subscribe to browser console logs and output them directly
+    await browser.sessionSubscribe({ events: ['log.entryAdded'] });
+
+    browser.on('log.entryAdded', (logEntry: any) => {
+      console.log(`[Browser Console] [${logEntry.level}] ${logEntry.text}`);
+    });
   },
 };