范围报告 - 折叠父节点以看不到子节点

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..

Answer 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)

Answer 2

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.