Viff Examples

Viff is an automated testing framework to find virsual differences between web pages in different environments(developing, staging, production) and browsers. Find more in Viff Product Page.

Video Quick Introduction

Just list some useful examples as below:

1. Tiny CSS difference
2. Chart difference
3. Content difference
4. Partial difference
5. Event Handling
6. Responsive
7. Multiple browsers
8. Multiple Environments
9. Browserstack
10. Programmable
11. Using Viff Server (beta in [email protected])

Examples of finding differences (No.1 - 8)

Install viff and wdm.

// install viff
$ npm install viff -g

// install webdriver manager
$ npm install wdm -g
$ wdm update --standalone

// set up local selenium server on http://localhost:4444
$ wdm start

Run the example.config.js to check following examples.

Tiny CSS difference, Chart difference, Content difference, Partial difference, Event Handling, Responsive, Multiple browsers, Multiple Environments.

$ viff example/example.config.js

In example.config.js, you could find this part for Multiple Browsers and Multiple Environments.

...
browsers: ['firefox', 'chrome'],
envHosts: {
  build: 'http://localhost:4000/example/build',
  prod: 'http://localhost:4000/example/prod'
},
...

And size() method for browser responsive testcase. Actually, we just used scripting feature to make the browser to be in a specific size. The same logic used in Event Handling example.

{
  'Responsive': ['/responsive.html', size(480)]
}

Browserstack example

Run

$ viff example/browserstack.iphone.config.js

to run a test for comparing http://www.google.com in iPhone 5 and iPhone 5S. You could find more browser capabilities in Browserstack.

Remember to fill in your username and key in config file before running it.

...
{
  'browserName' : 'iPhone',
  'platform' : 'MAC',
  'device' : 'iPhone 5',
  'browserstack.user': 'your-name',
  'browserstack.key': 'your-key'
},
...

If you want to review the output, just open single http server python -m SimpleHTTPServer could get the result.

Programmable example

Run

$ ./example/iphone5shot http://www.google.com

to take a screenshot for http://www.google.com in iphone 5, and generate a image called output.png. You could update the url you want.

Using Viff Server (beta in [email protected])

You could try viffserver and viff-client to do the viff testing with your functional testing.

Run the viff server first.

$ viffserver

And integrated viffclient.post method in your functional testing code like example/simple.client.js. Then, checkout your report again.

$ node example/simple.client.js