4

I am using testcafe for my end to end testing. I am currently testing my slider component and use the drag function, but for some reason it is not moving even though it shows the cursor moving.

This is my rough code:

const slider = Selector('#slider');
const sliderThumb = Selector('#slider-thumb');

test('Dragging Slider', async t => {
    await t
        .expect(slider.value).eql('50')
        .drag(sliderThumb, 30, 0)
        .expect(slider.value).eql('70');
});

I expect the slider thumb to move, but it is not moving. Any tips will be appreciated, thanks!

Alex Skorkin
  • 4,264
  • 3
  • 25
  • 47
Wilbert
  • 149
  • 7

1 Answers1

2

Try to add a .click('#i-tried-testcafe'); after the await.

const slider = Selector('#slider');
const sliderThumb = Selector('#slider-thumb');

test('Dragging Slider', async t => {
    await t
        .click('#i-tried-testcafe');
        .expect(slider.value).eql('50')
        .drag(sliderThumb, 30, 0)
        .expect(slider.value).eql('70');
});

For more information: https://devexpress.github.io/testcafe/documentation/test-api/actions/drag-element.html

LuVu
  • 1,053
  • 1
  • 7
  • 23