roc

rockcss

A CSS regression testing tool.

Showing:

Popularity

Downloads/wk

2

GitHub Stars

2

Maintenance

Last Commit

6yrs ago

Contributors

2

Package

Dependencies

4

Size (min+gzip)

4.4KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

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:

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!

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial