Ember SDK Overview

The Ember package gives you two things:

configure() to wrap your Testem config
vizzlyScreenshot() in test files

That is the whole integration surface.

Install

npm install -D @vizzly-testing/cli @vizzly-testing/ember
npx playwright-core install chromium firefox webkit

Set up Testem

const { configure } = require('@vizzly-testing/ember');

module.exports = configure({
  test_page: 'tests/index.html?hidepassed',
  launch_in_ci: ['Chrome'],
  launch_in_dev: ['Chrome'],
});

configure() swaps the normal launchers for Playwright-backed ones so screenshots can be captured during tests. It remaps Chrome, Firefox, Safari, and WebKit entries, including lowercase variants, to Vizzly launchers.

Custom launchers are preserved. The Playwright-backed launchers run headless by default; pass Playwright launch options like { headless: false } as the second argument to configure() when you need a visible browser.

If your Ember setup serves tests from dist, pass cwd: 'dist' in the Testem config.

Capture screenshots in tests

import { module, test } from 'qunit';
import { visit } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
import { vizzlyScreenshot } from '@vizzly-testing/ember/test-support';

module('Acceptance | Dashboard', function(hooks) {
  setupApplicationTest(hooks);

  test('dashboard', async function() {
    await visit('/dashboard');
    await vizzlyScreenshot('dashboard');
  });
});

The helper waits for Ember to settle before capture.

Useful options

await vizzlyScreenshot('login-form', {
  width: 375,
  height: 667,
  selector: '[data-test-login-form]',
  properties: { viewport: 'mobile' },
});

Common options:

width and height
selector
scope: app, container, or page; defaults to app
fullPage
properties
threshold
minClusterSize
failOnDiff
buildId
requestTimeout

failOnDiff resolves per screenshot first, then VIZZLY_FAIL_ON_DIFF or .vizzly/server.json, then default non-fail mode.

Each screenshot includes framework: 'ember', browser, and url metadata. Your properties override those defaults. Image dimensions come from the captured bitmap; the client doesn’t generate viewport properties.

Run it

For local review:

vizzly tdd start
ember test

For cloud builds:

vizzly run "ember test"

Extra helper

If you need a guard, the package also exports isVizzlyAvailable().