With xeokit supported in most major browsers, it's impossible to maintain that support through manual testing. In this guide, we offer a quick look at how we use continuous integration and automated visual testing to ensure that xeokit continues to work as expected. This is just the bare beginnings of our test suite, which will become more sophisticated as we continue to build it up.
We use Percy for automated visual testing. Percy's visual test review workflow gives us confidence in xeokit, while at the same time reduces the time taken to review GitHub pull requests.
Each time somebody makes a pull request to one of our repositories, Percy will automatically run our suite of tests on their changes. Percy will then attach the test report to the request, and if any of the tests fail, Percy flags the PR as needing fixes before it can be merged.
Each of our tests is a single HTML page that contains a xeokit Viewer with a full-page canvas. The Viewer in each page is programmed to test a particular feature within xeokit and render the result to its canvas.
When running our tests, Percy will successively load each page into a headless browser, while saving a snapshot of each page to the test report. When snapshot images have changed since the last test run, Percy flags those changes for review.
Percy enables us to integrate visual reviews into our daily workflows, to automate previously manual work. Visual testing is an essential part of maintaining the xeokit repositories with confidence.
We also use Percy to thoroughly test xeokit's native XKT model format and conversion tools.
Let's take a look at how we've set up visual testing for the xeokit-sdk repository. The file tree below shows the general structure of this repository. We've added three things to support automated visual testing:
./tests contains our visual test pages.snapshots.js is the Percy script that runs our test pages../assets contains our test models and metadata, shared between the examples and tests directories.We've also installed percy/script and http-server as npm dev dependencies in package.json.
xeokit-sdk
│
├── LICENSE.txt
├── README.md
├── CHANGE_LOG.md
├── src
├── docs
├── package.json
│
├── assets
│ ├── models
│ └── metaModels
│
├── examples
│ ├── annotations_clickFlyToPosition.html
│ ├── annotations_clickShowLabels.html
│ ├── annotations_createAtCenterOfClickedObject.html
│ ├── annotations_createWithMouse.html
│ └── ... (more)
│
├── snapshots.js
└── tests
├── loading_XKT.html
├── effects_logarithmicDepthBuffer_PerformanceModel_batching_RTC.html
├── effects_logarithmicDepthBuffer_PerformanceModel_instancing_RTC.html
├── effects_logarithmicDepthBuffer_sceneGraph_RTC.html
└── ... (more)