Merge pull request #138 from prashanth-sams/refactor

#115

Author: prashanth-sams

.gitignore

@@ -9,7 +9,6 @@ pytest_html_reporter/__pycache__/
 pytest_html_reporter.egg-info/
 tests/__pycache__/
 dist/
-xtests/
-ytests/
-ztests/
-report/
+test_draft/
+report/
+__pycache__/

CHANGELOG.txt

@@ -1,6 +1,11 @@
 Change Log
 ==========
 
+0.1.7 (08/09/2020)
+-------------------
+- Screenshots on failure
+- Updated loader
+
 0.1.6 (29/08/2020)
 -------------------
 - pytest-rerunfailures library support

README.rst

@@ -35,6 +35,7 @@ Features
     - Suite Highlights
     - Test suite details
 - Archives / History
+- Screenshots on failure
 - Test Rerun support
 
 Installation
@@ -82,6 +83,10 @@ Alternate option is to add this snippet in the ``pytest.ini`` file::
 
 .. image:: https://i.imgur.com/ge6OCM6.gif
 
+|
+
+.. image:: https://i.imgur.com/b1UFgHc.gif
+
 
 Is there a demo available for this gem?
 ------------------------------------------------

pytest_html_reporter/__init__.py

@@ -0,0 +1 @@
+from .plugin import screenshot as attach

pytest_html_reporter/plugin.py

@@ -9,6 +9,9 @@
 import glob
 from collections import Counter
 import codecs
+from PIL import Image
+from io import BytesIO
+import shutil
 
 _total = _executed = 0
 _pass = _fail = 0
@@ -75,6 +78,9 @@
 _suite_error = 0
 _suite_fail = 0
 _pvalue = 0
+screen_base = ''
+screen_img = None
+_attach_screenshot_details = ''
 
 
 def pytest_addoption(parser):
@@ -90,6 +96,7 @@ def pytest_addoption(parser):
 
 def pytest_configure(config):
     path = config.getoption("path")
+    clean_screenshots(path)
 
     config._html = HTMLReporter(path, config)
     config.pluginmanager.register(config._html)
@@ -155,8 +162,20 @@ def max_rerun():
         return None
 
 
-class HTMLReporter:
+def screenshot(data=None):
+    global screen_base, screen_img
 
+    screen_base = HTMLReporter.base_path
+    screen_img = Image.open(BytesIO(data))
+
+
+def clean_screenshots(path):
+    screenshot_dir = os.path.abspath(os.path.expanduser(os.path.expandvars(path))) + '/pytest_screenshots'
+    if os.path.isdir(screenshot_dir):
+        shutil.rmtree(screenshot_dir)
+
+
+class HTMLReporter(object):
     def __init__(self, path, config):
         self.json_data = {'content': {'suites': {0: {'status': {}, 'tests': {0: {}}, }, }}}
         self.path = path
@@ -207,9 +226,11 @@ def report_path(self):
             path = '.' if '.html' in self.path.rsplit('/', 1)[0] else self.path.rsplit('/', 1)[0]
             if path == '': path = '.'
             logfile = os.path.expanduser(os.path.expandvars(path))
+            HTMLReporter.base_path = os.path.abspath(logfile)
             return os.path.abspath(logfile), self.path.split('/')[-1]
         else:
             logfile = os.path.expanduser(os.path.expandvars(self.path))
+            HTMLReporter.base_path = os.path.abspath(logfile)
             return os.path.abspath(logfile), 'pytest_html_report.html'
 
     @pytest.hookimpl(hookwrapper=True)
@@ -328,7 +349,10 @@ def append_test_metrics_row(self):
         if (self.rerun is not None) and (max_rerun() is not None):
             if (_test_status == 'FAIL') or (_test_status == 'ERROR'): _pvalue += 1
 
-            if (_pvalue == max_rerun()+1) or (_test_status == 'PASS'):
+            if (_pvalue == max_rerun() + 1) or (_test_status == 'PASS'):
+                if ((_test_status == 'FAIL') or (_test_status == 'ERROR')) and (
+                        screen_base != ''): self.generate_screenshot_data()
+
                 test_row_text = test_row_text.replace("__sname__", str(_suite_name))
                 test_row_text = test_row_text.replace("__name__", str(_test_name))
                 test_row_text = test_row_text.replace("__stat__", str(_test_status))
