{"id":13121,"library":"ember-visual-test","title":"Ember Visual Test","description":"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.","status":"active","version":"0.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/Cropster/ember-visual-test","tags":["javascript","ember-addon"],"install":[{"cmd":"npm install ember-visual-test","lang":"bash","label":"npm"},{"cmd":"yarn add ember-visual-test","lang":"bash","label":"yarn"},{"cmd":"pnpm add ember-visual-test","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Ember addon functionality and command-line integration.","package":"ember-cli","optional":false},{"reason":"Core framework dependency for an Ember addon.","package":"ember.js","optional":false}],"imports":[{"note":"This function is used within a test module's `hooks` to initialize the visual testing environment, typically in a `beforeEach` or `before` hook.","wrong":"const setupVisualTest = require('ember-visual-test');","symbol":"setupVisualTest","correct":"import { setupVisualTest } from 'ember-visual-test';"},{"note":"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.","wrong":"import assertVisualTest from 'ember-visual-test/assert-visual-test';","symbol":"assertVisualTest","correct":"import { assertVisualTest } from 'ember-visual-test';"},{"note":"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.","symbol":"CLI Commands","correct":"ember visual-test:approve\nember visual-test:reset"}],"quickstart":{"code":"import { module, test } from 'qunit';\nimport { setupApplicationTest } from 'ember-qunit';\nimport { visit, currentURL, click } from '@ember/test-helpers';\nimport { setupVisualTest, assertVisualTest } from 'ember-visual-test';\n\nmodule('Acceptance | home page visual tests', function(hooks) {\n  setupApplicationTest(hooks);\n  setupVisualTest(hooks);\n\n  test('homepage renders correctly', async function(assert) {\n    await visit('/');\n    // Take a visual snapshot of the current state of the application.\n    // The 'homepage' string is the unique identifier for this snapshot.\n    await assertVisualTest(this, 'homepage');\n    assert.equal(currentURL(), '/');\n  });\n\n  test('navigation bar state change', async function(assert) {\n    await visit('/');\n    await click('.nav-toggle-button'); // Simulate user interaction that changes UI\n    // Take another snapshot to ensure the UI change is as expected and visually consistent.\n    await assertVisualTest(this, 'homepage-nav-open');\n    assert.equal(currentURL(), '/');\n  });\n});","lang":"typescript","description":"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."},"warnings":[{"fix":"Ensure your Node.js environment is `v8.*` or `v10.*` or newer. Consider using an NVM-like tool to manage Node.js versions.","message":"Node.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.","severity":"gotcha","affected_versions":"<=0.3.2"},{"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.","message":"Compatibility 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.","severity":"breaking","affected_versions":"<=0.3.2"},{"fix":"If tests fail in CI with Chromium-related errors, try adding `noSandbox: true` to your `config/environment.js` visual test configuration:\n```javascript\nENV['ember-visual-test'] = {\n  noSandbox: true\n};\n```","message":"Puppeteer `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.","severity":"gotcha","affected_versions":"<=0.3.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"Error: No such file or directory, cannot find chromium"},{"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.","cause":"The current screenshot taken by `assertVisualTest` does not visually match the stored baseline image for 'my-snapshot' within the allowed pixel difference threshold.","error":"Visual test failed: Differences detected in snapshot 'my-snapshot'"},{"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.","cause":"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.","error":"Error: Command `ember visual-test:approve` not found"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}