WebdriverIO (wdio) service for running
QUnit browser-based tests and dynamically converting
them to wdio
test suites.
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.
After configuring WebdriverIO
, configure the @yottaa
package scope to use GitHub's NPM, as this package is published as a GitHub package.
@yottaa:registry=https://npm.pkg.github.com
Next, install @yottaa/wdio-qunit-service
as a devDependency in your package.json
file.
npm install @yottaa/wdio-qunit-service --save-dev
If you haven't configured WebdriverIO
yet, check the official documentation out.
This is a fork of the original wdio-qunit-service which enables an enhancement for reporting test results. This disables collecting results from a test run if QUnit tests already completed, due to differences in the output format causing errors in reporting. Instead, this enables the service to auto-start tests to prevent tests from completing early. This allows for consistent reporting in all cases.
To allow this to work, you must pre-configure QUnit to disable autostart. This can be done using Object preconfig (QUnit >= 2.1.0) or Flat preconfig (QUnit >= 2.21.0).
<!-- Make sure to set this configuration BEFORE loading QUnit! -->
<script type="text/javascript">
// Example using Object preconfig
globalThis.QUnit = { config: { autostart: false } };
</script>
<script src="http://code.jquery.com/qunit/qunit-2.20.1.js"></script>
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
import qunitService from "@yottaa/wdio-qunit-service";
export const config = {
// ...
services: [
[
qunitService,
{
/* optional configuration options */
},
],
],
// ...
};
Make sure the web server is up and running before executing the tests. wdio
will not start the web server.
Configuration can be passed along with the service config.
// wdio.conf.js
import qunitService from '@yottaa/wdio-qunit-service';
export const config = {
// ...
baseUrl: 'http://localhost:8080',
services: [
[qunitService, {
paths: [
'unit-tests.html',
'integration-tests.html',
'test/qunit.html'
],
autostartDelay: 100,
}],
// ...
};
Option Name | Default value | Description |
---|---|---|
paths | [] | Array of paths used to automatically generate tests, when using as a runner |
autostartDelay | 100 | Delay before the service attempts to start the QUnit runner in-browser, in miliseconds |
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.
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
import qunitService from '@yottaa/wdio-qunit-service';
export const config = {
// ...
baseUrl: 'http://localhost:8080',
services: [
[qunitService, {
paths: [
'unit-tests.html',
'integration-tests.html',
'test/qunit.html'
],
}],
// ...
};
Check the examples folder out for samples using javascript
, typescript
and more.
Straight forward example using the well known openui5-sample-app:
-
Create a configuration file: wdio.conf.js
-
Tell
wdio
where 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
Mauricio Lauffer
Yottaa
- LinkedIn: https://www.linkedin.com/company/yottaa
This project is licensed under the MIT License - see the LICENSE file for details.