Drag and Drop with Electron/Webdriver

Viewed 63

I'm trying to write a test for an electron app that tests a drag and drop feature. I've tried two different methods. Webdriver's native dragAndDrop method and also with performActions. However in both cases, nothing seems to happen. The element doesn't seem to move even though it will work fine if I drag it manually when using the app. I'm currently using:

"react-beautiful-dnd": "^13.1.0", "electron": "^9.4.3", "electron-chromedriver": "^11.0.0", "mocha": "^8.2.1", "react": "^16.4.0", "selenium-webdriver": "^4.0.0-beta.1", "spectron": "^11.0.0", "spectron-keys": "0.0.1",

Here's what the test looks like when I use perform actions:

it('should display the correct string when the rows are dragged and dropped in a different order', async () => {
        const correctString = '"Field3": Value3^4 & "Field1": Value1^2 & "Field2": Value2^3'
        const target = await app.client.$('[id="search_input"]');
        const sourceElement = await app.client.$('[id="row_1"]');

        //function to get coordinates of the source element and the target.
        const getCoordsForElement = async (elementId) => {
            const rect = await app.client.getElementRect(elementId);
            const X = parseInt(rect.x + (rect.width / 2), 10);
            const Y = parseInt(rect.y + (rect.height / 2), 10);
            return [X, Y];
            };

        const [sourceX, sourceY] = await getCoordsForElement(sourceElement.elementId)
        const [targetX, targetY] = await getCoordsForElement(target.elementId)
        const [diffX, diffY] = [targetX - sourceX, targetY - sourceY]

        await app.client.performActions([{
            type: 'pointer',
            id: 'finger1',
            parameters: { pointerType: 'mouse' },
            actions: [
                { type: 'pointerMove', duration: 0, x:sourceX , y:sourceY },
                { type: 'pointerDown', button: 1 },
                { type: 'pause', duration: 500 },
                { type: 'pointerMove', duration: 1000, origin: "pointer", x: diffX, y: diffY },
                { type: 'pointerUp', button: 1 }
            ]
        }]);

        await app.client.pause(1000)
        const text = await searchInput.getValue()
        console.log("TEXT: ", text)
        assert.strictEqual(text, correctString, `Expected the correct string to be "${correctString}".  Instead it was "${text}".`)
    })

And here's what the test looks like when I try to use the drapAndDrop method:

it('should display the correct string when the rows are dragged and dropped in a different order', async () => {
        const correctString = '"Field3": Value3^4 & "Field1": Value1^2 & "Field2": Value2^3'
        const target = await app.client.$('[id="search_input"]');
        const sourceElement= await app.client.$('[id="row_1"]');

        await sourceElement.dragAndDrop({x: -247, y: -210})

        await app.client.pause(1000)
        const text = await searchInput.getValue()
        console.log("TEXT: ", text)
        assert.strictEqual(text, correctString, `Expected the correct string to be "${correctString}".  Instead it was "${text}".`)
})

0 Answers
Related