{"id":13583060,"url":"https://github.com/Crunch-io/nightwatch-vrt","last_synced_at":"2025-04-06T18:31:50.096Z","repository":{"id":65411350,"uuid":"99243759","full_name":"Crunch-io/nightwatch-vrt","owner":"Crunch-io","description":"Visual Regression Testing tools for nightwatch.js ","archived":false,"fork":false,"pushed_at":"2023-01-25T15:48:41.000Z","size":105,"stargazers_count":64,"open_issues_count":17,"forks_count":20,"subscribers_count":36,"default_branch":"master","last_synced_at":"2024-04-24T05:58:39.098Z","etag":null,"topics":["css-testing","e2e-tests","javascript","nightwatch","nightwatch-vrt","nightwatchjs","screenshot","selenium","selenium-webdriver","visual-regression","visual-regression-testing"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Crunch-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-03T14:49:52.000Z","updated_at":"2024-02-03T21:44:56.000Z","dependencies_parsed_at":"2023-02-14T09:02:06.352Z","dependency_job_id":null,"html_url":"https://github.com/Crunch-io/nightwatch-vrt","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Crunch-io%2Fnightwatch-vrt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Crunch-io%2Fnightwatch-vrt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Crunch-io%2Fnightwatch-vrt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Crunch-io%2Fnightwatch-vrt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Crunch-io","download_url":"https://codeload.github.com/Crunch-io/nightwatch-vrt/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247531033,"owners_count":20953884,"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":["css-testing","e2e-tests","javascript","nightwatch","nightwatch-vrt","nightwatchjs","screenshot","selenium","selenium-webdriver","visual-regression","visual-regression-testing"],"created_at":"2024-08-01T15:03:14.029Z","updated_at":"2025-04-06T18:31:49.655Z","avatar_url":"https://github.com/Crunch-io.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/Crunch-io/nightwatch-vrt.svg?branch=master)](https://travis-ci.org/Crunch-io/nightwatch-vrt)\n[![NPM Version](http://img.shields.io/npm/v/nightwatch-vrt.svg?maxAge=86400)](https://www.npmjs.org/package/nightwatch-vrt)\n\n# Nightwatch VRT\n\nNightwatch Visual Regression Testing tools for `nightwatch.js`\n\n## Description\n\nNightwatch VRT extends [nightwatch.js](http://nightwatchjs.org/) with an assertion that captures a screenshot of a DOM element identified by a selector and compares the screenshot against a baseline screenshot. If the baseline screenshot does not exist, it will be created the first time you run the test and the assertion will pass.\n\n## Configuration\n\nInclude the following sections in the `nightwatch` [configuration file](http://nightwatchjs.org/gettingstarted#settings-file)\n\n#### Custom commands and assertions\n\nRegister `nightwatch-vrt`'s assertion and commands:\n\n```JavaScript\n    custom_commands_path: [\n        'node_modules/nightwatch-vrt/commands'\n    ],\n    custom_assertions_path: [\n        'node_modules/nightwatch-vrt/assertions'\n    ]\n```\n\n#### Nightwatch VRT custom settings\n\nThen, for global settings, add the `visual_regression_settings` entry to nightwatch's `globals` [`globals`](http://nightwatchjs.org/gettingstarted#test-settings) section\n\n```JSON\ndefault: {\n    \"globals\": {\n        \"visual_regression_settings\": {\n            \"generate_screenshot_path\": defaultScreenshotPathGenerator,\n            \"latest_screenshots_path\": \"vrt/latest\",\n            \"latest_suffix\": \"\",\n            \"baseline_screenshots_path\": \"vrt/baseline\",\n            \"baseline_suffix\": \"\",\n            \"diff_screenshots_path\": \"vrt/diff\",\n            \"diff_suffix\": \"\",\n            \"threshold\": 0,\n            \"prompt\": false,\n            \"always_save_diff_screenshot\": false\n        }\n    }\n}\n```\n\n| Property                    | Description                                                                                                      | Defaults       |\n|-----------------------------|------------------------------------------------------------------------------------------------------------------| -------------- |\n| generate_screenshot_path    | Passed function that will generate a screenshot path                                                             | none           |\n| latest_screenshots_path     | Path to the most recently captured screenshots                                                                   | \"vrt/latest\"   |\n| latest_suffix               | A string appended to the end of the latest captured screenshot*                                                  | \"\"             |\n| baseline_screenshots_path   | Path to the baseline expected screenshots                                                                        | \"vrt/baseline\" |\n| baseline_suffix             | A string appended to the end of the baseline screenshot*                                                         | \"\"             |\n| diff_screenshots_path       | Path to the diff image of the two screenshots                                                                    | \"vrt/diff\"     |\n| diff_suffix                 | A string appended to the end of the diff image*                                                                  | \"\"             |\n| threshold                   | Matching threshold, ranges from `0` to `1`. Smaller values make the comparison more sensitive.                   | 0.0            |\n| prompt                      | If true, the user will be prompted to override baseline screenshot when the recently captured screenshot differs | false          |\n| always_save_diff_screenshot | If true, recently captured screenshots will always override the baseline                                         | false          |\n\\* *Only necessary if screenshots are set to reside in the same directory*\n\n#### Nightwatch VRT screenshot path generator\n\nThe screenshot path generator option accepts a function that generates a dynamic path based on the test properties, and returns that string.\n\n| Parameter        | Description                                                                                    |\n|------------------|------------------------------------------------------------------------------------------------|\n| nightwatchClient | The nightwatch client test instance                                                            |\n| basePath         | The base path for the screenshot set in `visual_regression_settings` (e.g. *_screenshots_path) |\n| fileName         | The file name; either the selector used or the custom name given for the test                  |\n|  ***returns***   | A string which contains the full path - minus the file extension                               |\n\nFor example:\n\n```JavaScript\nfunction generateScreenshotFilePath(nightwatchClient, basePath, fileName) {\n    const moduleName = nightwatchClient.currentTest.module,\n        testName = nightwatchClient.currentTest.name\n\n    return path.join(process.cwd(), basePath, moduleName, testName, fileName)\n}\n```\n\n## Usage\n\nIn order to use `nightwatch-vrt`, you only need to invoke the `screenshotIdenticalToBaseline` assertion and pass a css selector for the DOM element to compare. You may also pass a custom filename, `visual_regression_settings` overrides, and a custom log message.\n\n| Parameter        | Description                                                                                    |\n|------------------|------------------------------------------------------------------------------------------------|\n| selector         | Identifies the element that will be captured in the screenshot.                                |\n| fileName         | Optional file name for this screenshot; defaults to the selector                               |\n| settings         | Optional settings to override the defaults and `visual_regression_settings`                    |\n| message          | Optional message for `nightwatch` to log upon completion                                       |\n\n\n```JavaScript\nmodule.exports = {\n    'Test crunch.io main content is correct': (browser) =\u003e {\n        browser\n            .url('https://crunch.io')\n            .assert.screenshotIdenticalToBaseline('.body.entry-content',  /* Optional */ 'custom-name', {threshold: 0.5}, 'VRT custom-name complete.')\n            .end()\n    }\n}\n```\n\nThe first time a test is run, a baseline screenshot will be created and stored on disk. You should always register the baseline screenshot in the code repository. Further executions of this test will compare against this baseline.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCrunch-io%2Fnightwatch-vrt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCrunch-io%2Fnightwatch-vrt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCrunch-io%2Fnightwatch-vrt/lists"}