CODEWITHSUNDEEP
javascriptnpmwebdriver-io
Anjani Kumar
Anjani Kumar

Reputation: 396

How to highlight WebElement in webdriverIO?

I need to highlight webelements that are to be interacted / asserted.

Is there any webdriverIO service for this or is there some javascript code like there is javascript executor in Selenium.

Upvotes: 2

Views: 1391

Answers (1)

Akif
Akif

Reputation: 7650

There is a way to highlight the asserted webelement. As mentioned here:

'use strict';

var _ = require('underscore');
var async = require('async');

var highlight = function (elements, callback) {

    if (!window.jQuery) {
        return callback();
    }

    var unhighlightable = [
        ':checkbox',
        ':radio'
    ];

    var $element = window.jQuery(elements).first();

    for (var i = 0, l = unhighlightable.length; i < l; i++) {

        if ($element.is(unhighlightable[i])) {
            $element = $element.parent();
            break;
        }
    }

    var restore = {
        backgroundColor: $element.css('backgroundColor')
    };

    $element.animate({
        backgroundColor: '#ffff00'
    }, 200, function () {
        $element.delay(100).animate(restore, 200, callback);
    });
};

/**
 * Wait for an element, selected by CSS or XPath selector, for the provided
 * amount of milliseconds to be highlighted with jQuery. If multiple elements
 * get queryied by the given selector, only the first element will be animated.
 * If jQuery is not installed in the host system, nothing happens.
 * @param {String} selector Selector that matches elements to hightlight
 */
module.exports = function (selector) {

    // Make sure that callback contains chainit callback
    var callback = _.last(arguments);

    if (!_.isString(selector)) {
        return callback(new Error('Number or type of arguments do not agree with "highlight" command.'));
    }

    var self = this;
    var timeout = 5000;
    var payload = {};

    async.waterfall([

        function (callback) {
            self.timeoutsAsyncScript(timeout, callback);
        },

        function (response, callback) {
            payload.timeoutsAsyncScript = response;
            self.moveToObject(selector, callback);
        },

        function (value, response, callback) {
            payload.moveToObject = response;
            self.selectorExecuteAsync(selector, highlight, callback);
        }

    ], function (error, value, response) {
        payload.selectorExecuteAsync = response;
        callback(error, payload);
    });
};

And then:

  this.client.addCommand('highlight', require('./path/to/above/module'));
  this.client.highlight('#element').click('#element');

or:

// not tested
module.exports = function (selector) {
    var callback = _.last(arguments);
    async.waterfall([
        this.highlight.bind(this, selector), 
        this.click.bind(this, selector)
    ], callback);
}

// later on...
this.client.addCommand('press', require('path/to/module/that/highlights/and/clicks'));
// later on..
this.client.press('#element');

Upvotes: 1

Related Questions