Eclipse Community Forums: Eclipse Sprotty » System UI tests for Sprotty

Home » Eclipse Projects » Eclipse Sprotty » System UI tests for Sprotty

System UI tests for Sprotty [message #1863404]

Wed, 31 January 2024 12:57

Eclipse User

Hello,

I was wondering what is the best way to write system UI tests for Sprotty. I have looked into using Playwright, and tried to write a simple test for the hello-world Sprotty example project. However, when trying to drag one of the nodes with Playwright by getting one of the nodes by id, it failed.

Looking at the html of the hello world Sprotty example it seems there is just a single div with id sprotty-diagram. I was able to get this object but seemed unable to access anything within the diagram.

This very much could just be a problem of me not knowing how to use Playwright correctly, so I guess my question is just should one be able to use Playwright for UI tests for Sprotty diagrams, and if not, is there a different UI test framework I could use?

Thank you,

Louis

Re: System UI tests for Sprotty [message #1863410 is a reply to message #1863404]

Wed, 31 January 2024 13:56

Eclipse User

Hi Louis,

Have you tried using the Playwright `codegen`, in particular for generating locators (see https://playwright.dev/docs/codegen-intro#generating-locators)?

In general, using Playwright for testing Sprotty diagrams is certainly possible. We do that frequently in the context of GLSP (which uses Sprotty on the client).
It is sometimes is just a bit cumbersome to work with plain SVG in Playwright and especially for edges as they don't have a logical relation to source and target nodes when looking just at the DOM. We usually solve that by adding additional attributes to the DOM in Sprotty postprocessors.

Therefore, we have a framework simplifying doing that in the context of GLSP (see https://github.com/eclipse-glsp/glsp-playwright), and here is an example for adding metadata in a postprocessor to help with edges: https://github.com/eclipse-glsp/glsp-client/blob/master/packages/client/src/features/svg-metadata/metadata-placer.ts

Hope this helps to get started!

Best wishes,

Philip

Re: System UI tests for Sprotty [message #1863424 is a reply to message #1863410]

Thu, 01 February 2024 13:29

Eclipse User

Excellent. Thank you for these references!

Louis

Previous Topic:	Using compartments with labels and buttons and in an elk-layouted graph
Next Topic:	Regarding the sprotty-vscode update

Goto Forum:

-=] Back to Top [=-

Current Time: Fri Oct 31 13:12:22 EDT 2025

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter