Skip to content

Update tools, article sections #23

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/guides/articles/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@ section: guides
title: Articles
---

## Introductory articles
# Introductory articles

A very small sample of some of the many articles available on the topic of CSS testing.

* [4 Tools for Automatic CSS Testing - Simon Madine](http://www.creativebloq.com/css3/4-tools-automatic-css-testing-7133777)
- [4 Tools for Automatic CSS Testing - Simon Madine](http://www.creativebloq.com/css3/4-tools-automatic-css-testing-7133777)
- [Automated regression testing of Jira stories - Chris Gunawardena](http://chris.gunawardena.id.au/software-development/automated-regression-testing-of-jira-stories/)

(If you know of another article that should be here, please [create an issue](https://github.com/thingsinjars/csstest/issues/new))
(If you know of another article that should be here, please [create an issue](https://github.com/thingsinjars/csstest/issues/new))
33 changes: 33 additions & 0 deletions source/contents/tools/backstopjs.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
template: layout.jade
section: tools
title: Gemini
---

# BackstopJS

_Automates CSS regression testing of your responsive web UI by comparing DOM screenshots at various viewport sizes._

## Support browsers

- [PhantomJS](https://github.com/ariya/phantomjs)
- [SlimerJS](http://slimerjs.org/)

## Additional features

- [Running custom CasperJS scripts](https://github.com/garris/BackstopJS#running-custom-casperjs-scripts-version-080)

## Requirements

1. Node

2. [PhantomJS](https://github.com/ariya/phantomjs) or [SlimerJS](http://slimerjs.org/)

## Techniques

- [Image diff](/techniques/image-diff.html)

## Links

- [BackstopJS on Github](https://github.com/garris/BackstopJS)
- [Official website](http://garris.github.io/BackstopJS/)
44 changes: 44 additions & 0 deletions source/contents/tools/gemini.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
---
template: layout.jade
section: tools
title: Gemini
---

# Gemini

_Gemini is the utility for regression testing of web pages appearance._

## Supported browsers

- Google Chrome (tested in latest version)
- Mozilla Firefox (tested in latest version)
- IE8+
- Opera 12+

## Additional features

- CSS test coverage statistics

## Requirements

1. Node

2. WebDriver server implementation

1. Selenium Server (for testing in different browsers)

2. ChromeDriver (for testing in Google Chrome)

3. PhantomJS (launch with `phantomjs --webdriver=4444`)

4. Cloud WebDriver services (e.g. SauceLabs, BrowserStack)

3. Compiler with support of C++11 ([email protected] or higher). This is a png-img requirement.

## Techniques

- [Image diff](/techniques/image-diff.html)

## Links

- [Gemini on Github](https://github.com/gemini-testing/gemini)
9 changes: 5 additions & 4 deletions source/contents/tools/huxley.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@ section: tools
title: Huxley
---

## Huxley
# Huxley

_This is an archived project and is no longer supported or updated by Facebook or Instagram._

Huxley is a test-like system for catching visual regressions in Web applications using [image diff](/techniques/image-diff.html) tests.

An key feature of this tool is that the testing framework can be run in 'record' mode to capture test scenarios automatically. This greatly simplifies the process of creating the initial test cases.

## Links

### Links

* [Project site](https://github.com/facebook/huxley)
- [Project site](https://github.com/facebook/huxley)
51 changes: 28 additions & 23 deletions source/contents/tools/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,36 @@ section: tools
title: Tools
---

## Tools
# Tools

Here, we'll list all the known tools, browser extensions and services.

* Command-line enabled
* [Cactus](cactus.html)
* [CSSCritic](csscritic.html)
* [cssert](cssert.html)
* [CSSLint](csslint.html)
* [Fighting Layout Bugs](fighting-layout-bugs.html)
* [GhostStory](ghoststory.html)
* [Hardy](hardy.html)
* [Huxley](huxley.html)
* [MinCSS](mincss.html)
* [Mogotest](mogotest.html)
* [Needle](needle.html)
* [Quixote](quixote.html)
* [PhantomCSS](phantomcss.html)
* [StyleStats](stylestats.html)
* [Wraith](wraith.html)
* [Grunt-Photobox](photobox.html)
- Command-line enabled

* Manual testing tools
* [CSSCritic](csscritic.html)
* [cssUnit](cssunit-shepard.html)
* [CSSunit](cssunit.html)
* [CSS Test](css-test.html)
- [BackstopJS](backstopjs.html)
- [Cactus](cactus.html)
- [CSSCritic](csscritic.html)
- [cssert](cssert.html)
- [CSSLint](csslint.html)
- [Fighting Layout Bugs](fighting-layout-bugs.html)
- [Gemini](gemini.html)
- [GhostStory](ghoststory.html)
- [Grunt-Photobox](photobox.html)
- [Hardy](hardy.html)
- [Huxley (no longer supported)](huxley.html)
- [MinCSS](mincss.html)
- [Mogotest](mogotest.html)
- [Needle](needle.html)
- [Quixote](quixote.html)
- [PhantomCSS](phantomcss.html)
- [StyleStats](stylestats.html)
- [Succss](succss.html)
- [WebdriverCSS](webdrivercss.html)
- [Wraith](wraith.html)

- Manual testing tools

- [CSSCritic](csscritic.html)
- [cssUnit](cssunit-shepard.html)
- [CSSunit](cssunit.html)
- [CSS Test](css-test.html)
37 changes: 37 additions & 0 deletions source/contents/tools/succss.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
template: layout.jade
section: tools
title: Succss
---

# Succss

_Succss is a command line tool built to find image-based differences between website updates._

## Supported browsers

- [PhantomJS](https://github.com/ariya/phantomjs)
- [SlimerJS](http://slimerjs.org/)

## Requirements

1. Node
2. Python

## Built with

- [PhantomJS](https://github.com/ariya/phantomjs)
- [CasperJS](http://casperjs.org/)
- [SlimerJS](http://slimerjs.org/)
- [Resemble.js](http://huddle.github.io/Resemble.js/)
- [js-imagediff](https://github.com/HumbleSoftware/js-imagediff)

## Techniques

- [Image diff](/techniques/image-diff.html)

## Links

- [Succss on Github](https://github.com/B2F/Succss)
- [Official website](http://succss.ifzenelse.net/index.html)
- [Why another CSS regression testing tool?](http://succss.ifzenelse.net/index.html?page=why)
34 changes: 34 additions & 0 deletions source/contents/tools/webdrivercss.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
template: layout.jade
section: tools
title: WebdriverCSS
---

# WebdriverCSS

_CSS regression testing for [WebdriverIO](http://webdriver.io/)._

Use WebdriverIO and WebdriverCSS to write some E2E tests and take screenshots of these areas.

## Supported browsers

- Selenium
- PhantomJS
- BrowserStack

## Requirements

1. Node

2. [GraphicsMagick](http://www.graphicsmagick.org)

3. Selenium or PhantomJS or BrowserStack (see [sample configuration](https://github.com/webdriverio/webdrivercss/blob/master/examples/webdrivercss.browserstack.js))

## Techniques

- [Image diff](/techniques/image-diff.html)

## Links

- [WebdriverCSS on Github](https://github.com/webdriverio/webdrivercss)
- [WebdriverCSS Admin on Github](https://github.com/webdriverio/webdrivercss-adminpanel)