argos-ember's Introduction

@argos-ci/ember

Argos visual testing SDK for Ember applications.

Prerequisites

To get most out of this guide, you'll need to:

Have an app with Ember testing set up

Getting started

1. Install

npm install --save-dev puppeteer @argos-ci/ember

2. Configure testem

Use argos-chrome as browser in your testem configuration.

// testem.js
"use strict";

const path = require("path");

const argosChrome = path.resolve(__dirname, "node_modules/.bin/argos-chrome");

module.exports = {
  test_page: "tests/index.html?hidepassed",
  launch_in_ci: ["Chrome"],
  browser_paths: {
    Chrome: argosChrome,
  },
};

3. Take screenshots

Use argosScreenshot to take screenshot of your application.

import { module, test } from "qunit";
import { visit } from "@ember/test-helpers";
import { setupApplicationTest } from "ember-qunit";
import { argosScreenshot } from "@argos-ci/ember";

module("Home", function (hooks) {
  setupApplicationTest(hooks);

  test("takes a screenshot of the homepage", async function () {
    await visit("/");
    await argosScreenshot("home");
  });
});

4. Setup your CI

Add this command to your CI pipeline to upload the screenshots to Argos.

npm exec -- argos upload --token <ARGOS_TOKEN> ./screenshots

argos-ember's People

Contributors

Stargazers

Watchers

argos-ember's Issues

`prefers-reduced-motion` not set to `reduce` results in screenshots being taken mid-animation.

Hello!

I'm trying to take a screenshot of a page that has a fade-in animation on render.

I played around with CSS resets, but I couldn't reach a satisfactory result. The screenshot is being taken mid-animation:

I was finally able to take a good screenshot by emulating prefers-reduced-motion="reduce" on the Puppeteer page object:

// node_modules/@argos-ci/ember/run-chrome.mjs

  app.post("/screenshot", express.json(), async (req, res) => {
    try {
      // Take a screenshot of the page
      const element = await page.$("#ember-testing");
      if (!element) {
        throw new Error("No #ember-testing element found");
      }
      const { name, ...options } = req.body;

+      page.emulateMediaFeatures([
+        { name: "prefers-reduced-motion", value: "reduce" },
+      ]);

      await argosScreenshot(page, name, {
        element,
        ...options,
      });
      res.sendStatus(200);
    } catch (error) {
      res.send(error.stack);
      console.error(error);
      res.sendStatus(500);
    }
  });

In the snippet, prefers-reduce-motion is set to reduce by default, which seems consistent with the fact that animations are not something that you might want to do visual regression testing on.

I think this could also be an option, but it gets filtered out somewhere down the line. I believe by the TypeScript configuration since it's not part of PuppeteerArgosScreenshotOptions.

Recommend Projects

argos-ci / argos-ember Goto Github PK

argos-ember's Introduction

@argos-ci/ember

Prerequisites

Getting started

1. Install

2. Configure testem

3. Take screenshots

4. Setup your CI

argos-ember's People

Contributors

Stargazers

Watchers

Forkers

argos-ember's Issues

`prefers-reduced-motion` not set to `reduce` results in screenshots being taken mid-animation.

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent