Ideas/Approaches for automated UI testing?

Design Lounge
1

Hi folks!

A web developer here working primarily on the front end.

We were having a discussion today about the best tools for automated UI testing.
Our main goal is to have a robust UI that doesn’t glitch on incorrect interactions by the user.
The application we focus on has about 30% as conventional HTML elements and 70% as a 3D view (using threejs) in the browser. Both are operating on the same underlying data and needs to have consistent behaviour across both parts. (eg selecting something on the 2D side also highlights the corresponding element on the 3D side). Here’s a screenshot to give you an idea.

image
image1916×872 197 KB

Coming back to the topic of automated UI testing, does anyone have experience setting it up for projects?
Ideally we want it to run on a headless server as a part of our CI/CD pipeline and if possible allow us to create the tests by "record"ing it instead of coding it. (Please tell me if that’s a bad idea).

Or if there are any other approaches others have played around with, would be glad to know.
Thanks!

2

I only have touched on it, so what I know is this:

  • There are tools like selenium which can simulate user interactions
  • Do as much as possible in functional data manipulation, which is easy to (unit-)test and as few as possible directly dependent on output or input (“side effects”) – I guess react or elm are architectures that allow this.
1 Like
3

Have a look at Cypress! We’re running end-to-end testing across our apps every time before we publish a new release.

2 Likes
4

That looks fantastic!
Exactly what we were looking for.
Thank you :slight_smile: