https://github.com/divio/casperjs-visual-debugging
Visual debugging for CasperJS tests
https://github.com/divio/casperjs-visual-debugging
Last synced: 4 months ago
JSON representation
Visual debugging for CasperJS tests
- Host: GitHub
- URL: https://github.com/divio/casperjs-visual-debugging
- Owner: divio
- Created: 2017-11-06T07:03:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-06T08:04:10.000Z (over 8 years ago)
- Last Synced: 2025-01-20T09:46:40.691Z (over 1 year ago)
- Language: HTML
- Size: 12.7 MB
- Stars: 0
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Visual debugging for CasperJS
Here is how it looks:
It works like this:
- your test grabs the screen as CasperJS sees it every X ms
- it posts the image to the receiving server (this repo)
- server then sends it via a websocket to the browser
- browser displays the images in a sequence, giving the feel of the video
After that here is also a range input that allows to go back in time to see what was happening before.
## Setup
1. `git clone` and eventually `npm install`
2. `node index.js`
3. go to http://localhost:8002
4. use the code below in your CasperJS tests to update the image:
```js
// eslint-disable-next-line
function show(casper, port) {
if (!casper.started) {
return;
}
casper.evaluate(function(opts) {
var options = JSON.parse(opts);
var img = options.img;
var visualPort = options.port;
// eslint-disable-next-line
__utils__.sendAJAX('http://localhost:' + visualPort, 'POST', { img: img }, false);
}, JSON.stringify({ img: casper.captureBase64('png'), port: port }));
}
setInterval(function() {
show(casper, 8002);
}, 10);
```
You can see the example of the setup here: https://github.com/divio/django-cms/blob/440ff84801537218dd16b47d0f8da7e526d241f7/cms/tests/frontend/integration/setup.js#L14-L33