@@ -337,7 +361,8 @@ def append_test_metrics_row(self):
 
                 _test_metrics_content += test_row_text
                 _pvalue = 0
-            elif (self.rerun is not None) and ((_test_status == 'xFAIL') or (_test_status == 'xPASS') or (_test_status == 'SKIP')):
+            elif (self.rerun is not None) and (
+                    (_test_status == 'xFAIL') or (_test_status == 'xPASS') or (_test_status == 'SKIP')):
                 test_row_text = test_row_text.replace("__sname__", str(_suite_name))
                 test_row_text = test_row_text.replace("__name__", str(_test_name))
                 test_row_text = test_row_text.replace("__stat__", str(_test_status))
@@ -347,6 +372,9 @@ def append_test_metrics_row(self):
                 _test_metrics_content += test_row_text
 
         elif (self.rerun is None) or (max_rerun() is None):
+            if ((_test_status == 'FAIL') or (_test_status == 'ERROR')) and (
+                    screen_base != ''): self.generate_screenshot_data()
+
             test_row_text = test_row_text.replace("__sname__", str(_suite_name))
             test_row_text = test_row_text.replace("__name__", str(_test_name))
             test_row_text = test_row_text.replace("__stat__", str(_test_status))
@@ -364,15 +392,36 @@ def append_test_metrics_row(self):
             len(_scenario) - 1, {})['test_name'] = str(_test_name)
 
         if (self.rerun is not None) and (max_rerun() is not None):
