#Phantomcss screenshot path for mac
For Mac users, you can again use Homebrew: brew install casperjsįor Windows users, you need to append your PATH file with " C:\casperjs\batchbin" (Modify this path depending on where you want to store CasperJS). Once Phantom is installed you can go ahead and install CasperJS too. Once installed, you can open a terminal and check that everything is OK by running: phantomjs -version
#Phantomcss screenshot path update
You might already have Phantom installed, especially if you are already testing your client-side code, if not, it's pretty straight forward and you can get more detailed instructions on the official siteįor Windows users, there's an executable to download and run.įor Mac users, there's both the binary or you can install using Homebrew: brew update & brew install phantomjsįor Linux users, there's a 64-bit binary or you have an option to compile PhantomJS from source. For a great introduction to PhantomJS and using it for testing there is a tutorial right here on nettuts and be sure to check the official site and documentation.ĬasperJS is a toolkit that sits on-top of PhantomJS and eases the process of writing Phantom scripts by providing functions, methods, and syntactic sugar. PhantomJS has a great JavaScript API built with testing in mind. Note : PhantomJS is a headless WebKit browser and anything rendered would be using WebKit rendering, so it's not an actual representation of how the site would render on various devices that might run different browsers and whilst you are able to change the User Agent string sent to the site on-load, this doesn't change the rendering engine. It will also give you something to possibly show the client in regular intervals, to display how their site flexes at various viewports. It's particularly good when you are working within a larger team and you might not have the time before each build to go and check every single page and module for how it looks at various resolutions. When a build is run, a small script using PhantomJS and CasperJS can go and grab a screenshot at various viewports which I've defined and give me a quick overview of any desired page. It's not ideal for real testing, as it acts more like a sanity test and provides a good overview for anything I might be working on involving Responsive Web. This is something I first saw at mediaqueri.es and started implementing it into my build process. Today I am going to run through writing a quick and simple script to take some screenshots of any site at various viewports and save the images to disc. That one, two second annoying task has now started eating into your lunch time. Taking a few screenshots isn't too bad, but lets say for example that now you are working on a website using Responsive Web Design and you have to take five times as many screenshots at various viewports.
Capturing screenshots is annoying, but most of time it has to be done and usually it's you - The Developer - who has to do it.
0 kommentar(er)
