Skip to content

5.2 Web E2E Tests

Jump to bottom
coding man edited this page Nov 4, 2026 · 1 revision

Web E2E Tests

Relevant source files

The following files were used as context for generating this wiki page:

Purpose and Scope

This page details the web end-to-end (E2E) testing suite for VariantScope. It covers the Playwright test configuration (playwright.config.js), headless WebGL rendering via SwiftShader playwright.config.js:6-10, test execution flows against core biological genes (web.spec.js), shared automation helpers (helpers.js), partial state and network resilience tests (web-states.spec.js), and automated screenshot generation for documentation (web-screenshots.spec.js).

1. Test Configuration and Headless WebGL Environment

The test runner is configured in playwright.config.js to execute tests against a production-like Vite preview server running on port 4180 playwright.config.js:41-47. Because headless Chromium instances typically lack hardware GPU acceleration in continuous integration (CI) environments, VariantScope injects software WebGL flags (--use-angle=swiftshader, --enable-unsafe-swiftshader, --ignore-gpu-blocklist) playwright.config.js:6-10 to ensure the 3D molecular viewer (viewer3d.js) initializes successfully.

The runner is configured with a 4-hour global timeout, a 240-second test timeout, and single-worker execution (workers: 1) to prevent API rate-limiting issues when querying live public bioinformatics endpoints playwright.config.js:14-20.

graph TD
  A["playwright.config.js"] --> B["webServer (npm run build:e2e)"]
  B --> C["Vite Preview Server (port 4180)"]
  C --> D["Playwright Web Project (web*.spec.js)"]
  D --> E["Headless Chromium + WEBGL_ARGS"]
  E --> F["Software SwiftShader WebGL"]
  
  classDef default fill:#fff,stroke:#333,stroke-width:2px;
Loading

Figure 1: Playwright Test Environment and Web Server Bootstrap

Sources: playwright.config.js:1-48

2. Core E2E Verification Flows (web.spec.js)

The tests/e2e/web.spec.js suite verifies end-to-end functionality across four well-studied clinical genes: BRCA1, TP53, CFTR, and MLH1 tests/e2e/web.spec.js:17-38. Each gene suite runs serially inside a browser context (viewport: 1400x1000) tests/e2e/web.spec.js:44-55.

Key Verifications

Sources: tests/e2e/web.spec.js:1-161, tests/e2e/helpers.js:10-22, tests/e2e/helpers.js:119-126

3. Test Utilities and Automation Helpers (helpers.js)

The tests/e2e/helpers.js module exposes helper utilities used across web and state test suites.

graph TD
  A["search(page, symbol)"] --> B["loadGene(page, symbol)"]
  B --> C["waitSettled(page)"]
  C --> D["PANELS Validation ('ready')"]
  D --> E["selectInTable(page, change)"]
  E --> F["plddtBandShares(page)"]

  classDef default fill:#fff,stroke:#333,stroke-width:2px;
Loading

Figure 2: Helper Functions & UI Interactivity Flow

Core Helper Functions

  • watchErrors(page, expectedFailures): Intercepts console error messages and pageerror events, isolating transient NCBI eutils noise from true application failures tests/e2e/helpers.js:10-22.
  • search(page, symbol): Fills #gene-input with a gene symbol and triggers the Enter keypress tests/e2e/helpers.js:24-28.
  • waitSettled(page): Polls all DOM elements with [data-panel] attributes until none remain in the loading state, returning a dictionary of all panel states (stats, viewer, constraint, meaning, plot, table) tests/e2e/helpers.js:35-47.
  • loadGene(page, symbol): Combines search and waitSettled, asserting that every panel reaches the ready state and that the 3D canvas is mounted tests/e2e/helpers.js:50-64.
  • selectInTable(page, change): Filters the variant data table by protein change, clicks the target row, and returns its unique data identifier (data-id) tests/e2e/helpers.js:66-73.
  • plddtBandShares(page): Takes a screenshot of the 3D viewer element, decodes the base64 PNG data into an offscreen canvas context, and calculates the proportional area of each AlphaFold confidence color band tests/e2e/helpers.js:75-116.
  • canvasInk(page, selector): Evaluates non-transparent pixel count on a chart canvas to verify successful chart rendering tests/e2e/helpers.js:119-126.

Sources: tests/e2e/helpers.js:1-127

4. State Resilience and Partial Failure Specs (web-states.spec.js)

The tests/e2e/web-states.spec.js file validates how VariantScope gracefully handles network partitions, blocked API routes, slow responses, and different device viewports.

Tested Failure and Edge Cases

  • gnomAD Blocked: Simulates a network failure on gnomad.broadinstitute.org. The constraint panel enters an error state with a Retry button, a warning banner appears, and variant badge rarity falls back to unknown rather than displaying inaccurate frequencies tests/e2e/web-states.spec.js:13-45.
  • ClinVar Blocked: Intercepts eutils.ncbi.nlm.nih.gov, causing variant-dependent panels (stats, meaning, plot, table) to show errors tests/e2e/web-states.spec.js:47-62. Unblocking the route and clicking the panel's Retry button successfully recovers all panels back to the ready state tests/e2e/web-states.spec.js:63-71.
  • AlphaFold Blocked: Simulates failure on alphafold.ebi.ac.uk. The 3D viewer displays an error state while tabular and statistical views continue functioning with pLDDT columns marked as not available tests/e2e/web-states.spec.js:73-98.
  • UniProt Blocked: Intercepts rest.uniprot.org, displaying a top-level banner error preventing searches until resolved and retried tests/e2e/web-states.spec.js:100-114.
  • Slow Network & Progress Tracking: Introduces an 8-second artificial delay on AlphaFold and gnomAD routes, verifying skeleton shimmer animations and live ClinVar progress counters (Loading ClinVar: x / y) tests/e2e/web-states.spec.js:116-139.
  • Mobile & Dark Mode Layout: Tests responsive layout rules at 390x844 resolution, confirming zero horizontal overflow, correct element stacking order (3D viewer preceding summary panels), and theme switching (data-theme=dark) tests/e2e/web-states.spec.js:141-169.

Sources: tests/e2e/web-states.spec.js:1-169

5. Screenshot Automation (web-screenshots.spec.js)

The tests/e2e/web-screenshots.spec.js script automates the capture of reference documentation assets for the repository tests/e2e/web-screenshots.spec.js:1-53.

It loads BRCA1 and TP53, selects a prominent hotspot variant (p.Arg1699Trp and p.Arg175His), waits for camera zoom animations to settle, and saves full-page screenshots into docs/screenshots for:

Sources: tests/e2e/web-screenshots.spec.js:1-54

Content imported from DeepWiki.

VariantScope Wiki

Clone this wiki locally