{"id":18526638,"url":"https://github.com/joschavz/web-differences","last_synced_at":"2026-04-27T11:31:40.224Z","repository":{"id":184844195,"uuid":"536274614","full_name":"JosChavz/web-differences","owner":"JosChavz","description":"A tool to find the difference between both sides. Preferably your dev and prod site!","archived":false,"fork":false,"pushed_at":"2024-07-01T15:37:24.000Z","size":144,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-14T20:16:10.737Z","etag":null,"topics":["selenium","testing-tools","wordpress-tests"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/JosChavz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2022-09-13T19:13:04.000Z","updated_at":"2024-06-04T15:42:18.000Z","dependencies_parsed_at":"2024-06-04T17:30:53.088Z","dependency_job_id":"0dd31984-fa47-4f7b-b640-d4166ed66471","html_url":"https://github.com/JosChavz/web-differences","commit_stats":null,"previous_names":["joschavz/web-differences"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/JosChavz/web-differences","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosChavz%2Fweb-differences","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosChavz%2Fweb-differences/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosChavz%2Fweb-differences/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosChavz%2Fweb-differences/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JosChavz","download_url":"https://codeload.github.com/JosChavz/web-differences/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosChavz%2Fweb-differences/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32335295,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T23:26:28.701Z","status":"online","status_checked_at":"2026-04-27T02:00:06.769Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["selenium","testing-tools","wordpress-tests"],"created_at":"2024-11-06T17:51:57.438Z","updated_at":"2026-04-27T11:31:40.209Z","avatar_url":"https://github.com/JosChavz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Differences\r\n\r\nMainly used for WordPress sites to test after a plugin update. Currently working by having a dev/staging site and production site. The program will take screenshots of the pages and compare them to see if there are any differences. If there are differences, the program will output the differences in the \"diff\" folder.\r\n\r\n## Installation\r\n\r\nMake sure to have Docker installed and running\r\n\r\n```bash\r\nnpm install\r\n```\r\n\r\n### Requirements\r\n- Node.js : v20\r\n\r\n\r\n## Getting Started\r\n\r\nAfter installing all the required packages,\r\nplease copy the \"config.yml.temp\" file to \"config.yml\" in the same directory. \r\nSet the origin and destination of the pages.\r\nEnsure to have the HTTP protocol in the URL, plus the subdomain, IF USED, and domain.\r\n*(e.g. http://subdomain.domain.com)*\r\n\r\nPlease copy the \".env.temp\" file to \".env\" in the same directory.\r\nGiven that multithreading is supported, please set the number of threads you would like to use in halves.\r\n\r\nThe reason behind it is due to [Selenium Grid](https://github.com/SeleniumHQ/docker-selenium?tab=readme-ov-file#increasing-session-concurrency-per-container) configuration for concurrency. \r\nSadly, one webdriver will use one CPU core, so it is best to use half of the CPU cores available.\r\n\r\n\r\n## Usage\r\n\r\nAfter installing all the required packages, run the following command:\r\n\r\n```bash\r\nmake all\r\n```\r\n\r\nThis will create the necessary Docker containers and network that will be used for the Node.js program.\r\n\r\nAfter that,\r\n```bash\r\nnpm run build\r\nnpm run start\r\n```\r\n\r\nGiven that the `config.yaml` file is set up correctly, the program will start running.\r\n\r\n## Visual Testing\r\nVisual Testing is a program that iterates through the pages of the ORIGIN websites. \r\nThe program will take screenshots of the pages and compare them to see if there are any differences. \r\nIf there are differences, the program will output the differences in the \"diff\" folder, \r\nand log the differences in the \"logs\" folder.\r\n\r\n### How it Works\r\nThe program uses the \"pixelmatch\" library to compare the screenshots. The program will output the differences in the \r\n\"diff\" folder. During runtime, the program compares both images from the same URL and checks to see if there are any\r\ndifferences. The program will output all images in a designated \"origin\" and \"dest\" folder temporarily. If there are any differences, the program will output the differences in the \"diff\" folder.\r\n\r\nPlease note that small changes such as animations may cause a false-positive.\r\n\r\nWhere each new cookie will be joined by a \"-\"  \u003cbr\u003e\r\n*As for now, only name and value are accepted. Please use quotation marks at all times. Failure to do so will result in a program **crash**!*\r\n- Lastly, in the \"config.yml\" file, change the \"origin\" and \"destination\". Please include full URL links.\r\n- Any single paths or parent paths (will not include the parent page itself) to be ignored, please add it to the \"config.yml\" \r\nfile as, in respect, `blacklistSinglePaths` or `blacklistChildrenPaths`.\r\n\r\n***Please follow the syntax of config.yml and .env***\r\n\r\n## Logging\r\n\r\nThere will be a log to ensure that the program is running correctly. The log will be in the \"logs\" folder. The log will also be printed out on the console.\r\n\r\n## Architecture\r\n\r\nThere are three essential files:\r\n- Auditor.ts\r\n- Navigator.ts\r\n- Photographer.ts\r\n- Crawler.ts\r\n\r\nThese files will be run in the `main.ts` file. The main file is only responsible for\r\nparsing the YAML configuration file and running the Navigator class.\r\n\r\n### Crawler.ts\r\nAs the name implies, the Crawler will crawl through the pages of the website. \r\nIt will be using the *\"selenium-webdriver\"* library to crawl through. \r\nThe Crawler will be responsible for finding all the URLs of the website to then pass it into the\r\nNavigator class.\r\nHowever, before passing it to the Navigator class,\r\nall links that were crawled will be saved into a JSON file inside of `cache`.\r\n\r\n### Auditor.ts\r\n\r\nThe Auditor class is responsible for comparing the screenshots of the origin and destination. It will be reporting the differences, whether they pass or fail. The Auditor class will be using the *\"pixelmatch\"* library to compare the images.\r\n\r\n[TODO: An elaborate page where the Auditor reports the differences]\r\n\r\n### Navigator.ts\r\n\r\nThe Navigator class is responsible for navigating through the pages of both ORIGIN and DESTINATION, \r\nit is truly the main file among these other files. \r\nIt will be using the *\"selenium-webdriver\"* library to navigate through the pages.\r\n\r\n**Note**: The Navigator class will use ORIGIN as the main source to navigate through the website. This means, if there are any pages that are not in the ORIGIN website, the program will not be able to navigate to that page.\r\n\r\nAfter navigating to another page, it will call the Photographer class to take a screenshot of the page. Then, it will call the Auditor class to compare the screenshots.\r\n\r\n### Photographer.ts\r\n\r\nThe Photographer class is responsible for taking the screenshots of the pages. It will be using the *\"selenium-webdriver\"* library to take the screenshots.\r\n\r\n[FUTURE: The Photographer class will be able to take full screenshots of the page in different resolutions. This is to ensure that all devices are covered.]\r\n\r\n## Future Implementations\r\n\r\n- [x] Implement a caching system to reduce the time of the program\r\n- [x] Implement multi-threading to increase the speed of the program\r\n- [ ] Implement a full screenshot of the page for different dimensions\r\n- [ ] Implement a visual report of the differences\r\n- [x] Leverage off Docker to run the program with the respected Chrome version\r\n- [x] Create different Docker containers for other browsers\r\n- [ ] Only have one instance that runs the WebDriver, instead of 2\r\n\r\n## Issues\r\n\r\nIf there are any issues, please create an issue in the repository.\r\n\r\nHere are some that I have seen:\r\n\r\n- The program will not work if the ORIGIN website has a different structure.\r\n\r\n  For example, if the ORIGIN is `http://subdomain.domain.com` but the actual website is `http://domain.com`, \r\nthe program will not work.\r\n\r\n- If trying to compare a gallery page, the program will not work.\r\n\r\n  Mostly due to having so many pages to load.\r\n\r\n- There are times when minor differences will cause a false-positive.\r\n\r\n  For example, if there is an animation on the page, the program will detect it as a difference. \r\nEven Google Maps will cause a false-positive.\r\n\r\n## FAQs\r\n\r\n#### Can I use this on Mac?\r\n\r\nUnfortunately, this program is only available for Linux and Windows due to restrictions by Selenium Grid.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoschavz%2Fweb-differences","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoschavz%2Fweb-differences","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoschavz%2Fweb-differences/lists"}