{"id":13482659,"url":"https://github.com/cburgmer/csscritic","last_synced_at":"2025-04-04T17:04:26.090Z","repository":{"id":4396775,"uuid":"5533890","full_name":"cburgmer/csscritic","owner":"cburgmer","description":"Lightweight CSS regression testing","archived":false,"fork":false,"pushed_at":"2023-01-28T16:43:50.000Z","size":6319,"stargazers_count":486,"open_issues_count":17,"forks_count":19,"subscribers_count":17,"default_branch":"master","last_synced_at":"2024-10-30T04:49:33.092Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://cburgmer.github.io/csscritic","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cburgmer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-08-23T23:38:05.000Z","updated_at":"2024-08-22T12:39:24.000Z","dependencies_parsed_at":"2023-02-15T17:46:11.007Z","dependency_job_id":null,"html_url":"https://github.com/cburgmer/csscritic","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cburgmer%2Fcsscritic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cburgmer%2Fcsscritic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cburgmer%2Fcsscritic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cburgmer%2Fcsscritic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cburgmer","download_url":"https://codeload.github.com/cburgmer/csscritic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217173,"owners_count":20903008,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T17:01:04.215Z","updated_at":"2025-04-04T17:04:26.028Z","avatar_url":"https://github.com/cburgmer.png","language":"JavaScript","funding_links":[],"categories":["Tools and frameworks (a-z↓)","JavaScript","Tools and frameworks"],"sub_categories":[],"readme":"# CSS Critic\n\n\u003ca href=\"https://www.npmjs.org/package/csscritic\"\u003e\n    \u003cimg src=\"https://badge.fury.io/js/csscritic.svg\"\n        align=\"right\" alt=\"NPM version\" height=\"18\"\u003e\n\u003c/a\u003e\nA lightweight tool for regression testing of Cascading Style Sheets.\n\n## What?\n\nOne picture might say more than 1000 words:\n\n\u003cimg src=\"http://cburgmer.github.io/csscritic-examples/nicereporter_in_action.png\" alt=\"CSS Critic testing the TodoMVC app\"\u003e\n\nFor background information [watch the screencast](http://youtu.be/AqQ2bNPtF60) or if you feel like playing around have a look at the [runnable instance](http://runnable.com/VXJo7YUrGNMz4gnD/csscritic-1-2-0-in-action). This [example project](https://github.com/cburgmer/csscritic-examples) helps you get started with your own setup.\n\n## Why?\n\nYour web stack should be fully testable. CSS Critic closes the gap in front end testing and makes HTML \u0026 CSS testable - no more broken UI. For example, make it supervise changes to your project's responsive styleguide so you know things are looking good.\n\n## How is it different to the other tools out there?\n\nWe believe that your UI will change often enough that a lightweight process on managing changes (near instant feedback, anyone?) is more important than a heavy-weight one which could offer tighter control. Also CSS Critic aims at bridging the gap between user experience (UX) people and (UI) developers. You probably won't find any easier way of sharing your UI tests than as the simple web page that CSS Critic basically is. And don't feel put down by the \"CSS\" bit, you may throw anything at it that can be converted into a simple image.\n\n## How to install?\n\n    $ npm install csscritic\n\nSee `node_modules/csscritic/example/RegressionRunner.html` for an example on how to take it from there.\n\n## How does it work?\n\nCSS Critic checks your current layout constantly against a reference image you have provided in the past. If your layout breaks (or simply changes - CSS Critic can't tell) your tests fail.\n\n*Get started:*\n\n1. Create a `RegressionRunner.html` similar to the one under [`example/`](example/) and put it with your code that is to be tested.\n\n2. Register your page under test via:\n\n    ```js\n    csscritic.add({\n        url: 'SOME_URL',  // link to the test case HTML document\n        desc: 'some text' // optionally, a description of the test case (see API for even more options)\n    });\n    ```\n\n3. Serve the directory on a local webserver via `python3 -m http.server` and open the RegressionRunner.html in your favourite browser\n\n4. Now save the resulting image as future reference.\n\n5. Re-run the RegressionRunner.html and see your test passing. Congratulations.\n\n*What do I do if my test fails?*\n\n1. Have a look at the diff image and visually inspect what has changed.\n\n2. If the change is an unwanted one fix your CSS,\n\n3. If deliberate accept the change (generating a new reference image).\n\n## Developing CSS Critic\n\nFor tests install Node.js and run\n\n    $ npm install \u0026\u0026 npm test\n\nTo see CSS Critic testing its own UI run\n\n    $ python3 -m http.server\n    $ open http://localhost:8000/test/RegressionRunner.html\n\n## Limitations\n\n- Needs to be run via a webserver, as `file://` is limited by browsers due to security concerns.\n- [Same-origin restrictions](https://developer.mozilla.org/en-US/docs/Same_origin_policy_for_JavaScript) apply when sourcing files.\n- Because of the way the HTML is rendered internally certain limitations apply, see [the documentation of the render backend](https://github.com/cburgmer/rasterizeHTML.js/wiki/Limitations).\n\nFor more information see the [FAQ](https://github.com/cburgmer/csscritic/wiki/FAQ) and [API](https://github.com/cburgmer/csscritic/wiki/API).\n\nLicensed under MIT. Maintained by [@cburgmer](https://twitter.com/cburgmer). Copyright (c) 2012, 2013 ThoughtWorks, Inc.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcburgmer%2Fcsscritic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcburgmer%2Fcsscritic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcburgmer%2Fcsscritic/lists"}