Skip to content

Add Diffux-CI to list of command-line tools #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions source/contents/techniques/image-diff.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,15 @@ This is probably the most common technique employed for CSS testing as it direct

### Content Fragile

It is *content-fragile*. Any copy changes will break tests. Even something as simple as a 'last updated on' date in the footer of a page will trigger a failure exactly the same as an actual error would. This can be worked around by testing entirely with mocked content or by only running image diff tests against a '[living styleguide](guides/living-styleguide.html)' if your project uses one. The project '[Wraith](/tools/wraith.html)' generates the comparison images at run-time against the current production server to minimise any time-dependant content differences.
It is *content-fragile*. Any copy changes will break tests. Even something as simple as a 'last updated on' date in the footer of a page will trigger a failure exactly the same as an actual error would. This can be worked around by testing entirely with mocked content or by only running image diff tests against a '[living styleguide](guides/living-styleguide.html)' if your project uses one. The project '[Wraith](/tools/wraith.html)' generates the comparison images at run-time against the current production server to minimise any time-dependant content differences. With [Diffux-CI](/tools/diffux-ci.html), you are in control of the data used to snapshot and compare individual components.

### DOM-unaware

Once the page or element has been flattened down to an image, it has no relation to the underlying DOM structure. This makes it harder to identify the root cause of the problem it has identified. You know that something has gone wrong but you'll still need to spend time figuring out exactly where.
Once the page or element has been flattened down to an image, it has no relation to the underlying DOM structure. This makes it harder to identify the root cause of the problem it has identified. You know that something has gone wrong but you'll still need to spend time figuring out exactly where. Good image diffing tools will run diffs for every commit you make. This makes it easier to pin-point what change introduced the problem.

### Tools

* [CSSCritic](/tools/csscritic.html)
* [Diffux-CI](/tools/diffux-ci.html)
* [PhantomCSS](/tools/phantomcss.html)
* [Wraith](/tools/wraith.html)
* [Wraith](/tools/wraith.html)
23 changes: 23 additions & 0 deletions source/contents/tools/diffux-ci.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
template: layout.jade
section: tools
title: Diffux-CI
---

## Diffux-CI

[Diffux-CI](https://github.com/diffux/diffux_ci) checks your JavaScript
components for visual regressions. It is designed to integrate with any
continuous integration environment (such as [Jenkins](https://jenkins-ci.org/),
[Travis](https://travis-ci.org/), and others) and will help you catch bugs
before they end up in production. With its clear focus on components,
[React](https://facebook.github.io/react/) applications are perfectly suited
for Diffux-CI.

Make sure to check out [the blog post introducing
Diffux-CI](https://medium.com/brigade-engineering/the-end-of-visual-regressions-b6b5c3d810f).

### Links

* [Source code](https://github.com/diffux/diffux_ci)
* [Blog post](https://medium.com/brigade-engineering/the-end-of-visual-regressions-b6b5c3d810f)
1 change: 1 addition & 0 deletions source/contents/tools/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ Here, we'll list all the known tools, browser extensions and services.
* [CSSCritic](csscritic.html)
* [cssert](cssert.html)
* [CSSLint](csslint.html)
* [Diffux-CI](diffux-ci.html)
* [Fighting Layout Bugs](fighting-layout-bugs.html)
* [GhostStory](ghoststory.html)
* [Hardy](hardy.html)
Expand Down