How do I set up Hardy to test with Chrome?

You need to install ChromeDriver separately and ensure it's in your path. Then, run Hardy with the --browser=chrome flag to specify Chrome, as detailed in the README's browser setup section.

Does Hardy support headless browsers for faster testing?

Yes, Hardy supports PhantomJS, a headless browser, by running tests with --browser=phantomjs. However, the local PhantomJS install might require manual path configuration, as noted in the README.

What's the difference between Hardy and BackstopJS for visual regression testing?

Hardy uses Selenium and Cucumber for a more integrated, multi-browser approach with readable syntax, while BackstopJS focuses on visual diffs with a simpler setup but may lack the same cross-browser automation depth.

Can I use Hardy with Jenkins or other CI tools besides Travis?

Yes, Hardy is CI-ready and can be adapted for any CI system supporting Node.js and Selenium. The README provides a Travis guide, but the principles apply to others like Jenkins with similar configurations.

How does Hardy handle dynamic CSS or animations?

Hardy uses Selenium to capture the rendered page state, so it should handle dynamic CSS and animations as they appear in browsers, though test steps may need to manage timing or interactions explicitly.

Is GraphicsMagick required for Hardy to work?

No, GraphicsMagick is optional but recommended for significantly faster image comparisons. Without it, Hardy still functions but may be slower in visual regression tests.

Open-Awesome

Hardy

MITJavaScript

A CSS testing framework using Selenium and Cucumber for automated visual and functional CSS testing across browsers.

Visit Website GitHub

325 stars26 forks0 contributors

What is Hardy?

Hardy is a CSS testing framework that combines Selenium and Cucumber to automate visual and functional CSS testing. It provides a ready-to-use collection of testing steps and a boilerplate setup, allowing developers to quickly implement automated tests that catch visual regressions and cross-browser CSS issues.

Target Audience

Frontend developers and QA engineers who need to automate CSS testing across multiple browsers, particularly those working on projects where visual consistency and cross-browser compatibility are critical.

Value Proposition

Developers choose Hardy because it offers a streamlined, opinionated setup for CSS testing with built-in support for Selenium and Cucumber, reducing configuration time and providing reliable visual regression testing out of the box.

Overview

Selenium-driven, cucumber-powered CSS testing.

Use Cases

Best For

Automating visual regression testing for CSS changes
Testing CSS across multiple browsers (Firefox, Chrome, PhantomJS)
Integrating CSS testing into continuous integration pipelines
Writing readable, maintainable CSS tests with Cucumber syntax
Catching cross-browser CSS compatibility issues early
Setting up a standardized CSS testing workflow quickly

Not Ideal For

Projects needing a lightweight, dependency-free testing solution, as Hardy requires Java, Selenium, and browser drivers
Teams already using modern testing frameworks like Cypress or Playwright with built-in CSS testing features
Applications with minimal CSS where visual regression testing is unnecessary, making Hardy's feature set overkill

Pros & Cons

Pros

Multi-Browser Testing

Supports simultaneous testing across Firefox, Chrome, and PhantomJS from a single command, ensuring cross-browser compatibility as highlighted in the README.

Visual Image Comparison

Includes built-in image diff testing for visual regressions, with optional GraphicsMagick integration for faster processing, as mentioned in the installation notes.

Readable Test Syntax

Uses Cucumber's Gherkin syntax, making tests easy to read and maintain for teams adopting behavior-driven development practices.

CI Pipeline Integration

Provides ready-to-use setup guides for Travis CI and other continuous integration systems, facilitating automated testing workflows from the start.

Cons

Complex Setup Requirements

Requires Java for Selenium, specific drivers for browsers like Chrome and IE, and manual configuration for PhantomJS, adding significant initial setup overhead.

Project Maturity Concerns

The README states it's 'not 100%' ready, indicating potential bugs and incomplete features that could affect reliability in production environments.

Performance Overhead

Relies on Selenium and full browser instances, which can be slow and resource-intensive compared to headless or lightweight testing tools.

Frequently Asked Questions

Related Projects

Playwright

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.

Integrated end-to-end testing framework written in Node.js and using W3C Webdriver API. Developed at @browserstack

Stars11,946

Forks1,399

Last commit1 month ago

TestCafe

A Node.js tool to automate end-to-end web testing.

Stars9,910

Forks679

Last commit3 days ago

Protractor

E2E test framework for Angular apps

Stars8,679

Forks2,261

Last commit3 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub