{"id":15043957,"url":"https://github.com/webbestmaster/selenium-screen-master","last_synced_at":"2026-02-12T11:13:21.200Z","repository":{"id":65493831,"uuid":"80990974","full_name":"webbestmaster/selenium-screen-master","owner":"webbestmaster","description":"Selenium Screen Master","archived":false,"fork":false,"pushed_at":"2017-03-16T13:28:50.000Z","size":26579,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-24T20:14:36.564Z","etag":null,"topics":["screenshot","selenium"],"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/webbestmaster.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}},"created_at":"2017-02-05T12:21:47.000Z","updated_at":"2018-01-29T18:56:26.000Z","dependencies_parsed_at":"2023-01-26T03:01:05.625Z","dependency_job_id":null,"html_url":"https://github.com/webbestmaster/selenium-screen-master","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/webbestmaster%2Fselenium-screen-master","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webbestmaster%2Fselenium-screen-master/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webbestmaster%2Fselenium-screen-master/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webbestmaster%2Fselenium-screen-master/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webbestmaster","download_url":"https://codeload.github.com/webbestmaster/selenium-screen-master/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247458798,"owners_count":20942088,"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":["screenshot","selenium"],"created_at":"2024-09-24T20:49:52.494Z","updated_at":"2026-02-12T11:13:21.145Z","avatar_url":"https://github.com/webbestmaster.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Selenium Screen Master\n\n## Install\n\n### Dependencies\n\nThis needed only for nodeJs canvas, see more here - https://www.npmjs.com/package/canvas\n\n\u003e Ubuntu: sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++\n\n\u003e OS X: brew install pkg-config cairo libpng jpeg giflib\n\n### How to use\n\n#### Take screenshot of element\n\n```javascript\nconst Ssm = require('selenium-screen-master');\n\nconst SERVER_URL = 'http://statlex.github.io/';\nconst WEB_DRIVER_SERVER_URL = 'http://localhost:4444/wd/hub';\n\nconst WebDriver = require('selenium-webdriver');\nconst byCss = WebDriver.By.css;\nconst driver = new WebDriver\n    .Builder()\n    .usingServer(WEB_DRIVER_SERVER_URL)\n    .withCapabilities({'browserName': 'chrome'})\n    .build();\n\ndriver.get(SERVER_URL);\n\nconst ssm = new Ssm();\n\nssm.setPathToReferenceFolder('./ssm-ref-folder');\nssm.setDriver(driver);\nssm.setSize(1024, 768);\n\nssm\n    .takeScreenshotOfSelector('#ancient-empire-strike-back')\n    .then(image =\u003e {\n        // image base64\n        console.log(image);\n    });\n\n// OR\n\nssm\n    .takeScreenshotOfElement(driver.findElement(byCss('#ancient-empire-strike-back')))\n    .then(image =\u003e console.log(image));\n\n// OR\n\nssm\n    .takeScreenshotOfArea(80, 200, 500, 300)\n    .then(image =\u003e console.log(image));\n\n\ndriver.quit();\n```\n\n#### Save screenshot of element\n\n```javascript\nconst Ssm = require('selenium-screen-master');\n\nconst SERVER_URL = 'http://statlex.github.io/';\nconst WEB_DRIVER_SERVER_URL = 'http://localhost:4444/wd/hub';\n\nconst WebDriver = require('selenium-webdriver');\nconst byCss = WebDriver.By.css;\nconst driver = new WebDriver\n    .Builder()\n    .usingServer(WEB_DRIVER_SERVER_URL)\n    .withCapabilities({'browserName': 'chrome'})\n    .build();\n\ndriver.get(SERVER_URL);\n\nconst ssm = new Ssm();\n\nssm.setPathToReferenceFolder('./ssm-ref-folder');\nssm.setDriver(driver);\nssm.setSize(1024, 768);\n\nssm.setPathToReferenceFolder('./screenshot');\n\nssm\n    .saveScreenshotOfSelector('#ancient-empire-strike-back', 'saved-screenshot-1.png')\n    .then(image =\u003e {\n        // image base64\n        console.log(image);\n    });\n\n// OR\n\nssm\n    .saveScreenshotOfElement(driver.findElement(byCss('#ancient-empire-strike-back')), 'saved-screenshot-2.png')\n    .then(image =\u003e console.log(image));\n\n// OR\n\nssm\n    .saveScreenshotOfArea(80, 200, 500, 300, 'saved-screenshot-3.png')\n    .then(image =\u003e console.log(image));\n\n\ndriver.quit();\n```\n\n#### Compare images\n\n```javascript\nconst Ssm = require('selenium-screen-master');\n\nconst SERVER_URL = 'http://statlex.github.io/';\nconst WEB_DRIVER_SERVER_URL = 'http://localhost:4444/wd/hub';\n\nconst WebDriver = require('selenium-webdriver');\nconst byCss = WebDriver.By.css;\nconst driver = new WebDriver\n    .Builder()\n    .usingServer(WEB_DRIVER_SERVER_URL)\n    .withCapabilities({'browserName': 'chrome'})\n    .build();\n\ndriver.get(SERVER_URL);\n\nconst ssm = new Ssm();\n\nssm.setPathToReferenceFolder('./ssm-ref-folder');\nssm.setDriver(driver);\n// WARNING\n// to COLLECT screenshots use MODE = MODE.COLLECT\n// to TEST    screenshots use MODE = MODE.TEST\nconst MODE = ssm.MODE;\nssm.setMode(MODE[process.env.MODE] || MODE.TEST);\n\nssm.setSize(1024, 768);\n\nssm\n    .compareOfSelector('#ancient-empire-strike-back', 'game.png')\n    .then(comparing =\u003e {\n\n        // comparing.actual - actual image (base64)\n\n        // comparing.expect - expect image (base64)\n\n        // comparing.different - different of images (base64)\n\n        // comparing.info - comparing info (hasMap)\n\n        console.log(comparing.info);\n\n    });\n\n// OR\n\nssm\n    .compareOfElement(driver.findElement(byCss('#ancient-empire-strike-back')), 'game.png')\n    .then(comparing =\u003e console.log(comparing.info));\n\n// OR\n\nssm\n    .compareOfArea(80, 200, 500, 300, 'game.png')\n    .then(comparing =\u003e console.log(comparing.info));\n\ndriver.quit();\n```\n\n#### Helpers\n\n```javascript\n// set screen size\nssm.setSize(1024, 768);\n\n// reset properties\nssm.reset();\n```\n\n#### Test\n\n1 - Install all dependencies for selenium-screen-master\u003cbr /\u003e\n2 - Install mocha globally\n\n\u003e$ npm i \u0026\u0026 sudo npm i -g mocha\n\nRun test\n\n\u003e$ npm test\n\n#### Recommendations\n\nUse for test mocha + mochawesome + mochawesome/addContext + chai.\u003cbr /\u003e\nSee ./test/test.js and ./test/test.sh as example to create beautiful test report.\u003cbr /\u003e\nTo see my solution run tests for this projects.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebbestmaster%2Fselenium-screen-master","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebbestmaster%2Fselenium-screen-master","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebbestmaster%2Fselenium-screen-master/lists"}