Git Product home page Git Product logo

casperjs-starter's Introduction

How to start web testing with Casper JS

Web is unsafe place, beware, there are many bugs lurking in dark corners of your app.

To start husting this ugly creatures of night you need to prepare:

  • install nodejs
  • install phantomJS
  • install casperJS - your main hunting tool by using the next command
npm install phantomjs -g
npm install casperjs -g

if you are living in plains of Windows, you need to sharpen your weapon a bit. Locate the smithy at c:/Users/{your name}/AppData/Roaming/npm/. Here, you can change casperjs.cmd to look like next

@IF EXIST "%~dp0\python.exe" (
  "%~dp0\python.exe"  "%~dp0\node_modules\casperjs\bin\casperjs" %*
) ELSE (
  "%~dp0\node_modules\casperjs\batchbin\casperjs.bat" %*
)

Now you are ready to check self. Run the next command in the console ```capserjs``, it will connect your soul to your weapon ( if it says that casperjs not found then you are doomed for eternity )

Alternative way: there are rumors, that if you have Python installed, you will need not change anything in the casperjs.cmd. Still those are just rumors, and true wariors do not use Python anyway. 

From this point you have two ways - jump straigh in battle, by using raw casperJS test ( read war manual here - http://casperjs.readthedocs.org/en/latest/testing.html ) or use the more advanced techique of Thousand Arms.

Techniquie of Thousand Arms

  • clone this git repo
  • install gulp npm install gulp -g
  • write your clever test plan in the file in the retest folder (you can use subfolders if you wish )
  • run gulp retest to run all your tests at once
  • check result images in the retest/base
  • after next run you can find the screen from broken test in retest/failed

Test plan

Can be written in JavaScript, it starts from the name of page which need to be tested and followed by the list of actions and tests. You can use asserts for different tests, but in common case is it more simple to just make screenshoot and compare to the original one.

Lets check for example 01_basic/002_markers.js

//load core
var gantt = require("../../retest.js");
//write test name here
casper.test.begin('Deadline Markers', function suite(test) {
    //write url to test here
	casper.restart("04_customization/14_deadline.html");
    
    //make control screen shoot
	casper.rescreen('002-normal-state');
	
	//click somewhere
	casper.then(function(){
		this.click( this.gantt.task() );
	});
	
	//make another screenshot
	casper.rescreen('002-row-selected');

    //finalize test
	casper.run(function(){
		test.done();
	})
});

Steps for Ultimate Mastery of Thousand Arms

casperjs-starter's People

Contributors

mkozhukh avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.