Added onScreenWidthChange functionality

[kevinlambert]

Hi. Don't know what you think of this?

Our code hides mouse hover elements when the window is resized. In this case a tooltip. We can get the tooltip to show but then webdrivercss resizes the window it disappears and a screenshot with the tooltip hidden is taken. This onScreenWidthChange event allows us to show the tooltip after each webdrivercss window resize.

[christian-bromann]

@kevinlambert Hi! Thanks for the contribution. Can you explain a little bit more why onScreenWidthChange is useful?

[kevinlambert]

@christian-bromann no problem

• Often we listen to the window.onresize event to modify elements.
• When there are multiple breakpoints WebdriverCSS changes the size of the window, and therefore the onresize event is fired.
• the problem occurs when we want to take a screenshot of an element that is effected by the onresize event (in our particular instance it's a tooltip).

Example:

describe('Order tooltip', function() {
    var placeOrderAndPayButton = 'div:nth-child(2) > div:nth-child(1)';
    var tooltip = 'div.tooltip';

    it('Place order and pay tooltip', function() {
        return browser
            .url('/order')
            .moveToObject(placeOrderAndPayButton)
            .webdrivercss('order-tooltip', [
                {
                    name: 'tooltip',
                    elem: tooltip,
                    screenWidth: [993, 1200]
                }
            ], function(err, res) {
                expect(err).to.not.exist;
                expect(res).to.be.withinMisMatchTolerance;
            });
    });
});

We display the tooltip with .moveToObject(placeOrderAndPayButton) but as soon as webdrivercss changes the window size then the tooltip disappears. The screenshot therefore captures nothing (or the wrong part of the screen).

The solution:

describe('Order tooltip', function() {
    var placeOrderAndPayButton = 'div:nth-child(2) > div:nth-child(1)';
    var tooltip = 'div.tooltip';

    it('Place order and pay tooltip', function() {
        return browser
            .url('/order')
            .moveToObject(placeOrderAndPayButton)
            .webdrivercss('order-tooltip', [
                {
                    name: 'tooltip',
                    elem: tooltip,
                    screenWidth: [993, 1200],
                    onScreenWidthChange: function(browser) {
                        browser
                            .moveToObject(placeOrderAndPayButton);
                    }
                }
            ], function(err, res) {
                expect(err).to.not.exist;
                expect(res).to.be.withinMisMatchTolerance;
            });
    });
});

This now allows us to set the tooltip after every window resize and the tooltip screenshot is then correct.

Other possible enhancements (Not yet implemented in the pull request): If the actual screenWidth is passed to the onScreenWidthChange function you could perform changes for that specific breakpoint.

onScreenWidthChange: function(browser, size) {
    if(size === 993) {
        browser.click('div.a');
    } else if(size === 1200) {
        browser.click('div.b');
    }
}

[kevinlambert]

@christian-bromann any chance of merging this?