On your Spectre website, open up the path /tests/new/. I'm a fan of this, as the separation of concerns makes it easier as a community to have a testing tool of our choice, but also build out a common admin interface. The latter would do the work of capturing the screenshots, while Spectre would manage storing and processing of images. In normal use, you'd pair Spectre up with a tool like WebdriverIO or PhantomJS. Instead, it focuses on providing image comparison capabilities, along with an admin interface for managing screenshots. Unlike the other tools on this list, Spectre doesn't run tests.
Phantomcss screenshot path how to#
Requires you to learn how to use WebdriverIO.Future uncertain as this specific plugin is no longer officially maintained.
Enables you to hide/mask certain areas of the screenshot.Quick configuration of different screen resolutions.Since it uses WebdriverIO, you can take advantage of all the features that framework provides.If you run your test again and the screenshots change, you'll notice a diff folder will be added and the respective diff images will be inside of it. Validate the images that were created by checking the webdrivercss folder. Run the test by typing this command into your command line: $ node test.js. webdrivercss('after-click', screenshotElement) webdrivercss('before-click', screenshotElement) The file can be as simple as: gemini.suite('yandex-search', function (suite) ] Then create a test file, and put it into the gemini folder in the root of your project. gemini.yml file with the following contents (replacing the URL to your Selenium grid server): rootUrl: Unlike PhantomCSS, Gemini goes several steps further by providing 'test suites' that can help organise your code. As with PhantomCSS, you can define custom actions around your screengrabs. I find Gemini appealing because it packages traditional Selenium testing in an interface that isn't too complicated. No interface for reviewing/managing screenshots.Built on top of CasperJS, allowing integration of page actions into tests.Your script will run in the background and your images will be saved to the screenshots folder. Then run your file via the CapserJS CLI: casperjs test myfile.js. Phantomcss.screenshot('#checkboxes', 'after click') Phantomcss.screenshot('#checkboxes', 'before click') Ĭasper.click('#checkboxes input:first-child') Try it outĬreate a new JavaScript file with the following code: casper.start('') Built on top of PhantomJS/CasperJS, PhantomCSS adds to the fantastic functionality provided by those two tools. Its familiarity and functionality make PhantomCSS a great choice for frontend folks looking to stretch their legs in terms of website testing. Running interactions specific to individual pages can be difficultĪnother veteran option, PhantomCSS has been a popular choice among frontend developers.Installation can be tricky if you're not familiar with Ruby.YAML configuration file is simple to work with.
Phantomcss screenshot path update#
In the configs/config.yaml file you can update the sites and pages to test, along with setting screen widths and diff mode.