{"id":15552224,"url":"https://github.com/bahmutov/monalego","last_synced_at":"2025-09-26T12:31:12.905Z","repository":{"id":37160084,"uuid":"342057606","full_name":"bahmutov/monalego","owner":"bahmutov","description":"Visual testing for HTML canvas drawing","archived":false,"fork":false,"pushed_at":"2025-01-16T05:56:19.000Z","size":6855,"stargazers_count":10,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-16T06:45:19.731Z","etag":null,"topics":["cypress-example"],"latest_commit_sha":null,"homepage":"","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/bahmutov.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-24T22:51:24.000Z","updated_at":"2025-01-16T05:55:42.000Z","dependencies_parsed_at":"2024-01-17T04:59:24.069Z","dependency_job_id":"49a70884-b91b-480c-bbea-d15dceb2b2fb","html_url":"https://github.com/bahmutov/monalego","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fmonalego","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fmonalego/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fmonalego/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fmonalego/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bahmutov","download_url":"https://codeload.github.com/bahmutov/monalego/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234309712,"owners_count":18811949,"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":["cypress-example"],"created_at":"2024-10-02T14:12:54.722Z","updated_at":"2025-09-26T12:31:11.267Z","avatar_url":"https://github.com/bahmutov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MonaLego ![cypress version](https://img.shields.io/badge/cypress-9.7.0-brightgreen) [![ci status][ci image]][ci url] [![renovate-app badge][renovate-badge]][renovate-app]\n\u003e Visual testing for HTML canvas drawing\n\n[![monalego](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/vzoo2b\u0026style=flat\u0026logo=cypress)](https://dashboard.cypress.io/projects/vzoo2b/runs)\n\n## Mona Lisa example\n\nThis [Legra.js](https://legrajs.com/) demo copied from from [legra-monalisa.glitch.me/](https://legra-monalisa.glitch.me/)\n\n![MonaLego](./images/darwin/canvas-20.png)\n\nThe test in [cypress/integration/mona-spec.js](./cypress/integration/mona-spec.js) changes the brick size and saves the produced Lego image as a local file.\n\nRelated: [Fast legoization](https://glebbahmutov.com/blog/fast-legoization/)\n\n## Smiley face\n\nRead [Canvas Visual Testing with Retries](https://glebbahmutov.com/blog/canvas-testing/), see the test [cypress/integration/smile-spec.js](./cypress/integration/smile-spec.js).\n\n![Visual canvas testing](./gif/recurse-smile.gif)\n\n## Pixel match in the browser\n\nLook at [pixelmatch-spec.js](./cypress/integration/pixelmatch-spec.js) where we compare the canvas image to itself after N milliseconds using [pixelmatch](https://github.com/mapbox/pixelmatch#readme) library. This let's us retry until the canvas stabilizes and becomes static - which means the animation has finished.\n\n![Canvas becomes static](./images/canvas-static.gif)\n\nWatch the video [Canvas image diffing in the browser using pixelmatch](https://youtu.be/WGigbAupExQ).\n\n## Bar chart\n\nAn animated [Chart.js bar chart](https://www.chartjs.org/samples/latest/scriptable/bar.html) with multiple visual diffs against it. You can change the animation duration in [public/bar.html](./public/bar.html), the test should still work.\n\n![Visual tests against animated bar chart](./gif/bar.gif)\n\nWatch [the video](https://youtu.be/aeBclf9A92A) for more details\n\n## Native screenshots\n\nThis repository is showing how to use Chrome debugger protocol to capture the browser screenshot natively in Chrome browsers. See the [screenshot-spec.js](./cypress/integration/screenshot-spec.js) test file.\n\n[ci image]: https://github.com/bahmutov/monalego/workflows/main/badge.svg?branch=main\n[ci url]: https://github.com/bahmutov/monalego/actions\n[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg\n[renovate-app]: https://renovateapp.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Fmonalego","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbahmutov%2Fmonalego","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Fmonalego/lists"}