wdio-qunit-service
A WebdriverIO service that runs QUnit HTML test pages in a browser and reports the results as WebdriverIO test suites, presented as a drop-in replacement for Karma-based QUnit setups.
QUnit and OPA5 tests of a UI5 app run from HTML pages, and Karma was the usual runner. This service opens each QUnit HTML file in a browser through WebdriverIO and captures the results in wdio format, so the same tests gain WebdriverIO's video recording, screenshots, code coverage and JUnit reporting. The README presents it as a drop-in replacement for Karma-based QUnit setups and gives a UI5 section built on the openui5-sample-app, with the QUnit files either listed in the paths option or opened from spec files, one per HTML page. It does not start the web server: the app must already be served when the tests run. It runs the QUnit pages themselves, which differs from wdi5wdio-ui5-serviceEnd-to-end testing for UI5 as a WebdriverIO service that drives a real browser through UI5's own test API, so a test addresses controls with OPA5-compatible selectors rather than DOM nodes.community org, ui5, where tests are written as WebdriverIO specs with UI5 control selectors.
Facts
Where it sits
Who is behind it
In the atlas: maintains 16, contributes to 41, wrote 4@mauriciolauffermaintainer
What it declares
Every artifact
- Type
- Package
- Origin
- Independently maintained
- Runtime
- Node.js
As a package
- Where it runs
- does not say
- Distributed through
- npm
Connections
Unit, integration and end-to-end tests for UI5 apps
Download
Install
npm add wdio-qunit-serviceDerived from the package name. No recipe recorded; the README has the configuration.
README
quoted from mauriciolauffer/wdio-qunit-service under MIT, readwdio-qunit-service
WebdriverIO (wdio) service for running QUnit browser-based tests and dynamically converting them to wdio test suites.
Replacing Karma
QUnit Service is a drop-in replacement for those using Karma JS to run their QUnit tests (karma-qunit, karma-ui5 or any other combination of Karma and QUnit). Karma is deprecated and people should move to modern alternatives!
If you want to keep your QUnit tests as they are, with no rewriting and no refactoring, QUnit Service is everything you need. It runs your QUnit HTML files in a browser and captures all the results in wdio format.
Because of that, developers can use QUnit Service in tandem with everything else available in the wdio ecosystem.
Want to record the test run in a video? Perhaps take a screenshot or save it in PDF? Check the Code coverage? Save the test results in JUnit format? Go for it, QUnit Service doesn't get on your way.
Installation
After configuring WebdriverIO, install wdio-qunit-service as a devDependency in your package.json file.
npm install wdio-qunit-service --save-dev
If you haven't configured WebdriverIO yet, check the official documentation out.
Configuration
In order to use QUnit Service you just need to add it to the services list in your wdio.conf.js file. The wdio documentation has all information related to the configuration file:
// wdio.conf.js
export const config = {
// ...
services: ["qunit"],
// ...
};
Usage
Make sure the web server is up and running before executing the tests. wdio will not start the web server.
With .spec or .test files
In your WebdriverIO test, you need to navigate to the QUnit HTML test page, then call browser.getQUnitResults().
describe("QUnit test page", () => {
it("should pass QUnit tests", async () => {
await browser.url("http://localhost:8080/test/unit/unitTests.qunit.html");
await browser.getQUnitResults();
});
});
It's recommended to have one WebdriverIO test file per QUnit HTML test page. This ensures the tests will run in parallel and fully isolated.
Configuration only, no .spec or .test files
If you don't want to create spec/test files, you can pass a list of QUnit HTML files to the configuration and the tests will be automatically generated.
// wdio.conf.js
export const config = {
// ...
baseUrl: 'http://localhost:8080',
services: [
['qunit', {
paths: [
'unit-tests.html',
'integration-tests.html',
'test/qunit.html'
]
}],
// ...
};
Test results
Test results could look like:

Examples
Check the examples folder out for samples using javascript, typescript and more.
Usage in SAP Fiori / UI5 apps
Straight forward example using the well known openui5-sample-app:
-
Create a configuration file: wdio.conf.js
-
Tell
wdiowhere to find the QUnit test files: -
- Include the QUnit files to the service configuration
-
- or
-
- Create a WebdriverIO test file for unit tests and another for OPA5 tests
-
The web server must be running before executing the tests
-
Run it $
wdio run webapp/test/wdio.conf.js
Author
Mauricio Lauffer
License
This project is licensed under the MIT License - see the LICENSE file for details.
History
Fixes 1
Others providing
Compare all 14 on the UI5 testing page →- ui5-test-runnerui5-test-runnerA standalone command line that runs a UI5 project's QUnit and OPA test pages in parallel browser instances, written for suites too large for one browser, and merges their coverage into one report.independent, ui5Command line running UI5 QUnit and OPA tests in parallelfrom UI5
- ui5-middleware-odata-recorderui5-middleware-odata-recorderA UI5 server middleware that records the OData traffic a running app makes against a real backend and writes entity JSON files and metadata.xml that the Fiori elements mock server can replay.independent, ui5UI5 middleware recording OData traffic as mock server datasetsfrom UI5
- jest-environment-ui5jest-environment-ui5A Jest test environment named ui5 that boots UI5 from a local HTML file into jsdom, so UI5 unit tests run in Node.js with no web server and no browser.independent, ui5Jest environment running UI5 unit tests in Node.jsfrom UI5
- openui5-smart-mockserveropenui5-smart-mockserverAn extended UI5 MockServer that generates meaningful mock data with Faker.js, from the metadata's sap:semantics annotations or from rules that map an OData property to a Faker method.independent, ui5UI5 MockServer extension generating mock data with Faker.jsfrom UI5
- vitest-environment-ui5vitest-environment-ui5A Vitest environment named ui5 that boots UI5 from a local HTML file into jsdom, so UI5 unit tests run in Node.js with no web server and no browser.independent, ui5Vitest environment running UI5 unit tests in Node.jsfrom UI5
- @openui5/sap.ui.core@openui5/sap.ui.coreThe OpenUI5 core: the module loader, the MVC runtime, data binding, routing, theming and the test stack, which is everything a UI5 app does before a single community package is added.sap official, ui5Framework core: module loader, MVC runtime, binding, routing, themingfrom UI5
- karma-ui5-transpilekarma-ui5-transpileA Karma preprocessor that transpiles a UI5 project's sources with the ui5-tooling-transpile configuration in its ui5.yaml.community org, ui5Karma preprocessor transpiling UI5 sources via ui5-tooling-transpilefrom UI5
- ui5-journey-recorderui5-journey-recorderA Chrome extension that records clicks and inputs against a running UI5 app and generates OPA5 or wdi5 end-to-end test code from the recorded journey.community org, ui5Chrome extension generating OPA5 or wdi5 tests from recorded journeysfrom UI5
- wdi5-cucumberwdi5-cucumberA wdi5 plugin that extends wdi5's end-to-end testing with Cucumber-style BDD scenarios, run against UI5 Fiori Elements apps.community org, ui5wdi5 plugin for Cucumber-style BDD tests on Fiori Elements appsfrom UI5
- wdi5-fe-selectorswdi5-fe-selectorsA set of wdi5-flavoured control selectors tuned for locating controls in Fiori Elements apps, extending the selectors wdi5 itself provides.community org, ui5wdi5 selectors for locating controls in Fiori Elements appsfrom UI5
- wdio-ui5-servicewdio-ui5-serviceEnd-to-end testing for UI5 as a WebdriverIO service that drives a real browser through UI5's own test API, so a test addresses controls with OPA5-compatible selectors rather than DOM nodes.community org, ui5End-to-end testing for UI5 on WebdriverIO with UI5 control selectorsfrom UI5
- @ui5/middleware-code-coverage@ui5/middleware-code-coverageUI5 CLI server middleware that instruments a project's JavaScript files with Istanbul as the dev server sends them, and generates the coverage report from the records the OpenUI5 QUnit tests send back.sap official, ui5UI5 CLI middleware for Istanbul code coveragefrom UI5
- vscode-ui5-odata-mock-generatorvscode-ui5-odata-mock-generatorVS Code extension that generates JSON mock data files for an OData service from its metadata, with faker.js values, per-set sizes, value lists and values tied to other properties.independent, ui5VS Code extension generating OData mock data from service metadatafrom UI5
Details
Sources
Sources are graph entities: the same page may back several entries, and an unreachable source flags every row that rests on it.
Compatibility and provenance
History in the atlas
- First seen.
For your agent
- Ref
artifact:mauriciolauffer-wdio-qunit-service- JSON
- /artifacts/mauriciolauffer-wdio-qunit-service.json
- MCP
- Connecting an agent