Automation on JointJS paper elements using cypress

[Pavan90]

Hey Guys,

Any work examples or possibilities that we can able to write automation test cases using JointJS. I need to automate dragging paper elements, link those elements. I am using Cypress as an automation framework. Regardless of which framework I use, I would like to know if this is even possible with any framework ? I don't see any blogs or stackoverflow posts on automation of jointjs so I am not sure if anybody ever done it. Need help here. Thank you.

[jamesgeorgewilliams]

Hi,

It's certainly possible to automate UI testing with JointJS. There aren't limitations to which framework you can use.

Currently we are preparing some tutorials about e2e testing with JointJS, but it is not released yet.

The first tutorial uses a microsoft project Playwright. https://playwright.dev/

We have good experiences with it for testing dragging and linking elements, etc. But this is definitely possible in Cypress too.

In Playwright, you could test dragging elements to a target area using the following method for example:
https://playwright.dev/docs/api/class-locator#locator-drag-to

test('Drag element to target location', async ({ page }) => {
    const source = page.locator('.source');
    const target = page.locator('.target');
    await source.dragTo(target);

    const sourceBBox = await source.boundingBox();
    const targetBBox = await target.boundingBox();
    
    // If top-left inner box corner is inside the outer box
    expect(targetBBox.x).toBeLessThan(sourceBBox.x);
    expect(targetBBox.y).toBeLessThan(sourceBBox.y);

    // If bottom-right inner box corner is inside the outer box
    expect(sourceBBox.x + sourceBBox.width).toBeLessThan(targetBBox.x + targetBBox.width);
    expect(sourceBBox.y + sourceBBox.height).toBeLessThan(targetBBox.y + targetBBox.height);
});

In Cypress, similar behaviour could be emulated using trigger().
https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__drag-drop

In Playwright, the following test could be used to draw a link from a port to another element. Again, with Cypress
you could use trigger() to create a similar test.

test('Link Elements', async ({ page }) => {
    const source = page.locator('.port-out');
    const sourceBBox = await source.boundingBox();

    // Element has attribute [magnet=false]
    const target1 = page.locator('.target-magnet-false');
    const target1BBox = await target1.boundingBox();

    // No link should be present in DOM
    const link = page.locator('.joint-type-standard-link');
    await expect(link).toHaveCount(0);

    // Mousemove to center of element
    await page.mouse.move(sourceBBox.x + sourceBBox.width / 2, sourceBBox.y + sourceBBox.height / 2);
    await page.mouse.down();
    await page.mouse.move(target1BBox.x + target1BBox.width / 2, target1BBox.y + target1BBox.height / 2);
    await page.mouse.up();

    // A link still shouldn't exist as target has attribute [magnet="false"]
    await expect(link).toHaveCount(0);

    // Element has attribute [magnet=true]
    const target2 = page.locator('.target-magnet-true');
    const target2BBox = await target2.boundingBox();

    // Mousemove to center of element
    await page.mouse.move(sourceBBox.x + sourceBBox.width / 2, sourceBBox.y + sourceBBox.height / 2);
    await page.mouse.down();
    await page.mouse.move(target2BBox.x + target2BBox.width / 2, target2BBox.y + target2BBox.height / 2);

    // A highlight should now display on the target element to show a connection is possible
    const highlight = page.locator('.joint-highlight-stroke');
    await expect(highlight).toHaveCount(1);

    await page.mouse.up();

    // A link should now exist as target has attribute [magnet="true"]
    await expect(link).toHaveCount(1);
});

A very useful feature to understand when testing UI with JointJS is markup.

It allows you to create custom classes easily, so you can target the correct elements.

const source = new shapes.standard.Rectangle({
    markup: [{
        tagName: 'rect',
        selector: 'body',
        className: 'source'
    }, {
        tagName: 'text',
        selector: 'label'
    }]
});

We hope to release the first tutorial with Playwright soon, and we will certainly link it here with another comment when it is released.

I hope this provides you with enough inspiration for the moment.

Thanks,

James

[Pavan90]

Thank you James!! Really appreciate you taking your time to share this. Will try it and let you know soon.

[jamesgeorgewilliams]

A tutorial for E2E testing with JointJS & Playwright can be found here:
https://resources.jointjs.com/tutorial/testing-e2e-playwright

[santiagocxa]

Hi James,
from your experience it is possible to test jointjs with react testing library and jest.js
when mounting a component with react and jointjs it generates error when adding elements to the graph.
I have doubts if this library allows it since I can't find documentation on this

I really appreciate any comment on this

happy day for you

[jamesgeorgewilliams]

There aren't any limitations for which testing libraries you use with JointJS.

Jest uses JSDOM which doesn't support a lot of SVG APIs, so you can run into issues.
jsdom/jsdom#918 (There are a lot of discussions about this on the JSDOM github account)

We have fixed some of the issues we ran into with Jest in the following public repository(create-react-app was used). It uses JointJS+, but the fixes will be applicable to the core JointJS library too.
https://github.com/clientIO/joint-plus-tutorial-react

The following PR for that repository covers some of the issues we faced:
clientIO/joint-plus-tutorial-react#3

If that doesn't cover some of your issues, feel free to create a new discussion with any details/examples you can.

[santiagocxa]

James thank you very much for the information, I will validate it