diff --git a/strcalc/src/main/frontend/components/app.js b/strcalc/src/main/frontend/components/app.js
index d955841..2bac7a3 100644
--- a/strcalc/src/main/frontend/components/app.js
+++ b/strcalc/src/main/frontend/components/app.js
@@ -10,8 +10,8 @@
  * @module init
  */
 
-import Introduction from './introduction'
-import Calculator from './calculator'
+import Introduction from './introduction.js'
+import Calculator from './calculator.js'
 
 export default class App {
   /**
diff --git a/strcalc/src/main/frontend/components/calculators.js b/strcalc/src/main/frontend/components/calculators.js
index 772ce7d..6ab3691 100644
--- a/strcalc/src/main/frontend/components/calculators.js
+++ b/strcalc/src/main/frontend/components/calculators.js
@@ -4,7 +4,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { postFormData } from './request'
+import { postFormData } from './request.js'
 
 export const DEFAULT_ENDPOINT = './add'
 
diff --git a/strcalc/src/main/frontend/main.js b/strcalc/src/main/frontend/main.js
index d8abf40..39d9e5d 100644
--- a/strcalc/src/main/frontend/main.js
+++ b/strcalc/src/main/frontend/main.js
@@ -16,7 +16,7 @@
  * @module main
  */
 import App from './components/app.js'
-import calculators from './components/calculators'
+import calculators from './components/calculators.js'
 
 /**
  * Calls the app initializer with production parameters.
diff --git a/strcalc/src/main/frontend/main.test.js b/strcalc/src/main/frontend/main.test.js
index 7585a0c..f831d1e 100644
--- a/strcalc/src/main/frontend/main.test.js
+++ b/strcalc/src/main/frontend/main.test.js
@@ -4,16 +4,18 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import { describe, afterEach, expect, test } from 'vitest'
-import { PageLoader } from './test/page-loader.js'
-import StringCalculatorPage from './test/page'
+import { afterEach, beforeAll, describe, expect, test } from 'vitest'
+import StringCalculatorPage from './test/page.js'
+import TestPageOpener from 'test-page-opener'
 
 describe('String Calculator UI on initial page load', () => {
-  const loader = new PageLoader('/strcalc/')
-  afterEach(() => loader.closeAll())
+  let opener
+
+  beforeAll(async () => opener = await TestPageOpener.create('/strcalc/'))
+  afterEach(() => opener.closeAll())
 
   test('contains the "Hello, World!" placeholder', async () => {
-    const { document } = await loader.load('index.html')
+    const { document } = await opener.open('index.html')
     const appElem = document.querySelector('#app')
 
     const e = new StringCalculatorPage(appElem, document).title()
diff --git a/strcalc/src/main/frontend/package.json b/strcalc/src/main/frontend/package.json
index b1ace10..e4ec739 100644
--- a/strcalc/src/main/frontend/package.json
+++ b/strcalc/src/main/frontend/package.json
@@ -44,6 +44,7 @@
     "handlebars": "^4.7.8",
     "jsdoc-cli-wrapper": "^1.0.4",
     "jsdom": "^23.1.0",
+    "test-page-opener": "^1.0.3",
     "vite": "^5.0.11",
     "vitest": "^1.1.3",
     "webdriverio": "^8.27.0"
diff --git a/strcalc/src/main/frontend/pnpm-lock.yaml b/strcalc/src/main/frontend/pnpm-lock.yaml
index d8aaf82..e6321e1 100644
--- a/strcalc/src/main/frontend/pnpm-lock.yaml
+++ b/strcalc/src/main/frontend/pnpm-lock.yaml
@@ -41,6 +41,9 @@ devDependencies:
   jsdom:
     specifier: ^23.1.0
     version: 23.1.0
+  test-page-opener:
+    specifier: ^1.0.3
+    version: 1.0.3
   vite:
     specifier: ^5.0.11
     version: 5.0.11
@@ -3546,6 +3549,13 @@ packages:
       minimatch: 3.1.2
     dev: true
 
+  /test-page-opener@1.0.3:
+    resolution: {integrity: sha512-vHDT/nd39MhUS5ScCAZtdDKsbHN+e7954lIBeKYk/Ei7bBE6dwROPJs9b4tPHjmWjOcL6TT+6Pivhss2Oz7Jzg==}
+    engines: {node: '>= 18.0.0'}
+    dependencies:
+      istanbul-lib-coverage: 3.2.2
+    dev: true
+
   /text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
diff --git a/strcalc/src/main/frontend/test/page-loader.js b/strcalc/src/main/frontend/test/page-loader.js
deleted file mode 100644
index 7b5d9f3..0000000
--- a/strcalc/src/main/frontend/test/page-loader.js
+++ /dev/null
@@ -1,346 +0,0 @@
-/* eslint-env browser, node */
-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
-
-/**
- * Exports test helper utilities for this project.
- * @module test-helpers
- */
-
-/**
- * Enables tests to load page URLs both in the browser and in Node using JSDom.
- */
-export class PageLoader {
-  static #impl
-
-  #basePath
-  #loaded
-
-  constructor(basePath) {
-    if (!basePath.startsWith('/') || !basePath.endsWith('/')) {
-      const msg = 'basePath should start with \'/\' and ' +
-        'end with \'/\', got: '
-      throw new Error(`${msg}"${basePath}"`)
-    }
-    this.#basePath = basePath
-    this.#loaded = []
-  }
-
-  async load(pagePath) {
-    if (pagePath.startsWith('/')) {
-      const msg = 'page path should not start with \'/\', got: '
-      throw new Error(`${msg}"${pagePath}"`)
-    }
-
-    const impl = await PageLoader.getImpl()
-    const page = await impl.load(this.#basePath, pagePath)
-
-    this.#loaded.push(page)
-    return page
-  }
-
-  closeAll() {
-    this.#loaded.forEach(p => p.close())
-    this.#loaded = []
-  }
-
-  static async getImpl() {
-    if (this.#impl) {
-      return this.#impl
-    }
-
-    if (globalThis.window) {
-      return this.#impl = new BrowserPageLoader(globalThis.window)
-    }
-
-    const {JSDOM} = await import('jsdom')
-    return this.#impl = new JsdomPageLoader(JSDOM, importModulesDynamically)
-  }
-}
-
-class BrowserPageLoader {
-  #window
-
-  constructor(window) {
-    this.#window = window
-  }
-
-  // Loads a page and returns {window, document, close() } using the browser.
-  async load(basePath, pagePath) {
-    const w = this.#window.open(`${basePath}${pagePath}`)
-    return new Promise(resolve => {
-      const listener = () => {
-        this.#setCoverageStore(w)
-        resolve({window: w, document: w.document, close() {w.close()}})
-      }
-      w.addEventListener('load', listener, {once: true})
-    })
-  }
-
-  // This is an egregious, brittle hack that's very specific to Vitest's
-  // Istanbul coverage provider. It also only collects coverage from the last
-  // page loaded; it loses coverage information for all other pages.
-  //
-  // But as long as a test function calls BrowserPageLoader.load() only once, it
-  // should work pretty well.
-  #setCoverageStore(openedWindow) {
-    const COVERAGE_STORE_KEY = '__VITEST_COVERAGE__'
-
-    if (COVERAGE_STORE_KEY in openedWindow) {
-      this.#window[COVERAGE_STORE_KEY] = openedWindow[COVERAGE_STORE_KEY]
-    }
-  }
-}
-
-// Returns window and document objects from a JSDOM-parsed HTML file.
-//
-// It will execute <script type="module"> elements with a `src` attribute,
-// but not those with inline code. See the comment for
-// importModulesDynamically().
-//
-// Based on hints from:
-// - https://oliverjam.es/articles/frontend-testing-node-jsdom
-class JsdomPageLoader {
-  #JSDOM
-  #importModules
-
-  constructor(jsdom, importModules) {
-    this.#JSDOM = jsdom
-    this.#importModules = importModules
-  }
-
-  // Loads a page and returns { window, document, close() } using JSDOM.
-  //
-  // For now, executes <script type="module"> elements with a `src` attribute,
-  // but does not execute such elements with inline code. This is because JSDOM
-  // currently parses, but doesn't execute, <script type="module"> elements:
-  //
-  // - https://github.com/jsdom/jsdom/issues/2475
-  //
-  // Once that issue is resolved, the explicit module loading behavior can
-  // be deleted from this implementation.
-  //
-  // Note on the timing of <script type="module"> execution
-  // ------------------------------------------------------
-  // Technically, the imported modules should execute similarly to
-  // <script defer> and execute before 'DOMContentLoaded'. However, modules
-  // imported with this function will execute _on_ 'DOMContentLoaded'. This is
-  // because the JSDOM 'DOMContentLoaded' and 'load' events will fire before the
-  // the dynamic import() calls resolve.
-  //
-  // This function sets a DOMContentLoaded listener that waits for the dynamic
-  // import() operations, and then manually fires DOMContentLoaded and load
-  // again. This enables (most) modules that register listeners for those
-  // events to behave as expected in JSDOM based tests.
-  async load(_, pagePath) {
-    const { window } = await this.#JSDOM.fromFile(
-      pagePath, {resources: 'usable', runScripts: 'dangerously'}
-    )
-    const document = window.document
-
-    // Originally this function returned the result object directly, not
-    // wrapped in the `done` Promise. This was because, for the original
-    // implementation, the 'load' event fired before the modules were imported.
-    // Or so I thought...
-    //
-    // console.log() statements added in the appropriate places revealed
-    // this pattern (the second 'stdout' doesn't always appear):
-    //
-    //   stdout | main.test.js > String Calculator UI > initial state > ...
-    //   DOMContentLoaded
-    //   LOADED
-    //   stdout | main.test.js > String Calculator UI > initial state > ...
-    //   INITIALIZED
-    //   IMPORTED
-    //   CLOSED
-    //
-    // However, it turned out that in watch mode, this held true only for the
-    // _first_ test run. On every subsequent run, the entire test method would
-    // finish before the 'load' event fired. This caused dom.window.close() to
-    // throw an AbortError before the stylesheet from index.html finished
-    // loading. This pattern appeared consistently on each run after the first:
-    //
-    //   INITIALIZED
-    //   IMPORTED
-    //   CLOSED
-    //   Error: Could not load link: "file:///.../style.css"
-    //   [...snip...]
-    //     isAbortError: true
-    //
-    // What's interesting is that by making the close() function in the result
-    // object a noop, avoiding the error, the pattern looked like:
-    //
-    // First run:
-    //   DOMContentLoaded
-    //   LOADED
-    //   INITIALIZED
-    //   IMPORTED
-    //   CLOSED
-    //
-    // Most subsequent runs:
-    //   INITIALIZED
-    //   IMPORTED
-    //   CLOSED
-    //
-    // Some subsequent runs (note the "stdout | unknown test" output):
-    //   stdout | main.test.js > String Calculator UI > initial state > ...
-    //   INITIALIZED
-    //   IMPORTED
-    //   CLOSED
-    //   stdout | unknown test
-    //   DOMContentLoaded
-    //   LOADED
-    //
-    // After updating the implementation to wait for 'load', but not
-    // 'DOMContentLoaded', the output looked like the following:
-    //
-    // First run:
-    //   DOMContentLoaded
-    //   LOADED
-    //   INITIALIZED
-    //   IMPORTED
-    //   CLOSED
-    //
-    // Subsequent runs:
-    //   INITIALIZED
-    //   IMPORTED
-    //   DOMContentLoaded
-    //   LOADED
-    //   CLOSED
-    //
-    // For consistency's sake, it seemed prudent to wait for DOMContentLoaded to
-    // fire before calling importModules(). The first attempt didn't fire
-    // DOMContentLoaded again. This broke from the <script defer>-like behavior
-    // a bit, but made each run more consistent. The output from that
-    // implementation looked like this on every run:
-    //
-    //   DOMContentLoaded
-    //   LOADED
-    //   INITIALIZED
-    //   IMPORTED
-    //   CLOSED
-    //
-    // I eventually decided to fire the DOMContentLoaded and load events
-    // again in #importModulesPromise. This enables modules to register
-    // listeners for those events, approximating the expectation that modules
-    // will run before DOMContentLoaded.
-    //
-    // Adding some slightly more descriptive output results in:
-    //
-    //   AWAITING MODULE IMPORTS
-    //   DOMContentLoaded
-    //   IMPORT BEGIN
-    //   LOADED
-    //   IMPORTING main.js
-    //   IMPORT END
-    //   INITIALIZED on DOMContentLoaded
-    //   LOADED - resetting global window and document
-    //
-    // Since #importModulesPromise now resolves on this final 'load' event,
-    // we're back to returning the result object directly.
-
-    // Upon resolution of jsdom/jsdom#2475, delete this #importModulesPromise
-    // call. (And delete this comment, and maybe the entire comment above.)
-    await this.#importModulesPromise(window, document)
-    return { window, document, close() { window.close() } }
-  }
-
-  /**
-   * Dynamically imports ECMAScript modules after the DOMContentLoaded event.
-   * @param {Window} window - the JSDOM window object
-   * @param {Document} document - the JSDOM window.document object
-   * @returns {Promise} - a Promise resolved after importing all ES modules
-   */
-  #importModulesPromise(window, document) {
-    return new Promise(resolve => {
-      const importModules = async () => {
-        // The JSDOM docs advise against setting global properties, but we don't
-        // really have another option given any module may access window and/or
-        // document.
-        //
-        // (I tried to explore invoking ES modules properly inside the JSDOM,
-        // and realized that way lies madness. At least, I couldn't yet figure
-        // out how to access the Vite/Vitest module path resolver or Rollup
-        // plugins. Then there's the matter of importmaps. I may still pick at
-        // it, but staring directly at it right now isn't productive.)
-        //
-        // Also, unless the module takes care to close over window or document,
-        // they may still reference the global.window and global.document
-        // attributes. This isn't a common cause for concern in a browser, but
-        // resetting these global properties before a JSDOM listener fires can
-        // cause it to error. This, in turn, can potentially cause a test to
-        // hang or fail.
-        //
-        // This is why we keep global.window and global.document set until
-        // the load event handler below fires after the manually dispatched
-        // load event. This is best-effort, of course, as we can't know if any
-        // async ops dispatched by those listeners will register a 'load' event
-        // later. In that case, window and document may be undefined for those
-        // listeners.
-        //
-        // The best defense against this problem would be to design the app to
-        // register closures over window and document. That would ensure they
-        // remain defined even after removal from globalThis.
-        globalThis.window = window
-        globalThis.document = document
-        await this.#importModules(window, document)
-
-        // The DOMContentLoaded and load events registered by JSDOM.fromFile()
-        // will already have fired by this point.
-        //
-        // Manually firing DOMContentLoaded again after loading modules
-        // approximates the requirement that modules execute before
-        // DOMContentLoaded. This means that the modules can register
-        // DOMContentLoaded event listeners and have them fire here. That
-        // code shouldn't really be sensitive to the fact that
-        // DOMContentLoaded fired earlier, but it's a possibility.
-        //
-        // For the same reason, we fire the 'load' event again as well. When
-        // that listener executes, we can finally reset the global.window and
-        // global.document variables.
-        const resetGlobals = () => {
-          delete globalThis.document
-          delete globalThis.window
-          resolve()
-        }
-        document.dispatchEvent(new window.Event(
-          'DOMContentLoaded', {bubbles: true, cancelable: false}
-        ))
-
-        // Register our 'load' listener after any DOMContentLoaded listeners
-        // have fired. This attempts to ensure (but cannot guarantee) that the
-        // global window and document objects remain valid for any 'load'
-        // listeners registered by the DOMContentLoaded listeners.
-        window.addEventListener('load', resetGlobals, {once: true})
-        window.dispatchEvent(new window.Event(
-          'load', {bubbles: false, cancelable: false}
-        ))
-      }
-      document.addEventListener('DOMContentLoaded', importModules, {once: true})
-    })
-  }
-}
-
-/**
- * Imports <script type="module"> elements parsed, but not executed, by JSDOM.
- *
- * Only works with scripts with a `src` attribute; it will not execute inline
- * code.
- *
- * If a module exports a default function(window, document), this will invoke
- * that function with the JSDOM window and document.
- * @private
- * @param {Window} window - the JSDOM window object
- * @param {Document} doc - the JSDOM window.document object
- * @returns {Promise} - a Promise resolved after importing all JS modules in doc
- */
-function importModulesDynamically(window, doc) {
-  const modules = doc.querySelectorAll('script[type="module"]')
-  return Promise.all(Array.from(modules)
-    .filter(m => m.src !== undefined)
-    .map(async m => await import(m.src))
-  )
-}
diff --git a/strcalc/src/main/frontend/vite.config.js b/strcalc/src/main/frontend/vite.config.js
index 4695f12..7cec9d0 100644
--- a/strcalc/src/main/frontend/vite.config.js
+++ b/strcalc/src/main/frontend/vite.config.js
@@ -89,6 +89,13 @@ export default defineConfig({
       // and bin/jsdoc-cli-wrapper.js move into their own repositories.
       exclude: [ ...configDefaults.coverage.exclude, 'plugins/*', 'bin/*' ]
     },
+    server: {
+      deps: {
+        // Without this, jsdom tests will fail to import '.hbs' files
+        // transformed by rollup-plugin-handlebars-precompiler.
+        inline: ['test-page-opener']
+      }
+    },
     browser: {
       name: 'chrome',
       providerOptions: getProviderOptions()