如何在 webdriverIO 中突出显示 WebElement？

Question

我需要突出显示要交互/断言的 web 元素。

是否有任何 webdriverIO 服务，或者是否有一些 javascript 代码，例如 Selenium 中的 javascript 执行器。

Answer 1

有一种方法可以突出显示断言的 web 元素。如前所述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);
    });
};

然后：

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

或：

// 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');