Adds start time, end time, and duration attributes for each test case…

… in report UI. Add hostname/path of the screenshot to capture summary. (#31)

tests/test_models.py

@@ -15,7 +15,7 @@ def test_save_image_blank(browser, load_page):
 
 def test_timed_duration():
     timed = Timed()
-    time.sleep(1)
+    time.sleep(1.2)
     assert timed.duration == "1s"
 
 

webdriver_recorder/browser.py

@@ -7,6 +7,7 @@
 from hashlib import sha256
 from logging import getLogger
 from typing import Any, Callable, List, Optional, Tuple, Union
+from urllib.parse import urlparse
 
 import selenium.webdriver.remote.webdriver
 from pydantic import BaseModel, Field
@@ -231,6 +232,12 @@ def get(self, url: string, snap: bool = False, caption: Optional[str] = None):
                 caption = f"Render {url}"
             self.snap(caption=caption)
 
+    @property
+    def current_url_brief(self):
+        url = urlparse(self.current_url)
+        url = f"{url.netloc}{url.path}"
+        return url
+
     def snap(self, caption: Optional[str] = None, is_error: bool = False):
         """
         Store the screenshot as a base64 png in memory.
@@ -260,6 +267,7 @@ def snap(self, caption: Optional[str] = None, is_error: bool = False):
                 base64=b64_image,
                 caption=caption,
                 is_error=is_error,
+                source_url=self.current_url_brief,
             )
         )
 

webdriver_recorder/models.py

@@ -13,6 +13,7 @@ class Image(BaseModel):
     base64: Optional[str]
     caption: Optional[str]
     is_error: bool = False
+    source_url: Optional[str]
 
     def save(self, root: str):
         if not self.base64:

webdriver_recorder/report_exporter.py

@@ -1,6 +1,7 @@
 import logging
 import os
 import shutil
+from datetime import datetime
 from typing import NoReturn
 
 import jinja2
@@ -35,8 +36,13 @@ def __init__(
                 )
 
         self.env = jinja2.Environment(loader=jinja2.FileSystemLoader(template_dir))
+        self.env.filters["pretty_datetime"] = self.pretty_datetime
         self.template = self.env.get_template(root_template)
 
+    @staticmethod
+    def pretty_datetime(dt: datetime):
+        return dt.strftime("%Y-%m-%d %H:%M:%S")
+
     def export_json(
         self, report: Report, dest_directory: str, dest_filename: str = "report.json", exclude_image_data: bool = False
     ) -> str:

webdriver_recorder/templates/static/style.css

@@ -214,3 +214,19 @@ input:checked + .slider:before {
   padding: .5em;
   margin: 1em;
 }
+
+.test-case-attributes {
+  font-size: 90%;
+}
+
+.test-case-attributes > ul, .test-case-attributes > ul > li {
+  border: none;
+}
+
+.test-case-attributes .btn-link {
+  font-size: 90%;
+}
+
+.screenshot-url {
+  font-size: 60%;
+}

webdriver_recorder/templates/test_case.html

@@ -37,26 +37,47 @@
     </div>
     <div id="{{ result.test_id }}-collapse" class="collapse">
         <div class="card-body" id="{{ result.test_id }}-body">
-            {% if result.test_description %}
-                <div class="card-title" id="{{ result.test_id }}-title">
-                    {{ result.test_description }}
-                </div>
-            {% endif %}
             <div class="test-header">
-                {% if result.traceback %}
-                    {% with %}
-                        {% set modal_id=traceback_modal_id %}
-                        {% set button_content="View python traceback" %}
-                        {% include 'modal_link.html' %}
-                    {% endwith %}
-                {% endif %}
-                {% if result.console_errors %}
-                    {% with %}
-                        {% set modal_id=console_log_modal_id %}
-                        {% set button_content="View browser console errors" %}
-                        {% include 'modal_link.html' %}
-                    {% endwith %}
-                {% endif %}
+                <div class="test-case-attributes">
+                    <ul class="list-group list-group-horizontal-xl list-group-flush">
+                        {% if result.test_description %}
+                            <li class="list-group-item attr-description">
+                                <span class="fw-bold">Description: </span>
+                                {{ result.test_description }}
+                            </li>
+                        {% endif %}
+                        <li class="list-group-item attr-start-time text-nowrap">
+                            <span class="fw-bold">Start time: </span>
+                            {{ result.start_time|pretty_datetime }}
+                        </li>
+                        <li class="list-group-item attr-end-time text-nowrap">
+                            <span class="fw-bold">End time: </span>
+                            {{ result.end_time|pretty_datetime }}
+                        </li>
+                        <li class="list-group-item attr-duration text-nowrap">
+                            <span class="fw-bold">Duration </span>
+                            {{ result.duration }}
+                        </li>
+                        {% if result.traceback %}
+                            <li class="list-group-item">
+                                {% with %}
+                                    {% set modal_id=traceback_modal_id %}
+                                    {% set button_content="View python traceback" %}
+                                    {% include 'modal_link.html' %}
+                                {% endwith %}
+                            </li>
+                        {% endif %}
+                        {% if result.console_errors %}
+                            <li class="list-group-item">
+                                {% with %}
+                                    {% set modal_id=console_log_modal_id %}
+                                    {% set button_content="View browser console errors" %}
+                                    {% include 'modal_link.html' %}
+                                {% endwith %}
+                            </li>
+                        {% endif %}
+                    </ul>
+                </div>
             </div>
             {% if result.pngs %}
                 {% include 'test_screenshots.html' %}

webdriver_recorder/templates/test_screenshots.html

@@ -7,6 +7,12 @@
                          loading="lazy"
                          src="{{ png.url }}"
                          alt='[loading] Screenshot #{{ loop.index }} for test "{{ result .test_name }}"' >
+                    {% if png.source_url %}
+                        <div class="text-truncate screenshot-url">
+                            <span class="fw-bold">Location: </span>
+                            {{ png.source_url }}
+                        </div>
+                    {% endif %}
                     {% if png.caption %}
                         <div
                             class="card-footer snap-caption {% if png.is_error %}text-danger{% endif %}">