[{"_1":2,"_175":-5,"_176":-5},"loaderData",{"_3":4,"_13":14,"_21":22,"_154":155},"root",{"_5":-5,"_6":-7,"_7":8,"_9":-7,"_10":11,"_12":-7},"currentUser","primaryEmail","siteVerification","6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI","toast","enableDev",false,"incidentStatus","routes/_layout",{"_15":-5,"_16":17,"_18":17,"_19":11,"_20":11},"username","isAskGordonEnabled",true,"isUsingNewTemplate","showMinimalLanding","showHoneypotTrap","routes/_layout.r.$namespace.$reponame",{"_23":24,"_25":-5,"_26":11,"_27":11,"_28":29,"_30":31,"_32":-5,"_33":11,"_34":35,"_84":85,"_107":108,"_145":-5,"_146":11,"_147":17,"_148":11,"_149":-5,"_150":11,"_151":-5,"_152":153},"canonicalUrl","https://hub.docker.com/r/civicactions/webdrivercss/tags","mcpServer","canSeeDockerfile","canSeeAutobuilds","namespace","civicactions","reponame","webdrivercss","cloudBuildSource","isAutobuildsAvailable","repo",{"_36":37,"_38":39,"_41":42,"_43":44,"_45":11,"_46":47,"_48":49,"_50":51,"_53":31,"_28":29,"_54":55,"_56":-5,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":58,"_65":66,"_67":11,"_68":29,"_69":70,"_75":17,"_76":77,"_81":29,"_82":83},"categories",[],"content_types",[40],"image","date_registered","2016-03-11T01:59:25.768291Z","description","WebdriverCSS - needs to access a Selenium server, as well as WebdriverCSS Admin API (if using).","is_private","last_updated","2016-03-11T23:47:33.219591Z","last_modified","2024-10-16T13:48:34.145251Z","media_types",[52],"application/vnd.docker.distribution.manifest.v1+prettyjws","name","pull_count",1312,"repository_type","star_count",0,"status",1,"status_description","active","source","collaborator_count","full_description","WebdriverCSS [![Version](http://img.shields.io/badge/version-v1.1.10-brightgreen.svg)](https://www.npmjs.org/package/webdrivercss) [![Build Status](https://travis-ci.org/webdriverio/webdrivercss.png?branch=master)](https://travis-ci.org/webdriverio/webdrivercss) [![Coverage Status](https://coveralls.io/repos/webdriverio/webdrivercss/badge.png?branch=master)](https://coveralls.io/r/webdriverio/webdrivercss?branch=master) [![Join the chat at https://gitter.im/webdriverio/webdrivercss](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/webdriverio/webdrivercss?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)\n============\n\n---\n\n> **_Note:_ WebdriverCSS isn't yet compatible with WebdriverIO `v3.0`.** We are currently working on it to make that happen soon. So stay tuned.\n\n---\n\n__CSS regression testing in WebdriverIO__. This plugin is an automatic visual regression-testing\ntool for [WebdriverIO](http://webdriver.io). It was inspired by [James Cryer's](https://github.com/jamescryer)\nawesome project called [PhantomCSS](https://github.com/Huddle/PhantomCSS). After\ninitialization it enhances a WebdriverIO instance with an additional command called\n`webdrivercss` and enables the possibility to save screenshots of specific parts of\nyour application.\n\n#### Never lose track of unwanted CSS changes:\n\n![alt text](http://webdriver.io/images/webdrivercss/hero.png \"Logo Title Text 1\")\n\n\n## How does it work?\n\n1. Define areas within your application that should always look the same\n2. Use WebdriverIO and WebdriverCSS to write some E2E tests and take screenshots of these areas\n3. Continue working on your application or website\n4. After a while rerun the tests\n5. If desired areas differ from previous taken screenshots an image diff gets generated and you get notified in your tests\n\n\n### Example\n\n```js\nvar assert = require('assert');\n\n// init WebdriverIO\nvar client = require('webdriverio').remote({desiredCapabilities:{browserName: 'chrome'}})\n// init WebdriverCSS\nrequire('webdrivercss').init(client);\n\nclient\n .init()\n .url('http://example.com')\n .webdrivercss('startpage',[\n {\n name: 'header',\n elem: '#header'\n }, {\n name: 'hero',\n elem: '//*[@id=\"hero\"]/div[2]'\n }\n ], function(err, res) {\n assert.ifError(err);\n assert.ok(res.header[0].isWithinMisMatchTolerance);\n assert.ok(res.hero[0].isWithinMisMatchTolerance);\n })\n .end();\n```\n\n## Install\n\nWebdriverCSS uses [GraphicsMagick](http://www.graphicsmagick.org/) for image processing. To install this\npackage you'll need to have it preinstalled on your system.\n\n#### Mac OS X using [Homebrew](http://mxcl.github.io/homebrew/)\n```sh\n$ brew install graphicsmagick\n```\n\n#### Ubuntu using apt-get\n```sh\n$ sudo apt-get install graphicsmagick\n```\n\n#### Windows\n\nDownload and install executables for [GraphicsMagick](http://www.graphicsmagick.org/download.html).\nPlease make sure you install the right binaries desired for your system (32bit vs 64bit).\n\nAfter these dependencies are installed you can install WebdriverCSS via NPM as usual:\n\n```sh\n$ npm install webdrivercss\n$ npm install webdriverio # if not already installed\n```\n\n## Setup\n\nTo use this plugin just call the `init` function and pass the desired WebdriverIO instance\nas parameter. Additionally you can define some options to configure the plugin. After that\nthe `webdrivercss` command will be available only for this instance.\n\n* **screenshotRoot** `String` ( default: *./webdrivercss* )
\n path where all screenshots get saved.\n\n* **failedComparisonsRoot** `String` ( default: *./webdrivercss/diff* )
\n path where all screenshot diffs get saved.\n\n* **misMatchTolerance** `Number` ( default: *0.05* )
\n number between 0 and 100 that defines the degree of mismatch to consider two images as\n identical, increasing this value will decrease test coverage.\n\n* **screenWidth** `Numbers[]` ( default: *[]* )
\n if set, all screenshots will be taken in different screen widths (e.g. for responsive design tests)\n\n* **updateBaseline** `Boolean` ( default: *false* )
\n updates baseline images if comparison keeps failing.\n\n\n### Example\n\n```js\n// create a WebdriverIO instance\nvar client = require('webdriverio').remote({\n desiredCapabilities: {\n browserName: 'phantomjs'\n }\n}).init();\n\n// initialise WebdriverCSS for `client` instance\nrequire('webdrivercss').init(client, {\n // example options\n screenshotRoot: 'my-shots',\n failedComparisonsRoot: 'diffs',\n misMatchTolerance: 0.05,\n screenWidth: [320,480,640,1024]\n});\n```\n\n## Usage\n\nWebdriverCSS enhances an WebdriverIO instance with an command called `webdrivercss`\n\n`client.webdrivercss('some_id', [{options}], callback);`\n\nIt provides options that will help you to define your areas exactly and exclude parts\nthat are unrelevant for design (e.g. content). Additionally it allows you to include\nthe responsive design in your regression tests easily. The following options are\navailable:\n\n* **name** `String` (required)
\n name of the captured element\n\n* **elem** `String`
\n only capture a specific DOM element, you can use all kinds of different [WebdriverIO selector strategies](http://webdriver.io/guide/usage/selectors.html) here\n\n* **width** `Number`
\n define a fixed width for your screenshot\n\n* **height** `Number`
\n define a fixed height for your screenshot\n\n* **x** `Number`
\n take screenshot at an exact xy postion (requires width/height option)\n\n* **y** `Number`
\n take screenshot at an exact xy postion (requires width/height option)\n\n* **exclude** `String[]|Object[]`
\n exclude frequently changing parts of your screenshot, you can either pass all kinds of different [WebdriverIO selector strategies](http://webdriver.io/guide/usage/selectors.html)\n that queries one or multiple elements or you can define x and y values which stretch a rectangle or polygon\n\n* **hide** `String[]`
\n hides all elements queried by all kinds of different [WebdriverIO selector strategies](http://webdriver.io/guide/usage/selectors.html) (via `visibility: hidden`)\n\n* **remove** `String[]`
\n removes all elements queried by all kinds of different [WebdriverIO selector strategies](http://webdriver.io/guide/usage/selectors.html) (via `display: none`)\n\n* **ignore** `String`
\n can be used to ignore color differences or differences caused by antialising artifacts in the screenshot comparison\n\nThe following paragraphs will give you a more detailed insight how to use these options properly.\n\n### Let your test fail when screenshots differ\n\nWhen using this plugin you can decide how to handle design breaks. You can either just work\nwith the captured screenshots or you could even break your integration test at this position. The\nfollowing example shows how to handle design breaks within integration tests:\n\n```js\nvar assert = require('assert');\n\ndescribe('my website should always look the same',function() {\n\n it('header should look the same',function(done) {\n client\n .url('http://www.example.org')\n .webdrivercss('header', {\n name: 'header',\n elem: '#header'\n }, function(err,res) {\n assert.ifError(err);\n\n // this will break the test if screenshot is not within the mismatch tolerance\n assert.ok(res.isWithinMisMatchTolerance);\n })\n .call(done);\n });\n\n // ...\n```\n\n### [Applitools Eyes](http://applitools.com) Support\n\n![Applitools Eyes](http://pravdam.biz/clientblogs/applitools2/applitools-new-logo.png)\n\nApplitools Eyes is a comprehensive automated UI validation solution with really smart image matching algorithms\nthat are unique in this area. As a cloud service it makes your regression tests available everywhere and\naccessible to everyone in your team, and its automated maintenance features simplify baseline maintenance.\n\nIn order to work with Applitools Eyes you need to sign up and obtain an API key. You can sign up for a\nfree account [here](http://applitools.com/signup/).\n\n### Applitools Eyes Example\n\n```js\nvar assert = require('assert');\n\n// create a WebdriverIO instance\nvar client = require('webdriverio').remote({\n desiredCapabilities: {\n browserName: 'chrome'\n }\n});\n\n// initialise WebdriverCSS for `client` instance\nrequire('webdrivercss').init(client, {\n key: ''\n});\n\nclient\n .init()\n .url('http://example.com')\n .webdrivercss('', {\n name: '',\n elem: '#someElement',\n // ...\n }, function(err, res) {\n assert.ifError(err);\n assert.equal(res.steps, res.strictMatches)\n })\n .end();\n```\n\nThe following options might be interesting if you want to synchronize your taken images with\nan external API. Checkout the [webdrivercss-adminpanel](https://github.com/webdriverio/webdrivercss-adminpanel)\nfor more information on that.\n\n* **api** `String`\n URL to API interface\n* **user** `String`\n user name (only necessary if API requires Basic Authentication or oAuth)\n* **key** `String`\n assigned user key (only necessary if API requires Basic Authentication or oAuth)\n\n\n### Define specific areas\n\nThe most powerful feature of WebdriverCSS is the possibility to define specific areas\nfor your regression tests. When calling the command, WebdriverCSS will always take a screenshot of\nthe whole website. After that it crops the image and creates a single copy for each element.\nIf you want to capture multiple images on one page make sure you pass an array of options to\nthe command. The screenshot capturing process can take a while depending on the document size\nof the website. Once you interact with the page by clicking on links, open layers or navigating\nto a new site you should call the `webdrivercss` command to take a new screenshot.\n\nTo query elements you want to capture you are able to choose all kinds of different [WebdriverIO selector strategies](http://webdriver.io/guide/usage/selectors.html) or you can\nspecify x/y coordinates to cover a more exact area.\n\n```js\nclient\n .url('http://github.com')\n .webdrivercss('githubform', {\n name: 'github-signup',\n elem: '#site-container > div.marketing-section.marketing-section-signup > div.container > form'\n });\n```\n\nWill capture the following:\n\n![alt text](http://webdriver.io/images/webdrivercss/githubform.png \"Logo Title Text 1\")\n\n**Tip:** do right click on the desired element, then click on `Inspect Element`, then hover\nover the desired element in DevTools, open the context menu and click on `Copy CSS Path` to\nget the exact CSS selector\n\nThe following example uses xy coordinates to capture a more exact area. You should also\npass a screenWidth option to make sure that your xy parameters map perfect on the desired area.\n\n```js\nclient\n .url('http://github.com')\n .webdrivercss('headerbar', {\n name: 'headerbar',\n x: 110,\n y: 15,\n width: 980,\n height: 34,\n screenWidth: [1200]\n });\n```\n![alt text](http://webdriver.io/images/webdrivercss/headerbar.png \"Logo Title Text 1\")\n\n\n### Exclude specific areas\n\nSometimes it is unavoidable that content gets captured and from time to time this content\nwill change of course. This would break all tests. To prevent this you can\ndetermine areas, which will get covered in black and will not be considered anymore. Here is\nan example:\n\n```js\nclient\n .url('http://tumblr.com/themes')\n .webdrivercss('tumblrpage', {\n name: 'startpage',\n exclude: ['#theme_garden > div > section.carousel > div.carousel_slides',\n '//*[@id=\"theme_garden\"]/div/section[3]',\n '//*[@id=\"theme_garden\"]/div/section[4]']\n screenWidth: [1200]\n });\n```\n![alt text](http://webdriver.io/images/webdrivercss/exclude.png \"Logo Title Text 1\")\n\nInstead of using a selector strategy you can also exclude areas by specifying xy values\nwhich form a rectangle.\n\n```js\nclient\n .url('http://tumblr.com/themes')\n .webdrivercss('tumblrpage', {\n name: 'startpage',\n exclude: [{\n x0: 100, y0: 100,\n x1: 300, y1: 200\n }],\n screenWidth: [1200]\n });\n```\n\nIf your exclude object has more then two xy variables, it will try to form a polygon. This may be\nhelpful if you like to exclude complex figures like:\n\n```js\nclient\n .url('http://tumblr.com/themes')\n .webdrivercss('polygon', {\n name: 'startpage',\n exclude: [{\n x0: 120, y0: 725,\n x1: 120, y1: 600,\n x2: 290, y2: 490,\n x3: 290, y3: 255,\n x4: 925, y4: 255,\n x5: 925, y5: 490,\n x6: 1080,y6: 600,\n x7: 1080,y7: 725\n }],\n screenWidth: [1200]\n });\n```\n![alt text](http://webdriver.io/images/webdrivercss/exclude2.png \"Logo Title Text 1\")\n\n### Tweak the image comparison\n\nIf you experience problems with unstable comparison results you might want to try tweaking the algorithm.\nThere are two options available: `colors` and `antialiasing`. `colors` might help you if you don't care about color differences on your page, while the `antialiasing` option can for example reduce unexpected differences on font or image edges:\n\n```js\nclient\n .url('http://tumblr.com/themes')\n .webdrivercss('tumblrpage', {\n name: 'startpage',\n ignore: 'antialiasing',\n screenWidth: [1200]\n });\n```\n\nNote: This doesn't affect the taken screenshots, but only the comparison calculations.\nBy setting this option you reduce the sensitivity of the comparison algorithm. Though it's unlikely this might cause layout changes to remain unnoticed.\n\n### Keep an eye on mobile screen resolution\n\nIt is of course also important to check your design in multiple screen resolutions. By\nusing the `screenWidth` option WebdriverCSS automatically resizes the browser for you.\nBy adding the screen width to the file name WebdriverCSS makes sure that only shots\nwith same width will be compared.\n\n```js\nclient\n .url('http://stephencaver.com/')\n .webdrivercss('startpage', {\n name: 'header',\n elem: '#masthead',\n screenWidth: [320,640,960]\n });\n```\n\nThis will capture the following image at once:\n\n![alt text](http://webdriver.io/images/webdrivercss/header.new.960px.png \"Logo Title Text 1\")\n\n**file name:** header.960px.png\n\n![alt text](http://webdriver.io/images/webdrivercss/header.new.640px.png \"Logo Title Text 1\")\n\n**file name:** header.640px.png\n\n![alt text](http://webdriver.io/images/webdrivercss/header.new.320px.png \"Logo Title Text 1\")\n\n**file name:** header.320px.png\n\nNote that if you have multiple tests running one after the other, it is important to change the first argument passed to the `webdrivercss()` command to be unique, as WebdriverCSS saves time by remembering the name of previously captured screenshots.\n\n```js\n// Example using Mocha\nit('should check the first page',function(done) {\n client\n .init()\n .url('https://example.com')\n // Make this name unique.\n .webdrivercss('page1', [\n {\n name: 'test',\n screenWidth: [320,480,640,1024]\n }, {\n name: 'test_two',\n screenWidth: [444,666]\n }\n ])\n .end()\n .call(done);\n});\n\nit('should check the second page',function(done) {\n client\n // ...\n // Make this name unique.\n .webdrivercss('page2', [\n // ..\n ])\n // ...\n);\n\n```\n\n\n\n### Synchronize your taken Images\n\nIf you want to have your image repository available regardless where you run your tests, you can\nuse an external API to store your shots. Therefor WebdriverCSS adds a `sync` function that downloads\nthe repository as tarball and unzips it. After running your tests you can call this function again\nto zip the current state of your repository and upload it. Here is how this can look like:\n\n```js\n// create a WebdriverIO instance\nvar client = require('webdriverio').remote({\n desiredCapabilities: {\n browserName: 'phantomjs'\n }\n});\n\n// initialise WebdriverCSS for `client` instance\nrequire('webdrivercss').init(client, {\n screenshotRoot: 'myRegressionTests',\n\n // Provide the API route\n api: 'http://example.com/api/webdrivercss'\n});\n\nclient\n .init()\n .sync() // downloads last uploaded tarball from http://example.com/api/webdrivercss/myRegressionTests.tar.gz\n .url('http://example.com')\n\n // do your regression tests\n // ...\n\n .sync() // zips your screenshot root and uploads it to http://example.com/api/webdrivercss via POST method\n .end();\n```\n\nThis allows you to run your regression tests with the same taken shots again and again, no matter where\nyour tests are executed. It also makes distributed testing possible. Regressions tests can be done not only\nby you but everyone else who has access to the API.\n\n#### API Requirements\n\nTo implement such API you have to provide two routes for synchronization:\n\n* [GET] /some/route/:file\n Should response the uploaded tarball (for example: /some/root/myProject.tar.gz)\n Content-Type: `application/octet-stream`\n* [POST] /some/route\n Request contains zipped tarball that needs to be stored on the filesystem\n\nIf you don't want to implement this by yourself, there is already such an application prepared, checkout\nthe [webdriverio/webdrivercss-adminpanel](https://github.com/webdriverio/webdrivercss-adminpanel) project.\nIt provides even a web interface for before/after comparison and stuff like this.\n\n## Contributing\nPlease fork, add specs, and send pull requests! In lieu of a formal styleguide, take care to\nmaintain the existing coding style.\n\nDefault driver instance used for testing is [PhantomJS](https://github.com/ariya/phantomjs) (v1.9.8), so you need to either have\nit installed, or change the `desiredCapabilities` in the `bootstrap.js`\nfile under the `test` folder to your preferred driver (e.g., Firefox).\n\nYou also need a web server to serve the \"site\" files and have the root folder set to \"webdrivercss\". We use the\n[http-server package](https://www.npmjs.org/package/http-server). To use this package, run these commands:\n\n```\n/path/to/webdrivercss-repo/ $ npm install -g http-server\n/path/to/webdrivercss-repo/ $ http-server -p 8080\n```\n\nYou can validate the site is loading correctly by visiting `http://localhost:8080/test/site/index.html` in a browser.\n\nYou'll also need a local selenium server running. You can install and start one via the following commands in a separate terminal:\n\n```\nnpm install -g selenium-standalone\nselenium-standalone install\nselenium-standalone start\n```\n","has_starred","hub_user","immutable_tags_settings",{"_71":11,"_72":73},"enabled","rules",[74],".*","is_automated","permissions",{"_78":17,"_79":11,"_80":11},"read","write","admin","user","storage_size",331565342,"orgData",{"_86":87,"_88":89,"_90":91,"_92":29,"_93":29,"_94":95,"_96":97,"_98":99,"_100":101,"_102":103,"_104":103,"_105":103,"_106":17},"id","9533a2526a594564949070af17c6a6bb","uuid","9533a252-6a59-4564-9490-70af17c6a6bb","type","organization","orgname","full_name","location","US","company","CivicActions","profile_url","https://civicactions.com","date_joined","2016-03-04T22:55:11.092365Z","gravatar_url","","gravatar_email","badge","is_active","recentTags",[109],{"_110":40,"_111":112,"_113":114,"_86":115,"_116":117,"_46":134,"_135":112,"_136":29,"_137":52,"_53":138,"_139":140,"_141":125,"_142":134,"_143":62,"_144":17},"content_type","creator",670481,"full_size",292390288,2273289,"images",[118],{"_119":120,"_121":122,"_123":103,"_124":125,"_126":127,"_128":103,"_129":103,"_130":-5,"_131":132,"_59":62,"_133":-5},"architecture","amd64","digest","sha256:7634fe05cbca311cd621970825f3f27b48715c00025ccf749ab66515fa40d557","features","last_pulled","2026-09-20T18:49:28.739845722Z","last_pushed","2016-03-11T23:47:33Z","os","os_features","os_version","size",292390608,"variant","2016-03-11T23:47:32.774527Z","last_updater","last_updater_username","media_type","latest","repository",572846,"tag_last_pulled","tag_last_pushed","tag_status","v2","sbxKitMetadata","isPotentialSpam","isHubSbxKitsEnabled","showSbxLogoOverride","sbxTrademarkText","displaySecurityMetadata","tagAttestations","tagsHaveAttestations",[],"routes/_layout.r.$namespace.$reponame.tags",{"_34":156,"_163":164,"_152":173,"_174":11},{"_36":157,"_38":158,"_41":42,"_43":44,"_45":11,"_46":47,"_48":49,"_50":159,"_53":31,"_28":29,"_54":55,"_56":-5,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":58,"_65":66,"_67":11,"_68":29,"_69":160,"_75":17,"_76":162,"_81":29,"_82":83},[],[40],[52],{"_71":11,"_72":161},[74],{"_78":17,"_79":11,"_80":11},"tags",{"_165":60,"_166":-5,"_167":-5,"_168":169},"count","next","previous","results",[170],{"_110":40,"_111":112,"_113":114,"_86":115,"_116":171,"_46":134,"_135":112,"_136":29,"_137":52,"_53":138,"_139":140,"_141":125,"_142":134,"_143":62,"_144":17},[172],{"_119":120,"_121":122,"_123":103,"_124":125,"_126":127,"_128":103,"_129":103,"_130":-5,"_131":132,"_59":62,"_133":-5},[],"canDeleteTags","actionData","errors"]

civicactions/webdrivercss

Tags for civicactions/webdrivercss