forked from enviPath/enviPy
Current Dev State
This commit is contained in:
61
static/js/ketcher2/node_modules/webdriverio/docs/guide/plugins/browserevent.md
generated
vendored
Normal file
61
static/js/ketcher2/node_modules/webdriverio/docs/guide/plugins/browserevent.md
generated
vendored
Normal file
@ -0,0 +1,61 @@
|
||||
name: browserevent
|
||||
# category: plugins
|
||||
tags: guide
|
||||
title: WebdriverIO - Browserevent
|
||||
---
|
||||
|
||||
Browserevent
|
||||
============
|
||||
|
||||
This is an experimental feature that helps you to listen on events within the browser. It
|
||||
is currently **only** supported in Chrome browser (other browser will eventually follow).
|
||||
To register an event call the `addEventListener` command. If an event gets invoked it returns
|
||||
almost the complete event object that got caught within the browser. Only the `Window` attribute
|
||||
will be removed to avoid circular references. All objects from type `HTMLElement` will be
|
||||
replaced by their xPath. This will help you to query and identify this element with WebdriverIO.
|
||||
|
||||
## Install
|
||||
|
||||
First install this plugin via NPM by executing
|
||||
|
||||
```sh
|
||||
$ npm install browserevent
|
||||
```
|
||||
|
||||
Then just require the module and enhance your client object.
|
||||
|
||||
```js
|
||||
var client = require('webdriverio').remote({ desiredCapabilities: { browserName: 'chrome' } }),
|
||||
browserevent = require('browserevent');
|
||||
|
||||
// by passing the client object as argument the module enhances it with
|
||||
// the `addEventListener` and `removeEventListener` command
|
||||
browserevent.init(client);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
After that you can use `addEventListener` to register events on one or multiple elements
|
||||
and `removeEventListener` to remove them.
|
||||
|
||||
**Example**
|
||||
|
||||
```js
|
||||
client
|
||||
.url('http://google.com')
|
||||
.addEventListener('dblclick','#hplogo', function(e) {
|
||||
console.log(e.target); // -> 'id("hplogo")'
|
||||
console.log(e.type); // -> 'dblclick'
|
||||
console.log(e.clientX, e.clientY); // -> 239 524
|
||||
})
|
||||
.doubleClick('#hplogo') // triggers event
|
||||
.end();
|
||||
```
|
||||
|
||||
**Note:** this is still an experimental feature. Some events like `hover` will not be recorded
|
||||
by the browser. But events like `click`, `doubleClick` or custom events are working flawlessly.
|
||||
You can also use this feature in cloud environments like [Sauce Labs](https://saucelabs.com)
|
||||
when using a secured tunnel that proxies the port `5555`. But be aware of possible delays due
|
||||
to slow connections between client and cloud server. Your click listener could outlast some
|
||||
selenium requests until it gets fired. I haven't faced this problem if the standalone server
|
||||
runs on my local machine.
|
||||
71
static/js/ketcher2/node_modules/webdriverio/docs/guide/plugins/chai-webdriverio.md
generated
vendored
Normal file
71
static/js/ketcher2/node_modules/webdriverio/docs/guide/plugins/chai-webdriverio.md
generated
vendored
Normal file
@ -0,0 +1,71 @@
|
||||
name: chai-webdriverio
|
||||
category: plugins
|
||||
tags: guide
|
||||
index: 3
|
||||
title: Chai-WebdriverIO
|
||||
---
|
||||
# chai-webdriverio
|
||||
|
||||
|
||||
Provides [webdriverio](https://npmjs.org/package/webdriverio) sugar for the [Chai](http://chaijs.com/) assertion library. Allows you to create expressive integration tests:
|
||||
|
||||
```javascript
|
||||
expect('.frequency-field').to.have.text('One time')
|
||||
expect('.toggle-pane').to.not.be.visible()
|
||||
```
|
||||
|
||||
## What sorts of assertions can we make?
|
||||
|
||||
All assertions start with a [WebdriverIO-compatible selector](http://webdriver.io/guide/usage/selectors.html), for example:
|
||||
|
||||
- `expect('.list')` (CSS selector)
|
||||
- `expect('a[href=http://google.com]')` (CSS Selector)
|
||||
- `expect('//BODY/DIV[6]/DIV[1]')` (XPath selector)
|
||||
- `expect('a*=Save')` (Text selector)
|
||||
|
||||
Then, we can add our assertion to the chain.
|
||||
|
||||
- `expect(selector).to.be.there()` - Test whether the element exists.
|
||||
- `expect(selector).to.be.visible()` - Test whether or not the element is visible.
|
||||
- `expect(selector).to.have.text('string')` - Test the text value of the dom element against supplied string. Exact matches only.
|
||||
- `expect(selector).to.have.text(/regex/)` - Test the text value of the dom element against the supplied regular expression.
|
||||
- `expect(selector).to.have.count(number)` - Test how many elements exist in the dom with the supplied selector
|
||||
|
||||
You can also always add a `not` in there to negate the assertion:
|
||||
|
||||
- `expect(selector).not.to.have.text('property')`
|
||||
|
||||
## Setup
|
||||
|
||||
Setup is pretty easy. Just:
|
||||
|
||||
```javascript
|
||||
var chai = require('chai');
|
||||
var chaiWebdriver = require('chai-webdriverio').default;
|
||||
chai.use(chaiWebdriver(browser));
|
||||
|
||||
// And you're good to go!
|
||||
browser.url('http://github.com');
|
||||
chai.expect('#site-container h1.heading').to.not.contain.text("I'm a kitty!");
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
so easy.
|
||||
|
||||
```bash
|
||||
npm # download the necessary development dependencies
|
||||
npm transpile # compile ES6 into javascript
|
||||
npm test # build and run the specs
|
||||
```
|
||||
|
||||
**Contributors:**
|
||||
|
||||
* [@mltsy](https://github.com/mltsy) : `exist`, `text` assertions, documentation & test adjustments
|
||||
|
||||
## License
|
||||
|
||||
Apache 2.0
|
||||
|
||||
## Thanks
|
||||
Thanks to [goodeggs](https://github.com/goodeggs/) for creating: [chai-webdriver](https://github.com/goodeggs/chai-webdriver) which inspired this module.
|
||||
68
static/js/ketcher2/node_modules/webdriverio/docs/guide/plugins/grunt-webdriver.md
generated
vendored
Normal file
68
static/js/ketcher2/node_modules/webdriverio/docs/guide/plugins/grunt-webdriver.md
generated
vendored
Normal file
@ -0,0 +1,68 @@
|
||||
name: Grunt
|
||||
category: plugins
|
||||
tags: guide
|
||||
index: 1
|
||||
title: WebdriverIO - WDIO with Grunt
|
||||
---
|
||||
|
||||
# WDIO with Grunt
|
||||
|
||||
`grunt-webdriver` is a [grunt plugin](http://gruntjs.com/) to run selenium tests with the [WebdriverIO](http://webdriver.io) testrunner.
|
||||
|
||||
## Getting Started
|
||||
|
||||
If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
|
||||
|
||||
```shell
|
||||
npm install --save-dev grunt-webdriver
|
||||
```
|
||||
|
||||
Once the plugin has been installed, it may be enabled inside your gruntfile with this line of JavaScript:
|
||||
|
||||
```js
|
||||
grunt.loadNpmTasks('grunt-webdriver');
|
||||
```
|
||||
|
||||
## The "webdriver" task
|
||||
|
||||
### Overview
|
||||
|
||||
In your project's Gruntfile, add a section named `webdriver` to the data object passed into `grunt.initConfig()`. Your test should contain a `configFile` property with a path to your wdio config. You can pass in additional options as cli arguments.
|
||||
|
||||
_Run this task with the `grunt webdriver` command._
|
||||
|
||||
```js
|
||||
grunt.initConfig({
|
||||
webdriver: {
|
||||
test: {
|
||||
configFile: './test/wdio.conf.js'
|
||||
}
|
||||
},
|
||||
// ...
|
||||
})
|
||||
```
|
||||
|
||||
The plugin is an easy helper to run WebdriverIO tests using the wdio test runner. You can find more information about the test runner on our [docs page](http://webdriver.io/guide/testrunner/gettingstarted.html).
|
||||
|
||||
#### Example using [Sauce Labs](https://saucelabs.com)
|
||||
|
||||
To use a cloud service like [Sauce Labs](https://saucelabs.com) make sure you define `user` and `key` properties like in the example below to authenticate yourself with your username and access key.
|
||||
|
||||
```js
|
||||
grunt.initConfig({
|
||||
webdriver: {
|
||||
options: {
|
||||
user: SAUCE_USERNAME,
|
||||
key: SAUCE_ACCESS_KEY
|
||||
},
|
||||
test: {
|
||||
configFile: './test/wdio.conf.js'
|
||||
}
|
||||
},
|
||||
// ...
|
||||
})
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
All options get passed into to the wdio testrunner. You should define your main configurations within your wdio config file. The plugin allows you to easy overwrite them. You can find all available cli arguments here: [http://webdriver.io/guide/testrunner/gettingstarted.html](http://webdriver.io/guide/testrunner/gettingstarted.html)
|
||||
41
static/js/ketcher2/node_modules/webdriverio/docs/guide/plugins/gulp-webdriver.md
generated
vendored
Normal file
41
static/js/ketcher2/node_modules/webdriverio/docs/guide/plugins/gulp-webdriver.md
generated
vendored
Normal file
@ -0,0 +1,41 @@
|
||||
name: Gulp
|
||||
category: plugins
|
||||
tags: guide
|
||||
index: 0
|
||||
title: WebdriverIO - gulp-webdriver
|
||||
---
|
||||
|
||||
gulp-webdriver
|
||||
==============
|
||||
|
||||
`gulp-webdriver` is a [gulp plugin](http://gulpjs.com/) to run selenium tests with the [WebdriverIO](http://webdriver.io) testrunner.
|
||||
|
||||
## Install
|
||||
|
||||
```shell
|
||||
npm install gulp-webdriver --save-dev
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
You can run WebdriverIO locally running this simple task:
|
||||
|
||||
```js
|
||||
gulp.task('test:e2e', function() {
|
||||
return gulp.src('wdio.conf.js').pipe(webdriver());
|
||||
});
|
||||
```
|
||||
|
||||
gulp-webdriver makes the wdio testrunner easy accessible and allows you to run multiple config files
|
||||
sequentially. If desired you can pass additional arguments to the wdio command to specify your test.
|
||||
You can find all available options [here](http://webdriver.io/guide/testrunner/gettingstarted.html)
|
||||
or by executing `$ wdio --help` (if you have WebdriverIO installed globally).
|
||||
|
||||
```js
|
||||
gulp.task('test:e2e', function() {
|
||||
return gulp.src('wdio.conf.js').pipe(webdriver({
|
||||
logLevel: 'verbose',
|
||||
waitforTimeout: 10000
|
||||
}));
|
||||
});
|
||||
```
|
||||
492
static/js/ketcher2/node_modules/webdriverio/docs/guide/plugins/webdrivercss.md
generated
vendored
Normal file
492
static/js/ketcher2/node_modules/webdriverio/docs/guide/plugins/webdrivercss.md
generated
vendored
Normal file
@ -0,0 +1,492 @@
|
||||
name: webdrivercss
|
||||
# category: plugins
|
||||
tags: guide
|
||||
title: WebdriverIO - WebdriverCSS
|
||||
----
|
||||
|
||||
WebdriverCSS [](https://www.npmjs.org/package/webdrivercss) [](https://travis-ci.org/webdriverio/webdrivercss) [](https://coveralls.io/r/webdriverio/webdrivercss?branch=master)
|
||||
============
|
||||
|
||||
__CSS regression testing in WebdriverIO__. This plugin is an automatic visual regression-testing
|
||||
tool for [WebdriverIO](http://webdriver.io). It was inspired by [James Cryer's](https://github.com/jamescryer)
|
||||
awesome project called [PhantomCSS](https://github.com/Huddle/PhantomCSS). After
|
||||
initialization it enhances a WebdriverIO instance with an additional command called
|
||||
`webdrivercss` and enables the possibility to save screenshots of specific parts of
|
||||
your application.
|
||||
|
||||
#### Never lose track of unwanted CSS changes:
|
||||
|
||||

|
||||
|
||||
|
||||
## How does it work?
|
||||
|
||||
1. Define areas within your application that should always look the same
|
||||
2. Use WebdriverIO and WebdriverCSS to write some E2E tests and take screenshots of these areas
|
||||
3. Continue working on your application or website
|
||||
4. After a while rerun the tests
|
||||
5. If desired areas differ from previous taken screenshots an image diff gets generated and you get notified in your tests
|
||||
|
||||
|
||||
### Example
|
||||
|
||||
```js
|
||||
var assert = require('assert');
|
||||
|
||||
// init WebdriverIO
|
||||
var client = require('webdriverio').remote({desiredCapabilities:{browserName: 'chrome'}})
|
||||
// init WebdriverCSS
|
||||
require('webdrivercss').init(client);
|
||||
|
||||
client
|
||||
.init()
|
||||
.url('http://example.com')
|
||||
.webdrivercss('startpage',[
|
||||
{
|
||||
name: 'header',
|
||||
elem: '#header'
|
||||
}, {
|
||||
name: 'hero',
|
||||
elem: '//*[@id="hero"]/div[2]'
|
||||
}
|
||||
], function(err, res) {
|
||||
assert.ifError(err);
|
||||
assert.ok(res.header[0].isWithinMisMatchTolerance);
|
||||
assert.ok(res.hero[0].isWithinMisMatchTolerance);
|
||||
})
|
||||
.end();
|
||||
```
|
||||
|
||||
## Install
|
||||
|
||||
WebdriverCSS uses [GraphicsMagick](http://www.graphicsmagick.org/) for image processing. To install this
|
||||
package you'll need to have it preinstalled on your system.
|
||||
|
||||
#### Mac OS X using [Homebrew](http://mxcl.github.io/homebrew/)
|
||||
```sh
|
||||
$ brew install graphicsmagick
|
||||
```
|
||||
|
||||
#### Ubuntu using apt-get
|
||||
```sh
|
||||
$ sudo apt-get install graphicsmagick
|
||||
```
|
||||
|
||||
#### Windows
|
||||
|
||||
Download and install executables for [GraphicsMagick](http://www.graphicsmagick.org/download.html).
|
||||
Please make sure you install the right binaries desired for your system (32bit vs 64bit).
|
||||
|
||||
After these dependencies are installed you can install WebdriverCSS via NPM as usual:
|
||||
|
||||
```sh
|
||||
$ npm install webdrivercss
|
||||
$ npm install webdriverio # if not already installed
|
||||
```
|
||||
|
||||
## Setup
|
||||
|
||||
To use this plugin just call the `init` function and pass the desired WebdriverIO instance
|
||||
as parameter. Additionally you can define some options to configure the plugin. After that
|
||||
the `webdrivercss` command will be available only for this instance.
|
||||
|
||||
* **screenshotRoot** `String` ( default: *./webdrivercss* )<br>
|
||||
path where all screenshots get saved.
|
||||
|
||||
* **failedComparisonsRoot** `String` ( default: *./webdrivercss/diff* )<br>
|
||||
path where all screenshot diffs get saved.
|
||||
|
||||
* **misMatchTolerance** `Number` ( default: *0.05* )<br>
|
||||
number between 0 and 100 that defines the degree of mismatch to consider two images as
|
||||
identical, increasing this value will decrease test coverage.
|
||||
|
||||
* **screenWidth** `Numbers[]` ( default: *[]* )<br>
|
||||
if set, all screenshots will be taken in different screen widths (e.g. for responsive design tests)
|
||||
|
||||
* **updateBaseline** `Boolean` ( default: *false* )<br>
|
||||
updates baseline images if comparison keeps failing.
|
||||
|
||||
|
||||
### Example
|
||||
|
||||
```js
|
||||
// create a WebdriverIO instance
|
||||
var client = require('webdriverio').remote({
|
||||
desiredCapabilities: {
|
||||
browserName: 'phantomjs'
|
||||
}
|
||||
}).init();
|
||||
|
||||
// initialise WebdriverCSS for `client` instance
|
||||
require('webdrivercss').init(client, {
|
||||
// example options
|
||||
screenshotRoot: 'my-shots',
|
||||
failedComparisonsRoot: 'diffs',
|
||||
misMatchTolerance: 0.05,
|
||||
screenWidth: [320,480,640,1024]
|
||||
});
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
WebdriverCSS enhances an WebdriverIO instance with an command called `webdrivercss`
|
||||
|
||||
`client.webdrivercss('some_id', [{options}], callback);`
|
||||
|
||||
It provides options that will help you to define your areas exactly and exclude parts
|
||||
that are unrelevant for design (e.g. content). Additionally it allows you to include
|
||||
the responsive design in your regression tests easily. The following options are
|
||||
available:
|
||||
|
||||
* **name** `String` (required)<br>
|
||||
name of the captured element
|
||||
|
||||
* **elem** `String`<br>
|
||||
only capture a specific DOM element, you can use all kinds of different [WebdriverIO selector strategies](http://webdriver.io/guide/usage/selectors.html) here
|
||||
|
||||
* **width** `Number`<br>
|
||||
define a fixed width for your screenshot
|
||||
|
||||
* **height** `Number`<br>
|
||||
define a fixed height for your screenshot
|
||||
|
||||
* **x** `Number`<br>
|
||||
take screenshot at an exact xy position (requires width/height option)
|
||||
|
||||
* **y** `Number`<br>
|
||||
take screenshot at an exact xy position (requires width/height option)
|
||||
|
||||
* **exclude** `String[]|Object[]`<br>
|
||||
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)
|
||||
that queries one or multiple elements or you can define x and y values which stretch a rectangle or polygon
|
||||
|
||||
* **hide** `String[]`<br>
|
||||
hides all elements queried by all kinds of different [WebdriverIO selector strategies](http://webdriver.io/guide/usage/selectors.html) (via `visibility: hidden`)
|
||||
|
||||
* **remove** `String[]`<br>
|
||||
removes all elements queried by all kinds of different [WebdriverIO selector strategies](http://webdriver.io/guide/usage/selectors.html) (via `display: none`)
|
||||
|
||||
The following paragraphs will give you a more detailed insight how to use these options properly.
|
||||
|
||||
### Let your test fail when screenshots differ
|
||||
|
||||
When using this plugin you can decide how to handle design breaks. You can either just work
|
||||
with the captured screenshots or you could even break your integration test at this position. The
|
||||
following example shows how to handle design breaks within integration tests:
|
||||
|
||||
```js
|
||||
var assert = require('assert');
|
||||
|
||||
describe('my website should always look the same',function() {
|
||||
|
||||
it('header should look the same',function(done) {
|
||||
client
|
||||
.url('http://www.example.org')
|
||||
.webdrivercss('header', {
|
||||
name: 'header',
|
||||
elem: '#header'
|
||||
}, function(err,res) {
|
||||
assert.ifError(err);
|
||||
|
||||
// this will break the test if screenshot is not within the mismatch tolerance
|
||||
assert.ok(res.isWithinMisMatchTolerance);
|
||||
})
|
||||
.call(done);
|
||||
});
|
||||
|
||||
// ...
|
||||
```
|
||||
|
||||
### [Applitools Eyes](http://applitools.com) Support
|
||||
|
||||

|
||||
|
||||
Applitools Eyes is a comprehensive automated UI validation solution with really smart image matching algorithms
|
||||
that are unique in this area. As a cloud service it makes your regression tests available everywhere and
|
||||
accessible to everyone in your team, and its automated maintenance features simplify baseline maintenance.
|
||||
|
||||
In order to work with Applitools Eyes you need to sign up and obtain an API key. You can sign up for a
|
||||
free account [here](http://applitools.com/signup/).
|
||||
|
||||
### Applitools Eyes Example
|
||||
|
||||
```js
|
||||
var assert = require('assert');
|
||||
|
||||
// create a WebdriverIO instance
|
||||
var client = require('webdriverio').remote({
|
||||
desiredCapabilities: {
|
||||
browserName: 'chrome'
|
||||
}
|
||||
});
|
||||
|
||||
// initialise WebdriverCSS for `client` instance
|
||||
require('webdrivercss').init(client, {
|
||||
key: '<your personal API key>'
|
||||
});
|
||||
|
||||
client
|
||||
.init()
|
||||
.url('http://example.com')
|
||||
.webdrivercss('<app name>', {
|
||||
name: '<test name>',
|
||||
elem: '#someElement',
|
||||
// ...
|
||||
}, function(err, res) {
|
||||
assert.ifError(err);
|
||||
assert.equal(res.steps, res.strictMatches)
|
||||
})
|
||||
.end();
|
||||
```
|
||||
|
||||
The following options might be interesting if you want to synchronize your taken images with
|
||||
an external API. Checkout the [webdrivercss-adminpanel](https://github.com/webdriverio/webdrivercss-adminpanel)
|
||||
for more information on that.
|
||||
|
||||
* **api** `String`
|
||||
URL to API interface
|
||||
* **user** `String`
|
||||
user name (only necessary if API requires Basic Authentication or oAuth)
|
||||
* **key** `String`
|
||||
assigned user key (only necessary if API requires Basic Authentication or oAuth)
|
||||
|
||||
|
||||
### Define specific areas
|
||||
|
||||
The most powerful feature of WebdriverCSS is the possibility to define specific areas
|
||||
for your regression tests. When calling the command, WebdriverCSS will always take a screenshot of
|
||||
the whole website. After that it crops the image and creates a single copy for each element.
|
||||
If you want to capture multiple images on one page make sure you pass an array of options to
|
||||
the command. The screenshot capturing process can take a while depending on the document size
|
||||
of the website. Once you interact with the page by clicking on links, open layers or navigating
|
||||
to a new site you should call the `webdrivercss` command to take a new screenshot.
|
||||
|
||||
To 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
|
||||
specify x/y coordinates to cover a more exact area.
|
||||
|
||||
```js
|
||||
client
|
||||
.url('http://github.com')
|
||||
.webdrivercss('githubform', {
|
||||
name: 'github-signup',
|
||||
elem: '#site-container > div.marketing-section.marketing-section-signup > div.container > form'
|
||||
});
|
||||
```
|
||||
|
||||
Will capture the following:
|
||||
|
||||

|
||||
|
||||
**Tip:** do right click on the desired element, then click on `Inspect Element`, then hover
|
||||
over the desired element in DevTools, open the context menu and click on `Copy CSS Path` to
|
||||
get the exact CSS selector
|
||||
|
||||
The following example uses xy coordinates to capture a more exact area. You should also
|
||||
pass a screenWidth option to make sure that your xy parameters map perfect on the desired area.
|
||||
|
||||
```js
|
||||
client
|
||||
.url('http://github.com')
|
||||
.webdrivercss('headerbar', {
|
||||
name: 'headerbar',
|
||||
x: 110,
|
||||
y: 15,
|
||||
width: 980,
|
||||
height: 34,
|
||||
screenWidth: [1200]
|
||||
});
|
||||
```
|
||||

|
||||
|
||||
|
||||
### Exclude specific areas
|
||||
|
||||
Sometimes it is unavoidable that content gets captured and from time to time this content
|
||||
will change of course. This would break all tests. To prevent this you can
|
||||
determine areas, which will get covered in black and will not be considered anymore. Here is
|
||||
an example:
|
||||
|
||||
```js
|
||||
client
|
||||
.url('http://tumblr.com/themes')
|
||||
.webdrivercss('tumblrpage', {
|
||||
name: 'startpage',
|
||||
exclude: ['#theme_garden > div > section.carousel > div.carousel_slides',
|
||||
'//*[@id="theme_garden"]/div/section[3]',
|
||||
'//*[@id="theme_garden"]/div/section[4]']
|
||||
screenWidth: [1200]
|
||||
});
|
||||
```
|
||||

|
||||
|
||||
Instead of using a selector strategy you can also exclude areas by specifying xy values
|
||||
which form a rectangle.
|
||||
|
||||
```js
|
||||
client
|
||||
.url('http://tumblr.com/themes')
|
||||
.webdrivercss('tumblrpage', {
|
||||
name: 'startpage',
|
||||
exclude: [{
|
||||
x0: 100, y0: 100,
|
||||
x1: 300, y1: 200
|
||||
}],
|
||||
screenWidth: [1200]
|
||||
});
|
||||
```
|
||||
|
||||
If your exclude object has more then two xy variables, it will try to form a polygon. This may be
|
||||
helpful if you like to exclude complex figures like:
|
||||
|
||||
```js
|
||||
client
|
||||
.url('http://tumblr.com/themes')
|
||||
.webdrivercss('polygon', {
|
||||
name: 'startpage',
|
||||
exclude: [{
|
||||
x0: 120, y0: 725,
|
||||
x1: 120, y1: 600,
|
||||
x2: 290, y2: 490,
|
||||
x3: 290, y3: 255,
|
||||
x4: 925, y4: 255,
|
||||
x5: 925, y5: 490,
|
||||
x6: 1080,y6: 600,
|
||||
x7: 1080,y7: 725
|
||||
}],
|
||||
screenWidth: [1200]
|
||||
});
|
||||
```
|
||||

|
||||
|
||||
### Keep an eye on mobile screen resolution
|
||||
|
||||
It is of course also important to check your design in multiple screen resolutions. By
|
||||
using the `screenWidth` option WebdriverCSS automatically resizes the browser for you.
|
||||
By adding the screen width to the file name WebdriverCSS makes sure that only shots
|
||||
with same width will be compared.
|
||||
|
||||
```js
|
||||
client
|
||||
.url('http://stephencaver.com/')
|
||||
.webdrivercss('startpage', {
|
||||
name: 'header',
|
||||
elem: '#masthead',
|
||||
screenWidth: [320,640,960]
|
||||
});
|
||||
```
|
||||
|
||||
This will capture the following image at once:
|
||||
|
||||

|
||||
|
||||
**file name:** header.960px.png
|
||||
|
||||

|
||||
|
||||
**file name:** header.640px.png
|
||||
|
||||

|
||||
|
||||
**file name:** header.320px.png
|
||||
|
||||
Note 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.
|
||||
|
||||
```js
|
||||
// Example using Mocha
|
||||
it('should check the first page',function(done) {
|
||||
client
|
||||
.init()
|
||||
.url('https://example.com')
|
||||
// Make this name unique.
|
||||
.webdrivercss('page1', [
|
||||
{
|
||||
name: 'test',
|
||||
screenWidth: [320,480,640,1024]
|
||||
}, {
|
||||
name: 'test_two',
|
||||
screenWidth: [444,666]
|
||||
}
|
||||
])
|
||||
.end()
|
||||
.call(done);
|
||||
});
|
||||
|
||||
it('should check the second page',function(done) {
|
||||
client
|
||||
// ...
|
||||
// Make this name unique.
|
||||
.webdrivercss('page2', [
|
||||
// ..
|
||||
])
|
||||
// ...
|
||||
);
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Synchronize your taken Images
|
||||
|
||||
If you want to have your image repository available regardless where you run your tests, you can
|
||||
use an external API to store your shots. Therefor WebdriverCSS adds a `sync` function that downloads
|
||||
the repository as tarball and unzips it. After running your tests you can call this function again
|
||||
to zip the current state of your repository and upload it. Here is how this can look like:
|
||||
|
||||
```js
|
||||
// create a WebdriverIO instance
|
||||
var client = require('webdriverio').remote({
|
||||
desiredCapabilities: {
|
||||
browserName: 'phantomjs'
|
||||
}
|
||||
});
|
||||
|
||||
// initialise WebdriverCSS for `client` instance
|
||||
require('webdrivercss').init(client, {
|
||||
screenshotRoot: 'myRegressionTests',
|
||||
|
||||
// Provide the API route
|
||||
api: 'http://example.com/api/webdrivercss'
|
||||
});
|
||||
|
||||
client
|
||||
.init()
|
||||
.sync() // downloads last uploaded tarball from http://example.com/api/webdrivercss/myRegressionTests.tar.gz
|
||||
.url('http://example.com')
|
||||
|
||||
// do your regression tests
|
||||
// ...
|
||||
|
||||
.sync() // zips your screenshot root and uploads it to http://example.com/api/webdrivercss via POST method
|
||||
.end();
|
||||
```
|
||||
|
||||
This allows you to run your regression tests with the same taken shots again and again, no matter where
|
||||
your tests are executed. It also makes distributed testing possible. Regressions tests can be done not only
|
||||
by you but everyone else who has access to the API.
|
||||
|
||||
#### API Requirements
|
||||
|
||||
To implement such API you have to provide two routes for synchronization:
|
||||
|
||||
* [GET] /some/route/:file
|
||||
Should response the uploaded tarball (for example: /some/root/myProject.tar.gz)
|
||||
Content-Type: `application/octet-stream`
|
||||
* [POST] /some/route
|
||||
Request contains zipped tarball that needs to be stored on the filesystem
|
||||
|
||||
If you don't want to implement this by yourself, there is already such an application prepared, checkout
|
||||
the [webdriverio/webdrivercss-adminpanel](https://github.com/webdriverio/webdrivercss-adminpanel) project.
|
||||
It provides even a web interface for before/after comparison and stuff like this.
|
||||
|
||||
## Contributing
|
||||
Please fork, add specs, and send pull requests! In lieu of a formal styleguide, take care to
|
||||
maintain the existing coding style.
|
||||
|
||||
Default driver instance used for testing is [PhantomJS](https://github.com/ariya/phantomjs), so you need to either have
|
||||
it installed, or change it to your preferred driver (e.g., Firefox) in the `desiredCapabilities` in the `bootstrap.js`
|
||||
file under the `test` folder.
|
||||
|
||||
You also need a web server to serve the "site" files and have the root folder set to "webdrivercss". We use the
|
||||
[http-server package](https://www.npmjs.org/package/http-server).
|
||||
86
static/js/ketcher2/node_modules/webdriverio/docs/guide/plugins/webdriverjs-angular.md
generated
vendored
Normal file
86
static/js/ketcher2/node_modules/webdriverio/docs/guide/plugins/webdriverjs-angular.md
generated
vendored
Normal file
@ -0,0 +1,86 @@
|
||||
name: webdriverjs-angular
|
||||
# category: plugins
|
||||
tags: guide
|
||||
title: WebdriverIO - webdriverjs-angular
|
||||
---
|
||||
|
||||
# webdriverjs-angular [](https://travis-ci.org/webdriverio/webdriverjs-angular)
|
||||
|
||||
Functional test you angularjs application without having to `.pause()` or `.wait()`.
|
||||
|
||||
Based on [WebdriverIO](http://webdriver.io), you access
|
||||
the same API commands but you never have to `.pause()` between actions.
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
var webdriverjsAngular = require('webdriverjs-angular');
|
||||
var options = {
|
||||
desiredCapabilities: {
|
||||
browserName: 'chrome'
|
||||
},
|
||||
ngRoot: 'body' // main application selector
|
||||
};
|
||||
|
||||
webdriverjsAngular
|
||||
.remote(options)
|
||||
.init()
|
||||
.url('http://www.google.com')
|
||||
.title(function(err, res) {
|
||||
console.log('Title was: ' + res.value);
|
||||
})
|
||||
.end();
|
||||
```
|
||||
|
||||
For more options, usage and API details, see
|
||||
[WebdriverIO](http://webdriver.io).
|
||||
|
||||
## Why another webdriverjs lib?
|
||||
|
||||
1. webdriverjs-angular is based on an existing lib, it's extending
|
||||
[WebdriverIO](http://webdriver.io).
|
||||
|
||||
2. webdriverjs-angular is designed to work well with angularJS applications.
|
||||
AngularJS applications have a specific behavior that needs to be taken care
|
||||
of to provide easy e2e testing.
|
||||
|
||||
## How
|
||||
|
||||
`webdriverjs-angular` automatically waits for angularjs to [be ready](https://github.com/angular/angular.js/blob/cf686285c22d528440e173fdb65ad1052d96df3c/src/ng/browser.js#L70).
|
||||
|
||||
So you just have to worry about what you want to do in your tests, not when
|
||||
to do it.
|
||||
|
||||
## Why not use [angular/protractor](https://github.com/angular/protractor)?
|
||||
|
||||
Unlike [angular/protractor](https://github.com/angular/protractor) or
|
||||
[sebv/wd-tractor](https://github.com/sebv/wd-tractor),
|
||||
we do not enhance WebdriverIO API with angularJS-related
|
||||
command.
|
||||
|
||||
You will not find any `elementByNgBinding`, `addMockModule`,
|
||||
`hasElementByNgRepeaterRow` or any other specific, angularJS-related methods.
|
||||
|
||||
We think your functional tests should be as framework-agnostic as possible.
|
||||
|
||||
If you need `elementByNgBinding`, just use regular
|
||||
[WebdriverIO](http://webdriver.io)
|
||||
commands like `.element('[ng-binding=model]')`.
|
||||
|
||||
## Local testing
|
||||
|
||||
See [test/spec](test/spec).
|
||||
|
||||
```shell
|
||||
# you need multiple terminal window
|
||||
|
||||
# start a standalone selenium server
|
||||
npm install selenium-standalone phantomjs-prebuilt -g
|
||||
start-selenium
|
||||
|
||||
# start web server
|
||||
node test/app/scripts/web-server.js
|
||||
|
||||
# launch tests
|
||||
BROWSER=phantomjs npm test
|
||||
```
|
||||
189
static/js/ketcher2/node_modules/webdriverio/docs/guide/plugins/webdriverrtc.md
generated
vendored
Normal file
189
static/js/ketcher2/node_modules/webdriverio/docs/guide/plugins/webdriverrtc.md
generated
vendored
Normal file
@ -0,0 +1,189 @@
|
||||
name: webdriverrtc
|
||||
category: plugins
|
||||
tags: guide
|
||||
index: 2
|
||||
title: WebdriverRTC
|
||||
---
|
||||
|
||||
WebdriverRTC
|
||||
============
|
||||
|
||||
This project is an extension to [WebdriverIO](http://webdriver.io) and enables your client instance to grep statistical data from a running WebRTC peer connection. According to the [w3 WebRTC draft](http://www.w3.org/TR/webrtc/#dom-peerconnection-getstats) all `RTCPeerConnection` objects provide a method called [`getStats`](http://www.w3.org/TR/webrtc/#widl-RTCPeerConnection-getStats-void-MediaStreamTrack-selector-RTCStatsCallback-successCallback-RTCPeerConnectionErrorCallback-failureCallback) which returns a [`RTCStats`](http://www.w3.org/TR/webrtc/#idl-def-RTCStats) object with useful information about things like packet losts or the audio input level which can be helpful in order to test your network connection or environment (e.g. did my "Mute" button really work?).
|
||||
|
||||
This means that you can access all statistical data from `chrome://webrtc-internals` using Selenium as part of your integration tests.
|
||||
|
||||

|
||||
|
||||
## Prerequisites
|
||||
|
||||
To use WebdriverRTC you need at least WebdriverIO `>=v4`
|
||||
|
||||
## How does it work
|
||||
|
||||
WebdriverRTC masquerades the url command and injects a script after the page has been loaded to overwrite the standard `RTCPeerConnection` interface and get access to all created `RTCPeerConnection` objects. After you start analyzing it repeats calling the `getStats` method with a specific interval and saves all results to an internal object lying in the window scope. Then you can use WebdriverRTC commands to access these information. Currently only the Chrome browser is supported. But there's more to come.
|
||||
|
||||
## Example
|
||||
|
||||
First install WebdriverRTC via NPM:
|
||||
|
||||
```sh
|
||||
$ npm install webdriverrtc
|
||||
```
|
||||
|
||||
Then enhance your client instance using the `init` method:
|
||||
|
||||
```js
|
||||
// init WebdriverIO
|
||||
var matrix = require('webdriverio').multiremote({
|
||||
'browserA': {
|
||||
desiredCapabilities: {
|
||||
browserName: 'chrome'
|
||||
}
|
||||
},
|
||||
'browserB': {
|
||||
desiredCapabilities: {
|
||||
browserName: 'chrome'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var WebdriverRTC = require('webdriverrtc');
|
||||
WebdriverRTC.init(matrix, {
|
||||
browser: 'browserA' // define browser that collects data
|
||||
});
|
||||
```
|
||||
|
||||
Now start your selenium session and do everything required to establish a WebRTC connection. __Note__ that you need to run WebdriverIO in multiremote mode if you don't have something fancy that autoconnects your browser. Multiremote can be really helpful in these situations where you need to control more then one browser. After the connection was established run `startAnalyzing`, make a pause for a specific amount of time and then grab the stats for that time period.
|
||||
|
||||
```js
|
||||
matrix
|
||||
.init()
|
||||
.url('https://apprtc.appspot.com/r/' + channel)
|
||||
.click('#confirm-join-button')
|
||||
.pause(5000)
|
||||
.startAnalyzing()
|
||||
.getConnectionInformation(function(err, connectionType) {
|
||||
console.log(connectionType);
|
||||
})
|
||||
.pause(10000)
|
||||
.getStats(10000, function(err, mean, median, max, min, rawdata) {
|
||||
console.log('mean:', mean);
|
||||
console.log('median:', median);
|
||||
console.log('max:', max);
|
||||
console.log('min:', min);
|
||||
console.log('rawdata', rawdata); // contains the complete RTCStatsReport with even more information (mostly browser specific)
|
||||
})
|
||||
.end();
|
||||
```
|
||||
|
||||
## Commands
|
||||
|
||||
WebdriverRTC enhances your client with a small amount of new commands in order to use this plugin properly:
|
||||
|
||||
### startAnalyzing(<Function>)
|
||||
|
||||
Start with WebRTC analyzing. If you want to take stats of a specific RTCPeerConnection object you can use this function to return that object. Also necessary if your app creates an object immediatelly after the page got loaded.
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
browserA.startAnalyzing(function() {
|
||||
return appController.call_.pcClient_.pc_;
|
||||
});
|
||||
```
|
||||
|
||||
### getConnectionInformation(callback)
|
||||
|
||||
Get basic information about the connection. Example:
|
||||
|
||||
```js
|
||||
matrix.getConnectionInformation(function(connection) {
|
||||
console.log(connection);
|
||||
/**
|
||||
* returns:
|
||||
* {
|
||||
* "transport": "udp",
|
||||
* "remote": {
|
||||
* "candidateType": "local",
|
||||
* "ipAddress": "192.168.1.7",
|
||||
* "port": "52193"
|
||||
* },
|
||||
* "local": {
|
||||
* "candidateType": "local",
|
||||
* "ipAddress": "192.168.1.7",
|
||||
* "port": 55375
|
||||
* }
|
||||
* }
|
||||
*/
|
||||
});
|
||||
```
|
||||
|
||||
### getStats(duration)
|
||||
|
||||
Returns all stats within given duration in different formats.
|
||||
|
||||
#### duration
|
||||
You can specify a specific time frame in which you want to receive the stats. If you pass in a number you will receive stats within the last x (your number) ms. You can also be more specific and pass in an object with `from` and `to` attribues and desired timestamps as value respectively. If you pass in null, you will receive the last taken stat trace.
|
||||
|
||||
Type: *Number|Object*<br>
|
||||
|
||||
```js
|
||||
matrix
|
||||
.pause(10000)
|
||||
.getStats(10000).then(function(mean) {
|
||||
/**
|
||||
* this test would fail if you are too loud during the test ;-)
|
||||
*/
|
||||
assert.ok(max.audio.outbound.inputLevel < 1000, 'You are too loud!');
|
||||
expect(video.rtt).to.be.within(0, 15);
|
||||
});
|
||||
```
|
||||
|
||||
This is how an example result object does look like:
|
||||
|
||||
```json
|
||||
{
|
||||
"audio": {
|
||||
"inbound": {
|
||||
"bytesReceived": 31431,
|
||||
"jitter": 0.5,
|
||||
"packetsReceived": 295.83,
|
||||
"packetsLost": 0,
|
||||
"outputLevel": 8112.5
|
||||
},
|
||||
"outbound": {
|
||||
"jitter": 0.83,
|
||||
"rtt": 1.5,
|
||||
"packetsLost": 0,
|
||||
"packetsSent": 297,
|
||||
"bytesSent": 30884.33,
|
||||
"inputLevel": 465.33
|
||||
}
|
||||
},
|
||||
"video": {
|
||||
"captureJitterMs": 25,
|
||||
"encodeUsagePercent": 75,
|
||||
"frameWidthInput": 640,
|
||||
"captureQueueDelayMsPerS": 0.83,
|
||||
"bandwidth": {
|
||||
"actualEncBitrate": 160375,
|
||||
"availableReceiveBandwidth": 325032.67,
|
||||
"targetEncBitrate": 154050.5,
|
||||
"transmitBitrate": 160351.5,
|
||||
"retransmitBitrate": 0,
|
||||
"bucketDelay": 6.67,
|
||||
"availableSendBandwidth": 154050.5
|
||||
},
|
||||
"frameRateSent": 16,
|
||||
"avgEncodeMs": 8.5,
|
||||
"bytesSent": 71676.5,
|
||||
"frameWidthSent": 640,
|
||||
"frameHeightInput": 480,
|
||||
"rtt": 3.17,
|
||||
"frameHeightSent": 480,
|
||||
"packetsLost": 0,
|
||||
"packetsSent": 100,
|
||||
"frameRateInput": 14.5
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user