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

Help

Home

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

Show: Today's Messages :: Show Polls :: Message Navigator

System UI tests for Sprotty [message #1863404]

Wed, 31 January 2024 17:57

Louis Detweiler

Messages: 100
Registered: August 2017

Senior Member

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

Report message to a moderator

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

Wed, 31 January 2024 18:56

Philip Langer

Messages: 99
Registered: March 2015
Location: Vienna, Austria

Member

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

--
Philip Langer

Get professional Eclipse developer support:
http://eclipsesource.com/en/services/developer-support/

Report message to a moderator