jeudi 3 novembre 2016

Test moving/dragging elements via webdriver

I'm using drag-mock (http://ift.tt/2ethEus) to move elements and webdriver.io/chimp as my testing framework.

npm install drag-mock --save-dev

This is what I come up with:

import dragMock from 'drag-mock';

describe('Test', () => {
    before('setup', (done) => {
        dragMock.extendWebdriver(browser);
        dragMock.loadLibrary(browser);
    });

    describe('element', () => {
        it('should be moved', (done) => {
            dragMock
                .dragStart('#canvas g.element')
                .drop('#canvas', { clientX: 10, clientY: 10 });

            done();
        });
    });
});

But I get the error Error: Expected first parameter to be a targetElement. Instead got: #canvas g.element

The readme file gives me this example:

var dragMock = require('drag-mock');
var webdriverio = require('webdriverio');

var webdriver = webdriverio.remote({ desiredCapabilities: { browserName: 'chrome' } }).init();

// set up webdriver.dragStart(), webdriver.dragOver(), webdriver.dragLeave() and webdriver.drop()
dragMock.extendWebdriver(webdriver);

// load the drag-mock library into the browser context
dragMock.loadLibrary(webdriver);

// drag and drop
webdriver
  .dragStart('#my-drag-source', { clientX: 200, clientY: 300 })
  .delay(250)
  .drop('#drop-zone', function(error) {
    if (error) {
      console.error(error);
    }
  });

So I don't understand what I'm doing wrong as I think I'm doing the same thing as it is done in the example code...

Background infos

I'm trying to build an JS-application (with meteor framework) for creating some flowcharts. Therefore I'm using jointJS. (Example for how it could look like: http://ift.tt/2fmPrDp)

Now I want to write the tests for this application: I'm using Mocha and webdriver.io for doing my acceptance tests.

With this I want to move an element to a specific position. As far as I know it is not possible to do this with plain webdriver.io: I would like to move an element x pixel to the left and y pixel to the top.

Aucun commentaire:

Enregistrer un commentaire