# rockcss

> Rockcss is a command line tool built to find image-based differences between website updates. Base on Succss.

Latest version **1.0.7** (published 2015-10-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install rockcss
pnpm add rockcss
yarn add rockcss
bun add rockcss
```

Provides the command `rockcss`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2015-10-26 |
| First published | 2015-09-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Huy Ly |
| Maintainers | huyly |
| Keywords | css, regression, testing, screenshots, capture |

## Links

- npm: https://www.npmjs.com/package/rockcss
- Repository: https://github.com/SLyHuy/Succss
- Homepage: https://github.com/SLyHuy/Succss#readme
- Issues: https://github.com/SLyHuy/Succss/issues
- npm.io page: https://npm.io/package/rockcss

## Dependencies (4)

- [express](https://npm.io/package/express.md) ^4.13.3
- [casperjs](https://npm.io/package/casperjs.md) ^1.1.0-beta3
- [slimerjs](https://npm.io/package/slimerjs.md) ^0.9.6
- [phantomjs](https://npm.io/package/phantomjs.md) ^1.9.18

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2015-10-26
- 1.0.6 — 2015-09-01
- 1.0.5 — 2015-09-01
- 1.0.3 — 2015-09-01
- 1.0.2 — 2015-09-01
- 1.0.1 — 2015-09-01
- 1.0.0 — 2015-09-01

## README

##ROCKCSS - base on SUCCSS, a CSS Regression testing tool

Customized & optimized from SUCCSS (Find more: http://succss.ifzenelse.net)

###Install
#####```$ sudo npm install -g rockcss```

###Support
1. Flow testing.
2. Allow cookies.
3. SSL and https protocol.
4. Visual report (Using template from BackStopJS - https://github.com/garris/BackstopJS)

###How to use?
Add reference screenshots

#####```$ rockcss add your-test.js```

After you change something in js/css code and complete your task. Let tun test again and check:

#####```$ rockcss check your-test.js```

If you want see a visual report:

Copy `report.js` and `report folder` inside `/report_server` to your folder have file `your-test.js` and run command:

#####```$ node report.js -t 60```

`-t 60` is time of server will alive in 60 mins. Default is 15 mins. After this time, server will automating shutdown. But you can start it again, it's not delete last checking data.

Open web browser at one of address in command line and see result. One of default address maybe:

``` http://localhost:3000/ ```


###How to config (make your-test.js)
- Check document from Sucss: http://succss.ifzenelse.net
- New configs:
  
  Under Succss.pages['name-page']:
      
      1. `hidden`           - String css3 of hidden Element.
      2. `beforeTest(url)`  - Function: with `url` is variable of url of this page.
  
  Under Succss.page['name-page'].captures:
      
      1. `before`           - Function: call before capture.
      2. `sAfter`           - Function: call after captured.

- Example:

```javascript
Succss.pages = {
    'home': {
        url: 'http://google.com/',
        directory: 'screenshots/' + 'home',
        hidden: '#ydtb-toolbar', //Hide Yii debug toolbar
        beforeTest: function() {
            var me = this;
            me.click({
                type: 'xpath',
                path: '//*[contains(concat(" ", @class, " "), " sidebar__list ")]//a[2]'
            });
        },
        captures: {
            'header': {
                selector: '.header.header-new'
            },
            'popup-login': {
                selector: {
                    type: 'xpath',
                    path: "//*[@id='fb-connect-popup']/../..",
                },
                before: function() {
                    var me = this;
                    me.click('.header-authentication-popup[data-authen="0"]');
                    me.wait(3000);
                },
                sAfter: function() {
                    var me = this;
                    me.click('.nyroModalClose.nyroModalCloseButton');
                    me.wait(1000);
                }
            },
            'checkout': {
                selector: 'body',
                before: function() {
                    var me = this;
                    me.evaluate(function() {
                        var input = $('#usernotregister').find('input');
                        input[0].checked = true;
                        input.change();
                    });
                    me.wait(100);

                    me.sendKeys('#EmailLoginForm_email', Config.emailLogin); // Fill your email address to login
                    me.sendKeys('#EmailLoginForm_password', Config.passwordLogin); // Fill your password to login

                    me.click('button.submit_btn.login_btn');
                    me.wait(5000);

                    me.waitForSelector('#page', function() {
                        console.log('Open checkout page successfully!');
                        me.wait(1000);

                        me.evaluate(function(selector) {
                            $(selector).remove();
                        }, '.adv');

                    }, function() {
                        console.log('Open checkout page failed!');
                    });
                }
            }

        }
    },
    'another-page': {}
}
```

####Built with:
- CasperJS
- Imagediff
- ResembleJS
- PhantomJS
- NodeJS
- Express
- MIT Licenses
- Thanks to them!

---
_Source: https://npm.io/package/rockcss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._