Hello, I’m using D3 collapsible tree and wondering how integration testing would work with that ? I’ve been trying TestRigor which seems to rely on element ID to record click actions etc. Not sure if this can work with tree nodes ?
I would first re-consider if selecting based on ID is really the approach your want. I’m not familiar with TestRigor, but most integration test tools that I’ve worked with encourage selecting elements based on the way that users experience a page instead of invisible attributes of the DOM. That is, by selecting on things like labels, visual position, and accessibility attributes.
If that’s not an option, then because the collapsible tree is made with D3, you can modify the D3 code to assign unique identities to the elements you want to interact with. You’ll have to be careful to make these both unique (since that is require for IDs) but also stable so your integration test can find them reliably. If you have more specific code you’d like to share I might be able to suggest exac
Thanks, this is what TestRigor are hinting at, hopefully it will become clearer. Right now I need to record a click on an ‘info’ node, these are attached to 50% of the main branching nodes in the tree, so selecting simply by that name is not an option. I’m starting with the TestRigor chrome extension, which is similar to the selenium browser recording extension
@mythmon hello again, I’ve been trying Selenium IDE for testing D3 collapsible trees. All node clicks are replayable via commands click id=uniqueID.
The issue now is this only works with selenium breakpoints between each step where there is an animation. I tried all relevant selenium commands to wait, including executing JS setTimeout, but to no avail.
Any suggestions appreciated.
Unfortunately I don’t have a lot of experience with Selenium, so I can’t offer any specific advice. If Selenium doesn’t already do it, selecting elements from the page multiple times with a timeout is often useful, since the DOM can take some time to settle.
If you have specific Selenium code to share, I could take a look, but this might be something more suited for a Selenium forum.
selecting elements from the page multiple times with a timeout: yes that’s worth a try - thanks
@mythmon I’m wondering if it’s practical to do integration testing of D3 SVG animations ?So far it seems manual testing is less time consuming.
That’s not something I can answer for you. It depends on your risk tolerance, engineering practices, and familiarity with the testing tool. If you need these animations to be robust and continue working as their code and the code around them changes, then some degree of automated testing can be a worthwhile long term investment. However, automated testing generally has a higher up front cost, which may not make sense for the feature you’re working on. On the other hand, on-going manual testing can be difficult if you don’t have staff that can manage it. The long term cost can grow large if the animation is a part of the product that will be around for a while.
Ultimately, it can be difficult to have automated tests for code that was not designed to be tested automatically. That’s not something that changes between D3, React, or any other technology. If automated testing is important to you, then it has to be pervasive throughout your process.
The most established systems for testing front end JS seems to be Selenium IDE or Selenium Webdriver. Neither of those are particularly helpful right now but I’ll keep them in mind.
Thanks for your replies
Today I’m trying Selenium side runner, a new innovation, it uses node.js but later versions of that break it !
It runs tests recorded in selenium ide through selenium Webdriver, so no programming required.
Other problems now arise that were not present with selenium ide.
All seems very fragile.
Can anyone discuss automated testing that’s useful with a D3 intensive web app ?
Java selenium webdriver under testng is turning out good for detecting problems via selenium JavaScriptExecutor to test variables in running js. To detect uncaught exceptions I tried wrapping my D3 classes in Proxy which catches exceptions and writes them to a variable that JavaScriptExecutor can access.
This was going well until I discovered animations are lost if crucial classes are wrapped: the diagram just jumps from 1 state to the next, with no error.
Maybe someone here can take a guess or better ? Thanks