Skip to content
Vizzly Docs

Ember Examples

Acceptance test

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');
  });
});

Component variants

await vizzlyScreenshot('button', {
  properties: { variant: 'primary' }
});


await vizzlyScreenshot('button', {
  properties: { variant: 'secondary' }
});

Responsive screenshots

await vizzlyScreenshot('nav', {
  width: 1280,
  height: 720,
  properties: { viewport: 'desktop' }
});


await vizzlyScreenshot('nav', {
  width: 375,
  height: 667,
  properties: { viewport: 'mobile' }
});

Element capture

await vizzlyScreenshot('sidebar', {
  selector: '[data-test-sidebar]'
});

Conditional usage

import { isVizzlyAvailable, vizzlyScreenshot } from '@vizzly-testing/ember/test-support';


if (isVizzlyAvailable()) {
  await vizzlyScreenshot('settings');
}

Tip

Use stable data-test-* selectors and keep screenshot names consistent. Keep the screenshot code focused on the states you need to review.

Next steps