action #34195

Replace "candidate needles combo box" in test details with popup containing tags/needles

Added by mkittler over 2 years ago. Updated about 2 years ago.

Feature requests
Target version:
Start date:
Due date:
% Done:


Estimated time:


This ticket summarizes how the screenshot/needle diff should be improved. Basically, the current "candidate combo box" should be replaced with:

  • popup with nested list list of tags/needles
    • multiple links per row
    • copyable items (requested by okurz)
    • possibility for more "high level" information beside the tags
    • see coolos comment for an example
  • label showing the current selection, eg. "Full needle diff for ..."
  • different diffs (purpose for wanting multiple links in a row)
    • "normal diff": what we have now
    • "full diff": needle is fully visible, not only the actual area (sometimes the full context is useful)

Related issues

Related to openQA Project - action #15030: highlight actually matched tag in multi-tag needle tag info popupResolved2016-11-25


#1 Updated by mkittler over 2 years ago

  • Related to action #15030: highlight actually matched tag in multi-tag needle tag info popup added

#2 Updated by mkittler over 2 years ago

  • Status changed from New to In Progress
  • Assignee set to mkittler

#3 Updated by szarate over 2 years ago

  • Category set to 124
  • Target version set to Current Sprint

#4 Updated by mkittler about 2 years ago

development branch:

I ported this to Bootstrap 4, too. It basically works now and looks like this:


However, I've noticed some usability issues. Things the combo box provided 'out-of-the-box' like switching quickly between the screenshots using the arrow keys still need to be implemented.

Also, the full diff isn't implemented yet, just the button.

What should happen when clicking on an item and not one of the buttons? I would say it should just switch the screenshot and keep the previous diff mode. The initial diff mode would be what we have right now.

#6 Updated by mkittler about 2 years ago

  • Status changed from In Progress to Feedback

The automatic tests pass now. It can also be tested manually on e212, eg. under there's an example with multiple tags. The following should work now:

  • So now there are 3 different views:
    • just the screenshot (previously the 'None' entry)
    • regular diff on matches (the only diff we had previously)
    • full diff: needle with original areas on left side, screenshot with matches on right side
  • Usability is pretty much as it was before (menu closes again on selection, keyboard shortcuts).
  • okurz All text is selectable so you can copy tag and needle names.

Further ideas (still TODO) which go beyond the ticket description:

  • Allow to distinguish excluded needles.
  • Add more extensive UI tests. Currently we only test whether candidates are displayed as expected but not really whether the diff actually works. Note that adding such tests would likely result in just adding checks for lots of internal variables used by the JavaScript. Or maybe we can extend the openQA-in-openQA test?
  • Adjust details based on your feedback (like changing the button icons, change the wording used on tool tips, ...).
  • Display even more information. The drop down is fully customizable now.
  • Check whether documentation should be updated. Maybe we can also add tooltips or help popovers directly on the page.

#7 Updated by szarate about 2 years ago

  • Status changed from Feedback to Resolved

#8 Updated by szarate about 2 years ago

  • Target version changed from Current Sprint to Done

Also available in: Atom PDF