Applitools Eyes SDK for web-component-tester.
It is currently in alpha version. Please, report all issues and suggestions.
Installation
-
Install wct-eyes as dependencies (select only one command from the list below, use the same way as you use for
web-component-tester
):npm install wct-eyes --save-devnpm install -g wct-eyes
-
Enable
wct-eyes
plugin- Create wct.conf.json configuration file and add
eyes
plugin to it:
- Or use CLI option to do the same:
wct --plugin eyesThe
wct-eyes
plugin also supports few options likeapiKey
,serverUrl
and/orverbose
. See package.json for all possible options and description to them. - Create wct.conf.json configuration file and add
How to use
After you installed wct-eyes
plugin you can start using it.
If you just starting using Applitools Eyes, then you need to register an account and obtain api key. When you get the api key, you should set it to environment variables as APPLITOOLS_API_KEY
or use plugin option apiKey
(put it after "disabled": false
of the example above in wct.conf.json
).
There is example of simple WCT test for fixture
Hello world!
Using Applitools wct-eyes
you can do visual validation of content. Let's update out example
Hello world!
The results should looks like this
[EYES: TEST RESULTS]:
[Chrome] Test 'text should be equal given' of 'helloWorldTest' is a new test, please, approve baseline!
[Chrome] Test 'text should be changed and validated' of 'helloWorldTest' is a new test, please, approve baseline!
See details at https://eyes.applitools.com/app/test-results/00000251865619809217?accountId=SDiQx0yNxEaxwg5rGNSP7A~~
You can follow the link from results and see your screenshots of your component.
Now, you can change text in the #simple element and run test again and using the link from new results you will see new validation which will show visual difference.
- Examples above and few more you can find in wct-eyes-example repository.