3

I am trying to write a TestCafe functional test around drag and drop. I already have drag and drop working and I am trying to test the source/target functionality by trying to drag an element onto a part of the screen it is not allowed to drop. The mouse cursor shape changes to the "No entry" symbol when the drop is not permitted during the mouse hover. I cannot see anywhere in the TestCafe documentation where I can interrogate the mouse cursor icon shape.

I cannot see any documentation on this in TestCafe.
Does TestCafe support this?

Thanks Mark

Alex Skorkin
  • 4,264
  • 3
  • 25
  • 47
MarkW
  • 51
  • 3

1 Answers1

2

TestCafe selectors specify an element on the testing page and return an object with a set of properties and methods to the server. Read more about Selector's properties in TestCafe docs.

You can use the getStyleProperty method to verify the cursor style of an element, e. g.

.expect(Selector('div').getStyleProperty('cursor')).eql('no-drop');

In any other cases, when you need to get specific information about a DOM element, you can use a combination of ClientFunction and Selector. This scenario may look as follows:

const el = Selector('#editable-div');

    const getCursorStyle = ClientFunction(() => {
        return window.getComputedStyle(el()).cursor;
    }, {dependencies: {el}})

    await t
        .drag(Selector('#create'), -14, -255, {
            offsetX: 38,
            offsetY: 11
        })
        .expect(getCursorStyle()).eql("no-drop");

You can even use a more advanced approach - implementing addCustomDOMProperties, especially if you need to check the added property several times.

Helen Dikareva
  • 1,026
  • 6
  • 7