Registry / testing / ember-visual-test

ember-visual-test

library0.3.2jsnpmunverified

Ember Visual Test (npm: `ember-visual-test`) is an Ember addon designed to integrate visual regression testing directly into Ember.js applications' acceptance and integration test suites. Its current stable version is 0.3.2. The package captures screenshots of rendered components or full pages during tests and compares them against predefined baseline images, failing tests if significant visual differences are detected. This allows developers to catch unintended UI changes across different deployments or code modifications. The release cadence for this project appears moderate, with the last significant feature additions occurring around v0.3.0. A key differentiator is its seamless integration with the existing Ember testing framework, leveraging standard `ember-qunit` or `ember-mocha` setups for visual validation rather than requiring a separate, external testing harness. It aims to make visual testing an integral part of the development and CI/CD workflow.

testing web-framework

npm install ember-visual-test

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · EMBER-VISUAL-TEST

ember-visual-test

testingjavascriptv0.3.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

setupVisualTest

✓ import { setupVisualTest } from 'ember-visual-test';

✗ const setupVisualTest = require('ember-visual-test');

This function is used within a test module's `hooks` to initialize the visual testing environment, typically in a `beforeEach` or `before` hook.

assertVisualTest

✓ import { assertVisualTest } from 'ember-visual-test';

✗ import assertVisualTest from 'ember-visual-test/assert-visual-test';

The primary test helper for taking and comparing visual snapshots. It is an `async` function and should be awaited within your tests. The first argument is typically `this` (the test context) and the second is the snapshot name.

CLI Commands

✓ ember visual-test:approve ember visual-test:reset

These are command-line interface commands provided by the addon for managing visual test baselines. `approve` updates baselines with new screenshots, and `reset` deletes all existing baselines.

Demonstrates setting up `ember-visual-test` in an Ember acceptance test and using `assertVisualTest` to capture and compare UI snapshots after page loads and user interactions.

import { module, test } from 'qunit'; import { setupApplicationTest } from 'ember-qunit'; import { visit, currentURL, click } from '@ember/test-helpers'; import { setupVisualTest, assertVisualTest } from 'ember-visual-test'; module('Acceptance | home page visual tests', function(hooks) { setupApplicationTest(hooks); setupVisualTest(hooks); test('homepage renders correctly', async function(assert) { await visit('/'); // Take a visual snapshot of the current state of the application. // The 'homepage' string is the unique identifier for this snapshot. await assertVisualTest(this, 'homepage'); assert.equal(currentURL(), '/'); }); test('navigation bar state change', async function(assert) { await visit('/'); await click('.nav-toggle-button'); // Simulate user interaction that changes UI // Take another snapshot to ensure the UI change is as expected and visually consistent. await assertVisualTest(this, 'homepage-nav-open'); assert.equal(currentURL(), '/'); }); });

Debug

Known issues

gotchaNode.js engine compatibility. The addon officially supports Node.js `8.*` or `>= 10.*`. Using unsupported versions (e.g., `9.*` or very old versions) may lead to unexpected build or runtime issues due to underlying dependencies like Puppeteer.

fix

Ensure your Node.js environment is `v8.*` or `v10.*` or newer. Consider using an NVM-like tool to manage Node.js versions.

affects: <=0.3.2

breakingCompatibility with Ember.js and Ember CLI. This addon requires Ember.js v3.4 or above and Ember CLI v2.13 or above. Using it with older Ember versions will likely result in installation or runtime errors due to API incompatibilities.

fix

Upgrade your Ember.js application to at least v3.4 and Ember CLI to v2.13 before installing and using this addon. Refer to the official Ember upgrade guides.

affects: <=0.3.2

gotchaPuppeteer `noSandbox` option for CI environments. Visual testing often relies on headless Chromium via Puppeteer, which can fail in certain CI/CD environments (e.g., Docker containers without `SYS_ADMIN` capabilities) due to sandboxing issues. The `noSandbox` configuration option was added in v0.2.7 to address this.

fix

If tests fail in CI with Chromium-related errors, try adding `noSandbox: true` to your `config/environment.js` visual test configuration:
```javascript
ENV['ember-visual-test'] = {
  noSandbox: true
};
```

affects: <=0.3.2

Errors

Common errors & fixes

Error: No such file or directory, cannot find chromium

Puppeteer, used internally by `ember-visual-test`, could not locate or download Chromium, often due to network restrictions, incorrect environment setup, or missing system dependencies in a CI environment.

fix

Ensure your CI environment has necessary dependencies for Puppeteer (e.g., `libatk-bridge2.0-0`, `libgbm-dev`, `libasound2`, etc., depending on OS). Check network access for downloading Chromium. For Docker, consider using a base image that already includes these or a pre-installed Chromium/Node.js combination.

Visual test failed: Differences detected in snapshot 'my-snapshot'

The current screenshot taken by `assertVisualTest` does not visually match the stored baseline image for 'my-snapshot' within the allowed pixel difference threshold.

fix

If the change is intentional, run `ember visual-test:approve` to update the baseline images. If unintentional, investigate the UI changes and fix the regression before re-running tests.

Error: Command `ember visual-test:approve` not found

The Ember CLI command `visual-test:approve` was introduced in v0.3.0. This error typically occurs if you are running an older version of `ember-visual-test` or if the addon was not installed correctly.

fix

Ensure `ember-visual-test` is installed and updated to at least version 0.3.0. Run `npm install ember-visual-test@latest` or `yarn add ember-visual-test@latest` and then `ember install ember-visual-test` to ensure blueprints are correctly applied.

Upgrade

Version history

0.3.2latest on npm

Audit

Dependencies

ember-clirequiredRequired for Ember addon functionality and command-line integration.

ember.jsrequiredCore framework dependency for an Ember addon.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/Cropster/ember-visual-test ↗

packagehttps://www.npmjs.com/package/ember-visual-test ↗

homepagehttps://cropster.github.io/ember-visual-test ↗