From 2a76e077a32f2aa5e6006713bc685437a4418f3f Mon Sep 17 00:00:00 2001 From: Dawid Karabin Date: Sun, 17 Apr 2016 17:23:53 +0200 Subject: [PATCH] Update tools, article sections Add to the tools list: BackstopJS, Gemini, Succss, WebdriverCSS. Update info about Huxley which is no more maintained. --- source/contents/guides/articles/index.md | 7 ++-- source/contents/tools/backstopjs.md | 33 +++++++++++++++ source/contents/tools/gemini.md | 44 ++++++++++++++++++++ source/contents/tools/huxley.md | 9 +++-- source/contents/tools/index.md | 51 +++++++++++++----------- source/contents/tools/succss.md | 37 +++++++++++++++++ source/contents/tools/webdrivercss.md | 34 ++++++++++++++++ 7 files changed, 185 insertions(+), 30 deletions(-) create mode 100644 source/contents/tools/backstopjs.md create mode 100644 source/contents/tools/gemini.md create mode 100644 source/contents/tools/succss.md create mode 100644 source/contents/tools/webdrivercss.md diff --git a/source/contents/guides/articles/index.md b/source/contents/guides/articles/index.md index 2ab243b..1ae3667 100644 --- a/source/contents/guides/articles/index.md +++ b/source/contents/guides/articles/index.md @@ -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)) \ No newline at end of file +(If you know of another article that should be here, please [create an issue](https://github.com/thingsinjars/csstest/issues/new)) diff --git a/source/contents/tools/backstopjs.md b/source/contents/tools/backstopjs.md new file mode 100644 index 0000000..0442ed5 --- /dev/null +++ b/source/contents/tools/backstopjs.md @@ -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/) diff --git a/source/contents/tools/gemini.md b/source/contents/tools/gemini.md new file mode 100644 index 0000000..9783f88 --- /dev/null +++ b/source/contents/tools/gemini.md @@ -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 (GCC@4.6 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) diff --git a/source/contents/tools/huxley.md b/source/contents/tools/huxley.md index 1e5d27f..3062c1e 100644 --- a/source/contents/tools/huxley.md +++ b/source/contents/tools/huxley.md @@ -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) \ No newline at end of file +- [Project site](https://github.com/facebook/huxley) diff --git a/source/contents/tools/index.md b/source/contents/tools/index.md index c6ff8ab..b176db6 100644 --- a/source/contents/tools/index.md +++ b/source/contents/tools/index.md @@ -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) diff --git a/source/contents/tools/succss.md b/source/contents/tools/succss.md new file mode 100644 index 0000000..7dd19c0 --- /dev/null +++ b/source/contents/tools/succss.md @@ -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) diff --git a/source/contents/tools/webdrivercss.md b/source/contents/tools/webdrivercss.md new file mode 100644 index 0000000..e1cb904 --- /dev/null +++ b/source/contents/tools/webdrivercss.md @@ -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)