-            self.json_data['content']['suites'].setdefault(len(_test_suite_name), {}).setdefault('tests', {}).setdefault(
+            self.json_data['content']['suites'].setdefault(len(_test_suite_name), {}).setdefault('tests',
+                                                                                                 {}).setdefault(
                 len(_scenario) - 1, {})['rerun'] = str(self.rerun)
         else:
             self.json_data['content']['suites'].setdefault(len(_test_suite_name), {}).setdefault('tests',
                                                                                                  {}).setdefault(
                 len(_scenario) - 1, {})['rerun'] = '0'
 
+    def generate_screenshot_data(self):
+        os.makedirs(screen_base + '/pytest_screenshots', exist_ok=True)
+
+        _screenshot_name = round(time.time())
+        _screenshot_suite_name = _suite_name.split('/')[-1:][0].replace('.py', '')
+        _screenshot_test_name = _test_name
+        if len(_test_name) >= 19: _screenshot_test_name = _test_name[-17:]
+        _screenshot_error = _current_error
+
+        screen_img.save(
+            screen_base + '/pytest_screenshots/' + str(_screenshot_name) + '.png'
+        )
+
+        # attach screenshots
+        self.attach_screenshots(_screenshot_name, _screenshot_suite_name, _screenshot_test_name, _screenshot_error)
+        _screenshot_name = ''
+        _screenshot_suite_name = ''
+        _screenshot_test_name = ''
+        _screenshot_error = ''
+
     def append_suite_metrics_row(self, name):
-        global _spass_tests, _sfail_tests, _sskip_tests, _sxpass_tests, _sxfail_tests, _serror_tests, _srerun_tests,\
+        global _spass_tests, _sfail_tests, _sskip_tests, _sxpass_tests, _sxfail_tests, _serror_tests, _srerun_tests, \
             _error, _suite_error, _suite_fail
 
         self._test_names(_test_name, clear='yes')
@@ -602,6 +651,7 @@ def renew_template_text(self, logo_url):
         template_text = template_text.replace("__css_styles__",
                                               str(codecs.open('pytest_html_reporter/style.css',
                                                               encoding='utf-8').read()))
+        template_text = template_text.replace("__attach_screenshot_details__", str(_attach_screenshot_details))
         return template_text
 
     def generate_json_data(self, base):
@@ -881,3 +931,37 @@ def update_trends(self, base):
                 tskip.append(data['status_list']['skip'])
 
                 if i == 4: break
+
+    def attach_screenshots(self, screen_name, test_suite, test_case, test_error):
+        global _attach_screenshot_details
+
+        _screenshot_details = """
+            <div class="img-hover col-md-6 col-xl-3 p-3">
+              <div>
+                <a class="video" href="__screenshot_base__/pytest_screenshots/__screen_name__.png" data-toggle="lightbox" style="background-image: url('__screenshot_base__/pytest_screenshots/__screen_name__.png');" data-fancybox="images" data-caption="SUITE: __ts__ :: SCENARIO: __tc__">
+                    <span class="video-hover-desc video-hover-small"> <span style="font-size:23px;display: block;margin-bottom: 15px;"> __tc__</span>
+                    <span>__te__</span> </span>
+                </a>
+                <p class="text-desc"><strong>__ts__</strong><br />
+                 __te__</p>
+              </div>
+            </div>
+            <div class="desc-video-none">
+              <div class="desc-video" id="Video-desc-01">
+                <h2>__tc__</h2>
+
+                <p><strong>__ts__</strong><br />
+                  __te__</p>
+              </div>
+            </div>
+        """
+
+        if len(test_case) == 17: test_case = '..' + test_case
+
+        _screenshot_details = _screenshot_details.replace("__screen_name__", str(screen_name))
+        _screenshot_details = _screenshot_details.replace("__ts__", str(test_suite))
+        _screenshot_details = _screenshot_details.replace("__tc__", str(test_case))
+        _screenshot_details = _screenshot_details.replace("__te__", str(test_error))
+        _screenshot_details = _screenshot_details.replace("__screenshot_base__", str(screen_base))
+
+        _attach_screenshot_details += _screenshot_details

pytest_html_reporter/style.css

@@ -74,7 +74,7 @@ th, td, tr {
     width: 100%;
     height: 100%;
     z-index: 9999;
-    background: url('https://i.ibb.co/cXnKsNR/Cube-1s-200px.gif') 50% 50% no-repeat rgb(249, 249, 249);
+    background: url('https://i.imgur.com/n3Tcoxz.gif') 50% 50% no-repeat rgb(249, 249, 249);
 }
 
 .card-wrapper {
@@ -370,4 +370,67 @@ th, td, tr {
     margin: 0px 0 45px;
     color: dimgrey;
     float: right;
+}
+
+.desc-video h2 {
+	 margin-top: 0px;
+}
+ .desc-video-none {
+	 display: none;
+}
+ .video {
+	 display: block;
+	 position: relative;
+	 padding-top: 60%;
+	 overflow: hidden;
+	 background-repeat: no-repeat;
+	 background-position: center center;
+	 background-size: cover;
+}
+ .video:hover .video-hover-desc {
+	 margin-top: -170px;
+	 height: 170px;
+}
+ .video:hover .video-hover-desc:before {
+	 background: linear-gradient(to top,rgba(35,72,133,0.82),rgba(35,72,133,0));
+	 transition: .3s;
+}
+ .img-hover .text-desc {
+	 display: none;
+}
+ .below-desc {
+	 display: block;
+	 height: 70px;
+	 width: 100%;
+	 padding: 10px;
+}
+ .video-hover-desc {
+	 display: block;
+	 padding: 10px 20px;
+	 background-color: #234885;
+	 background-color: rgba(35,72,133,0.82);
+	 height: 90px;
+	 margin-top: -90px;
+	 transition: .3s;
+	 color: white;
+	 text-shadow: none;
+}
+ .video-hover-desc:before {
+	 display: block;
+	 position: absolute;
+	 content: '';
+	 left: 0;
+	 right: 0;
+	 height: 116px;
+	 transition: .3s;
+	 margin-top: -126px;
+}
+ .video-hover-desc h2 {
+	 color: white;
+	 margin-top: 0px;
+	 height: 50px;
+}
+ .video-hover-desc.video-hover-small {
+	 height: 50px;
+	 margin-top: -50px;
 }

pytest_html_reporter/template.py

@@ -11,15 +11,10 @@ def html_template():
             <link href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" rel="stylesheet" />
             <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
             <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
-            <script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
-            <!-- Bootstrap core Googleccharts -->
-            <script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
-            <script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
-            <script type="text/javascript">
-                google.charts.load('current', {
-                    packages: ['corechart']
-                });
-            </script>
+            <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
+            <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
+            <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
+            
             <!-- Bootstrap core Datatable-->
             <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
             <script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js" type="text/javascript"></script>
@@ -43,13 +38,20 @@ def html_template():
         <div class="sidenav">
             <a><img class="wrimagecard" src="__custom_logo__" style="max-width:98%;" /></a>
             <a class="tablink" href="#" id="defaultOpen" onclick="openPage('dashboard', this, 'white', '#565656', 'groove')">
-                <i class="fa fa-home" id="tablinkicon" style="color:currentcolor; margin:5% 5% 5% 10%"></i> Dashboard</a>
+                <i class="fa fa-home" id="tablinkicon" style="color:currentcolor; margin:5% 5% 5% 10%"></i> Dashboard
+            </a>
             <a class="tablink" href="#" onclick="openPage('suiteMetrics', this, 'white', '#565656', 'groove'); executeDataTable('#sm',2)">
-                <i class="fa fa-briefcase" id="tablinkicon" style="color:currentcolor; margin:5% 5% 5% 10%"></i> Suites</a>
+                <i class="fa fa-briefcase" id="tablinkicon" style="color:currentcolor; margin:5% 5% 5% 10%"></i> Suites
+            </a>
             <a class="tablink" href="#" onclick="openPage('testMetrics', this, 'white', '#565656', 'groove'); executeDataTable('#tm',3)">
-                <i class="fa fa-server" id="tablinkicon" style="color:currentcolor; margin:5% 5% 5% 10%"></i> Test Metrics</a>
+                <i class="fa fa-server" id="tablinkicon" style="color:currentcolor; margin:5% 5% 5% 10%"></i> Test Metrics
+            </a>
             <a class="tablink" href="#" onclick="openPage('archives', this, 'white', '#565656', 'groove');">
-                <i class="fa fa-history" id="tablinkicon" style="color:currentcolor; margin:5% 5% 5% 10%"></i> Archives</a>
+                <i class="fa fa-history" id="tablinkicon" style="color:currentcolor; margin:5% 5% 5% 10%"></i> Archives
+            </a>
+            <a class="tablink" href="#" onclick="openPage('screenshots', this, 'white', '#565656', 'groove');">
+                <i class="fa fa-camera" id="tablinkicon" style="color:currentcolor; margin:5% 5% 5% 10%"></i> Screenshots
+            </a>
         </div>
         <div class="main col-md-9 ml-sm-auto col-lg-10 px-4" style="height: 100%;">
             <div class="tabcontent" id="dashboard">
@@ -177,6 +179,7 @@ def html_template():
                 <script>
                     window.onload = function() {
                         alignTotalCount();
+                        failureScreenshots();
                         executeDataTable('#sm', 2);
                         executeDataTable('#tm', 3);
                     };
@@ -232,6 +235,22 @@ def html_template():
                 __archive_body_content__
             </div>
         </div>
+        <div class="tabcontent" id="screenshots">
+            <div id="content">
+              <div class="fold-main">
+                <div class="container-fluid">
+                  <div id="main-content">
+                    <div class="bg-highlight p-4 mt-3">
+                      <div class="row">
+                        __attach_screenshot_details__
+                        <div class="below-desc"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+        </div>
         <script>
             function createBarGraph(tableID, keyword_column, time_column, limit, ChartID, Label, type) {
                 var status = [];
@@ -750,6 +769,17 @@ def html_template():
                 }
             });
         </script>
+        <script>
+            function failureScreenshots() {
+                $('.video').hover(function (e) {
+                  var hoverText = $(this).siblings('.text-desc').html();
+                
+                  $(e.target).closest('.bg-highlight').find('.below-desc').first().html(hoverText);
+                }, function (e) {
+                  $(e.target).closest('.bg-highlight').find('.below-desc').first().html('');
+                });
+            }
+        </script>
         
     </body>
 	"""