{"id":16653560,"url":"https://github.com/norm/webkit2png-driver","last_synced_at":"2025-12-25T14:41:15.147Z","repository":{"id":1843051,"uuid":"2767619","full_name":"norm/webkit2png-driver","owner":"norm","description":null,"archived":false,"fork":false,"pushed_at":"2011-12-09T10:21:43.000Z","size":144,"stargazers_count":7,"open_issues_count":2,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-19T10:32:38.433Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"Siyfion/angular-typeahead","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/norm.png","metadata":{"files":{"readme":"README.markdown","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}},"created_at":"2011-11-13T18:26:15.000Z","updated_at":"2021-09-25T13:43:14.000Z","dependencies_parsed_at":"2022-09-10T19:51:01.305Z","dependency_job_id":null,"html_url":"https://github.com/norm/webkit2png-driver","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/norm%2Fwebkit2png-driver","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/norm%2Fwebkit2png-driver/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/norm%2Fwebkit2png-driver/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/norm%2Fwebkit2png-driver/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/norm","download_url":"https://codeload.github.com/norm/webkit2png-driver/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243266673,"owners_count":20263781,"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-10-12T09:45:52.024Z","updated_at":"2025-12-25T14:41:15.114Z","avatar_url":"https://github.com/norm.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"webkit2png-driver\n=================\nWrapper around `webkit2png` for taking and archiving screengrabs of websites,\nwith some support for interaction such logging in/out and filling out forms.\n\nThis can be used as a manual pre-flight checklist before a website deploy, a\npermanent archive of the evolution of a site's appearance, a regression tester\n(when combined with some sort of image analysis tool), or just for teh shiny.\n\nInstalling\n----------\n1. If you are not using OS X ... er ... good luck with that.\n1. Install my fork of [webkit2png][webkit2png] in your PATH:\n   * `sudo cp webkit2png /usr/bin`\n   * `sudo chmod 755 /usr/bin/webkit2png`\n1. Install `cpanm` (makes installing perl modules easy):\n   * *homebrew*: `brew install cpanminus`\n   * *not homebrew*: `curl -L http://cpanmin.us | sudo perl - --self-upgrade`\n1. Install required perl modules:\n   * `sudo cpanm Config::Std IO::All http://bumph.cackhanded.net/Template-Jigsaw-v0.1.tar.gz`\n1. Put this script in your PATH:\n   * `sudo cp webkit2png-driver /usr/bin`\n   * `sudo chmod 755 /usr/bin/webkit2png-driver`\n\nUsing\n-----\nMake a directory to keep your configuration and resulting screengrabs in.\nThe rest of the instructions assume that this is your current working \ndirectory (ie. `cd` into it before going any further).\n\nYou will need at least one INI file to describe the screengrabs you want\ntaken. A couple of examples are included in this repository that you might\nlike to copy to your directory and then modify. Although they can be named\nanything, the default is `grabs.ini`.\n\n    # copy a sample INI file\n    % cp .../webkit2png-driver/sample-twitter.ini grabs.ini\n\n\n### Take the screengrabs\n\nThe default mode of `webkit2png-driver` is to take all of the screengrabs\nspecified in your `grabs.ini` file.\n\n    # take all screengrabs\n    % webkit2png-driver\n    \n    # use a different config file\n    % webkit2png-driver -c other.ini\n    \n    # take only those screengrabs that match the argument(s);\n    # arguments can be full or partial names, and support\n    # wildcards (as it is really an unbound regexp match)\n    \n    # matches section 'compose-tweet'\n    % webkit2png-driver compose\n    \n    # matches sections 'homepage/logged-out' and 'homepage/logged-out-nojs'\n    # in the provided example twitter-sample.ini\n    % webkit2png-driver homepage/logged-out\n    % webkit2png-driver home.*out\n    \n    # matches five sections\n    % webkit2png-driver no-js\n\n### Generate HTML indexes\n\nIf you want to more easily explore the screengrabs you have taken (especially\nuseful if you are archiving them), you can generate HTML indexes.\n\nFirst, you will need to copy the sample HTML templates from this repository \nto your screengrabs directory. You can customise them later (if you can\nstand to look at the embedded perl code).\n\n    % cp -R .../webkit2png-driver/sample_templates ./_templates\n    \nTo regenerate the indexes:\n\n    % webkit2png-driver -i\n\nTo temporarily explore the screengrabs using the HTML indexes without\ntransferring them to a web server first:\n\n    # indexes browseable at \u003chttp://localhost:8000/\u003e\n    % python -m SimpleHTTServer\n    \n### Permanently archive screengrabs\n\nIf you want to keep more permanent copies of the screengrabs (eg. to be able\nto demonstrate later how the site has evolved over time), issue an archive\ncommand after you have taken the screengrabs.\n\n    % webkit2png-driver -a [name of this archive]\n\nEach archived copy needs a name (some examples include `alpha-release`,\n`pre-awesome`, `deploy-20111122`, `tag-revolver-ocelot`). Archiving copies\nthe 'latest' screengrabs to files matching the name, and then regenerates\nthe HTML indexes.\n\nUsing the same name again will overwrite previous archived copies without\nany issued warnings.\n\n\nINI options\n-----------\nThe configuration file is in the \"INI\" format. Options are on a line with \nthe key and value separated by an equals sign (=). Sections (which are the\nindividual URLs to be screengrabbed) are named in square brackets ([]).\nComments are lines that start with a hash (#).\n\nThe file should start with any default options.\n\nAlso see `sample-twitter.ini` for an example.\n\n### Default options\n\n* **base**: base URL, eg. `http://twitter.com`\n* **title**: title to put into generated HTML indexes\n  (default: same as **base**)\n* **width**: width of full size screengrabs in pixels\n  (default: 1024)\n* **delay**: delay after page load before taking screengrabs in seconds\n* **loggedout**: enforce starting screengrabs in a logged out state\n  (see \"Using logins/forms\")\n* **make_clipped**: generate the clipped screengrabs \n  (default: 1; 0 to suppress these files)\n* **make_fullsize**: generate the full size screengrabs\n  (default: 1; 0 to suppress these files)\n* **make_thumb**: generate the thumbnail screengrabs\n  (default: 1; 0 to suppress these files)\n* **clipheight**: height of clipped screengrabs in pixels\n  (default: 300)\n* **clipwidth**: width of clipped screengrabs in pixels\n  (default: 250)\n\n### Screengrab options\n\nIndividual grabs can override any of the default options as well as using \nthese options:\n\n* **url**: the URL to grab; **base** is prepended unless it is an absolute URL\n* **login**: should be logged in as this account before taking the screengrab\n  (see \"Using logins/forms\")\n* **nojs**: take screengrab with JavaScript support turned off\n* **js**: JavaScript to execute before taking the screengrab\n* **timeout**: execute the JavaScript specified in **js** after \n  this many milliseconds (wraps it in a setTimeout call)\n* **chain_after**: section name of another screengrab that this one should\n  be performed immediately after (most useful for chaining the after-effects\n  of form submissions)\n* **click**: jQuery selector specifying element(s) to be \"clicked\" before\n  taking the screengrab\n* **fill_name**: jQuery selector specifying the input element(s) to fill out\n  with a random name (John [12 random letters] Doe)\n* **fill_email**: jQuery selector specifying the input element(s) to fill out \n  with a random email ([12 random letters]@mailinator.com)\n* **fill_pass**: jQuery selector specifying the input element(s) to fill out \n  with a random password ([12 random letters])\n* **submit**: jQuery selector specifying the element to \"click\" after\n  filling out the form to submit it\n\nUsing logins/forms\n------------------\n`webkit2png-driver` has some limited support for taking screen grabs with\ndifferent logins, and filling out forms. **Note: these all expect jQuery to be\nloaded in the webpage**.\n\n### Logging in\n\nCreate a user with a section called `user#[username]`, and provide the \nfollowing options:\n\n* **username**: the ID/username/email of the login\n* **password**: the password of the login\n\nCreate a section called `form#login`, and provide the following options:\n\n* **url**\n* **username**: jQuery selector specifying the input element to fill out\n  with the user ID/username/email\n* **password**: jQuery selector specifying the input element to fill out\n  with the user password\n* **checkbox**: jQuery selector specifying the input element(s) to click\n  before submitting the login form (eg. \"Agree to T\u0026Cs\" or \"Remember me\")\n* **submit**: jQuery selector specifying the element to \"click\" to after\n  filling out the username and password.\n\nCreate a section called `form#logout`, and provide the following options:\n\n* **url**\n* **submit**: jQuery selector specifying the element to \"click\" to log the\n  user out\n\nThen any screengrab can have the option **login** set to `[username]`\nthat matches a `user#[username]` section to be logged in as that user before\ntaking the screengrab.\n\nNo error detection is performed on the submission of logins/logouts/forms,\nso if they fail for some reason the screengrabs will not be in the correct \nstate.\n\n\n[webkit2png]: https://github.com/norm/webkit2png\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnorm%2Fwebkit2png-driver","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnorm%2Fwebkit2png-driver","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnorm%2Fwebkit2png-driver/lists"}