Extent Reports - Collapse Parent Nodes to NOT see Child Nodes

Question

So I have just added Extent Reports (Version 4.0.6) to the testing framework and everything is looking great BUT there's just one thing I am trying to do which I don't know if it's even possible..

So basically, I know you can do this (logic isn't exact):

extentNode = extentTest.createNode(TestStep1);
reportExtentNode2 = extentNode.createNode(childParam1);
reportExtentNode2 = extentNode.createNode(childParam2);
reportExtentNode2 = extentNode.createNode(childParam3);

Which would look like this:

-Test Step 1
 --Child Node 1
 --Child Node 2
 --Child Node 3

-Test Step 2
 --Child Node 1
 --Child Node 2

This layout is great, but I don't want to see the child nodes unless I click on the parent node..

-Test Step 1 (3 x Child Nodes hidden)
-Test Step 2 (2 x Child Nodes hidden)

It looks that it can be done (sort of) if I edit the HTML (I think it's the HTML part) of the file.. But I'd like to be able to get it right without having to edit the file like that..

score 1 · Answer 1 · answered Mar 11 '21 at 16:14

1

I think the following snippet should work (tested with 4.0.9):

$('.detail-head').next().find('.accordion > .card').find('.accordion').hide();
$(document).ready(function() {
  $('.card-header').click(function() {
    $(this).siblings('.accordion').toggle()
  });
});

In order to execute it you need to use the instance of ExtentSparkReporter or ExtentHtmlReporter and call reporter.config().setJS(yourSnippet)

answered Mar 11 '21 at 16:14

partarstu

11
1

Thank you for this. Will definitely be giving it a try! – Eitel Dagnin Mar 11 '21 at 16:21

score 0 · Answer 2 · answered Jan 06 '21 at 06:24

It's possible, below is a snippet that works with the latest version 5 with mouseover/mouseout (can be changed to click):

$('.test-item').click(function() {
  $('.detail-head + div > .accordion').find('.accordion').addClass('d-none');
});

$('.test-content-detail').mouseover(function(evt) {
  var t = $(evt.target);
  if (t.is('.detail-head + div > .accordion > .card') || t.is('.detail-head + div > .accordion > .card > .card-header')) {
    $(this).find('.accordion').removeClass('d-none');
  }
})

$('.test-content-detail').mouseout(function(evt) {
  var t = $(evt.target);
  if (t.is('.detail-head + div > .accordion > .card')) {
    $('.detail-head + div > .accordion').find('.accordion').addClass('d-none');
  }
})

Note: the above is not a ready-made solution but can be further customized to build out this behavior.

Thank you for the answer. Just a couple of things.. 1) Will this work for the version in my question? (Version 4.0.6) 2) Where/how do I implement this code? — Eitel Dagnin, Jan 06 '21 at 07:15

Extent Reports - Collapse Parent Nodes to NOT see Child Nodes

2 Answers2