Integration Tests


#1

What is the easiest way to go about creating integration tests for an HTML5 application? I know selenium could be used to, but it would be a pain to have to click coordinates on a canvas. Especially when you consider that the canvas might be responsive.


#2

I just wrote out what we currently use at the moment:

I’d be happy to discuss what you want to test, and how we might all work to improve the options available


#3

What I’m looking for are tests that I could write using Selenium that could be used to test on various browsers.


#4

Perhaps for integration tests using Selenium, you could make sure that the embed is not responsive? I believe there are NPM packages designed for this type of testing that might make it simpler to use. Using the OpenFL NPM release might make it easier to integrate with these tools.

I haven’t done this with Selenium, but feedback from anyone who tries would be great


#5

I figured selenium was the best option, but I wanted to avoid entering coordinates manually because that’s just a pain. However, I found a neat article that uses opencv to extract coordinates from the page that can be used to click the canvas with selenium. It seems to work decently!


#6

Some feedback on the OpenCV approach:

  • Every click requires selenium to take a screenshot and OpenCV to do some computation which makes the tests run very slowly.
  • I had to crop the canvas out of the page to avoid accidentally matching images with the page (this makes it even slower)
  • Running headless mode doesn’t seem to be very stable
  • Validating text output is a challenge because you need an image for every variation

All and all this is a valid approach and is much easier than entering coordinates by hand.