{"id":18764465,"url":"https://github.com/theintern/visual-plugin","last_synced_at":"2025-04-13T04:33:32.447Z","repository":{"id":57148700,"uuid":"73105674","full_name":"theintern/visual-plugin","owner":"theintern","description":"Visual Regression Testing for Intern","archived":false,"fork":false,"pushed_at":"2023-02-27T15:29:48.000Z","size":496,"stargazers_count":29,"open_issues_count":13,"forks_count":7,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-26T21:47:19.247Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theintern.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"2016-11-07T17:55:42.000Z","updated_at":"2024-08-22T16:10:52.000Z","dependencies_parsed_at":"2024-11-07T18:35:08.392Z","dependency_job_id":"7dec4385-995d-4c1e-beb1-1e948dd8130f","html_url":"https://github.com/theintern/visual-plugin","commit_stats":{"total_commits":40,"total_committers":7,"mean_commits":5.714285714285714,"dds":0.35,"last_synced_commit":"f09f6384f1b53572ea31d7971886dabc347d0113"},"previous_names":["theintern/intern-visual"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theintern%2Fvisual-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theintern%2Fvisual-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theintern%2Fvisual-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theintern%2Fvisual-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theintern","download_url":"https://codeload.github.com/theintern/visual-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248664694,"owners_count":21142012,"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-11-07T18:29:55.857Z","updated_at":"2025-04-13T04:33:32.150Z","avatar_url":"https://github.com/theintern.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# visual-plugin\n\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- start-github-only --\u003e\n\u003cbr\u003e\u003cp align=\"center\"\u003e\u003cimg src=\"https://cdn.rawgit.com/theintern/visual-plugin/5115be20a45bec46da24e030c9887968b098c36a/docs/logo.svg\" alt=\"Intern Visual logo\" height=\"128\"\u003e\u003c/p\u003e\u003cbr\u003e\n\u003c!-- end-github-only --\u003e\n\n\u003c!-- start-github-only --\u003e\n[![Build Status](https://travis-ci.org/theintern/visual-plugin.svg?branch=master)](https://travis-ci.org/theintern/visual-plugin)\u003c!-- end-github-only --\u003e\n[![Intern](http://theintern.github.io/images/intern-v4.svg)](https://github.com/theintern/intern/)\n\u003c!-- prettier-ignore-end --\u003e\n\nThis project adds support for visual regression testing to\n[Intern](https://theintern.io).\n\n\u003c!-- vim-markdown-toc GFM --\u003e\n\n* [Overview](#overview)\n* [Installation](#installation)\n* [Quick start](#quick-start)\n* [API and architecture](#api-and-architecture)\n\t* [visualTest](#visualtest)\n\t* [assertVisuals](#assertvisuals)\n\t* [helpers](#helpers)\n\t* [Reporting results](#reporting-results)\n* [Contributing](#contributing)\n\n\u003c!-- vim-markdown-toc --\u003e\n\n## Overview\n\nA visual regression test compares a screenshot of a web page with a previously\ngenerated baseline providing the ability to make automated comparisons against a\nknown-good version to ensure nothing has changed.\n\nThese tests can help engineers\n\n*   ensure a page is rendered identically on various browsers\n*   identify when a css change has an undesired effect elsewhere\n*   put a quick set of visual tests around legacy code to identify regressions\n\nThis plugin takes image snapshots of pages when they’re known to be rendering\nproperly, and then compares those images to how the page looks at later points\nto detect visual regressions.\n\nFor example, here's a simple login page:\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://cdn.rawgit.com/theintern/visual-plugin/master/docs/good.png\" alt=\"Good login sample\" width=\"245\"\u003e\u003c/p\u003e\u003cbr\u003e\n\nAssume you’ve created a visual test called “login page” for this page. The first\ntime the test is run it will save a snapshot image (a _baseline_) of the page.\n\nAt some point, someone may change a style that has a side effect of making `h1`\ntags use a serif font. Now the login page looks like this:\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://cdn.rawgit.com/theintern/visual-plugin/master/docs/bad.png\" alt=\"Bad login sample\" width=\"245\"\u003e\u003c/p\u003e\u003cbr\u003e\n\nNormal unit tests aren‘t going to see anything wrong here, because the content\nis the same. However, the next time the visual test is run for that page it will\nfail because the page no longer looks the same. A report will be generated that\nhighlights the changes:\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://cdn.rawgit.com/theintern/visual-plugin/master/docs/report.png\" alt=\"Visual assertion report\"\u003e\u003c/p\u003e\u003cbr\u003e\n\n## Installation\n\nThis package should be installed as a peer of Intern\n\n```\n$ npm install intern @theintern/visual-plugin --save-dev\n```\n\n## Quick start\n\nOk! You want to see all the great things visual regression testing can do and\nhow to do it! See some real test code by looking in the\n[tests/example](./tests/example) directory.\n\nTo run the example tests:\n\n1.  Clone this project\n1.  Install package dependencies\n    ```\n    npm install\n    ```\n1.  Run the tests\n    ```\n    npm test config=@example\n    ```\n\nIf you want to see what an error looks like, modify the HTML file used by the\ntests, in `_tests/tests/support/pages/basic.html`. For example, change the\nparagraph text, or change the background color from pink to green. Then re-run\nthe test. It will fail, and a report will be generated in `visual-tests/report`.\n\n## API and architecture\n\nThis plugin has three main exports:\n\n*   `visualTest` is a function that will create a complete visual regression\n    test based on an options obect\n*   `assertVisuals` is a function that can be used to make visual assertions in\n    tests\n*   `helpers` is an object of functional test helper functions\n\n### visualTest\n\n[visualTest](https://theintern.io/docs.html#visual-plugin/1/api/test/visualtest)\nis a function that creates a complete visual regression test from a set of\n[options](https://theintern.io/docs.html#visual-plugin/1/api/test/options).\n\n```ts\nimport { visualTest }  from '@theintern/visual-plugin';\n\nregisterSuite('mySuite', {\n    test: visualTest({\n        url: 'https://sitepen.com',\n        width: 1024,\n        height: 768,\n        missingBaseline: 'snapshot',\n    });\n});\n```\n\n### assertVisuals\n\n[assertVisuals](https://theintern.io/docs.html#visual-plugin/1/api/assert/assertvisuals)\nis a Leadfoot helper function that can be used to provide visual assertion\nfunctionality within an existing Intern test. It provides the assertion\nfunctionality of `visualTest` but without the surrounding logic.\n\n```ts\nimport { assertVisuals } from '@theintern/visual-plugin';\n\nregisterSuite('mySuite', {\n    test() {\n        return this.remote()\n            .get('https://sitepen.com')\n            .setWindowSize(1024, 768)\n            .takeScreenshot()\n            .then(\n                assertVisuals(this, {\n                    missingBaseline: 'snapshot'\n                })\n            );\n    }\n});\n```\n\nSee the API docs for the full set of\n[options](https://theintern.io/docs.html#visual-plugin/1/api/assert/options-1).\n\n### helpers\n\nThe `helpers` export currently contains one function,\n[resizeWindow](https://theintern.io/docs.html#visual-plugin/1/api/helpers%2FresizeWindow/resizeWindow).\nThis is a convenience function that will resize a browser window and wait for\nthe resize operation to complete.\n\n### Reporting results\n\nBy default this plugin will generate an HTML report of visual regression test\nresults in the plugin’s output directory. The reporter supports a couple of\noptions:\n\n*   `reportLocation`: A directory under the base output directory to write the\n    report, defaults to \"report\"\n*   `errorColor`: The color to use when highlighting image differences, defaults\n    to \"#F00\"\n\n```json\n\"plugins\": {\n    \"script\": \"@theintern/visual-plugin\",\n    \"options\": {\n        \"missingBaseline\": \"snapshot\",\n        \"directory\": \"visual\",\n        \"reportLocation\": \"htmlreport\",\n        \"errorColor\": \"#FF7200\"\n    }\n}\n```\n\nThe reporter can be disabled by setting the `report` configuration option to\n`false`.\n\n```json\n\"plugins\": {\n    \"script\": \"@theintern/visual-plugin\",\n    \"options\": {\n        \"missingBaseline\": \"snapshot\",\n        \"directory\": \"visual\",\n        \"report\": false\n    }\n}\n```\n\n## Contributing\n\nWe would love to hear your feedback and welcome PRs. Please take a look at\n[Intern’s Contribution Guidelines](https://github.com/theintern/intern/blob/master/CONTRIBUTING.md)\nfor some info and tips. Thanks!\n\n\u003c!-- doc-viewer-config\n{\n    \"api\": \"docs/api.json\"\n}\n--\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheintern%2Fvisual-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheintern%2Fvisual-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheintern%2Fvisual-plugin/lists"}