"The element that matches the specified selector is not visible" error on attempt to drag visible element

[samuelsh]

Are you requesting a feature or reporting a bug?

bug

What is the current behavior?

Trying to drag "seekbar knob" selector raising: "The element that matches the specified selector is not visible" error

What is the expected behavior?

Should be able to perform drag operation

How would you reproduce the current behavior (if this is a bug)?

Provide the test code and the tested page URL (if applicable)

Tested page URL: https://kabbalahmedia.info/en/lessons/cu/iIqZE7y7?language=en

Test code

test('timeCodeUpdateByDrag', async t => {

    const getSeekbarRect = ClientFunction((selector) => {
        const {top, left, bottom, right} = document.querySelector(selector).getBoundingClientRect();
        return {top, left, bottom, right};
    });

    await player_utils.waitForPlayerToLoad();
    let rect = await getSeekbarRect('.seekbar__knob');

    console.debug("Rect >> top: " + rect.top + " left: " + rect.left + " bottom: " + rect.bottom +
        " right: " + rect.right);

    let current_mouse_x = rect.left + ((rect.right - rect.left) / 2);
    let current_mouse_y = rect.top + ((rect.top - rect.bottom) / 2);

    const seekbarSelector = await Selector('.seekbar__knob');
    await t.drag(seekbarSelector, current_mouse_x + 100, parseInt(current_mouse_y));

});

Specify your

• operating system: MacOS HighSierra
• testcafe version:0.21.1
• node.js version:9.8

[AndreyBelym]

Hi @samuelsh, I've reproduced the issue. @AlexKamaev, could you please take a look at this?

[AlexKamaev]

Hi @samuelsh
I've found that the element with class .seekbar__knob initially has width and height equal to 0. Since Testcafe considers elements with zero dimensions invisible, it can't initiate a drag action on an invisible element.
To overcome this, define ClientFunction and set the element's width and height inside it to 1.
Please see the example below:

    const setHeight = ClientFunction((selector) => {
        const el = document.querySelector(selector);

        el.style.width = '1px';
        el.style.height = '1px';
    });

    await setHeight('.seekbar__knob');
    await t.drag(seekbarSelector, current_mouse_x + 100, parseInt(current_mouse_y));

[AndreyBelym]

As I see, the problem is that the seekbar knob isn't the <div> element with class seekbar__knob, but a ::before [pseudoelement] of the .seekbar__knob. It's actually a big enhancement, so I close this issue, and you can track progress using the #2813 enhancement issue instead.

Also, you shouldn't calculate knob position with a ClientFunction. The arguments of t.drag are relative to the dragging start point, so you can just use t.drag(seekingKnob, 100, 0).

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or feature requests. For TestCafe API, usage and configuration inquiries, we recommend asking them on StackOverflow.