cucu 1.3.14__py3-none-any.whl → 1.3.15__py3-none-any.whl

cucu/reporter/external/manage_scenario_highlights.js

@@ -0,0 +1,69 @@
+;
+function fitHighlightToImage(highlightDiv) {
+  console.log(highlightDiv);
+
+  // Every highlight element is expected to have an ID of the form
+  // <image ID>-highlight . Get the image ID here.
+  const sliceEndIndex = highlightDiv.id.length - "-highlight".length;
+
+  const targetImgId = highlightDiv.id.slice(0, sliceEndIndex);
+  const targetImg = document.querySelector(`img#${targetImgId}`);
+  const imgViewportRect = targetImg.getBoundingClientRect();
+  // Compute absolute coordinates relative to the whole document
+  const targetDimensions = {
+    height: imgViewportRect["height"],
+    width: imgViewportRect["width"],
+    top: imgViewportRect["top"] + window.pageYOffset,
+    left: imgViewportRect["left"] + window.pageXOffset,
+  };
+
+  const updatedHighlightStyle = [
+    "position:absolute",
+    `height:${targetDimensions["height"] * highlightDiv.getAttribute("height-ratio")}px`,
+    `width:${targetDimensions["width"] * highlightDiv.getAttribute("width-ratio")}px`,
+    `top:${(targetDimensions["height"] * highlightDiv.getAttribute("top-ratio")) + targetDimensions["top"]}px`,
+    `left:${(targetDimensions["width"] * highlightDiv.getAttribute("left-ratio")) + targetDimensions["left"]}px`,
+    "border:2px solid magenta",
+    "border-radius:2px",
+  ].join(";");
+  highlightDiv.style = updatedHighlightStyle;
+};
+
+function resizeAllHighlights(){
+  const highlights = document.querySelectorAll(".step-image-highlight");
+  highlights.forEach(h => fitHighlightToImage(h));
+};
+
+// The <summary> elements make the DOM jump around.
+// The delayed resizeAllHighlights helps make sure all the highlights
+// from lower down the page get into the right place after things settle.
+document.querySelectorAll("summary").forEach(
+  e => {
+    e.addEventListener("click", resizeAllHighlights);
+    e.addEventListener(
+      "click",
+      () => setTimeout(resizeAllHighlights, 10)
+    );
+  }
+);
+// The td.data-toggles cause an animation that takes a lot longer than
+// the one from the <summary> elements. As before, the fast
+// resizeAllHighlights makes the ones the user can see first jump into
+// place, then the delayed one helps put the ones lower down into place.
+document.querySelectorAll("td[data-toggle=collapse").forEach(
+  e => {
+    e.addEventListener(
+      "click",
+      () => setTimeout(resizeAllHighlights, 10)
+    );
+    e.addEventListener(
+      "click",
+      // 400ms value was determined experimentally.
+      // It's approximately the duration of the animation triggered
+      // by clicking on these elements
+      () => setTimeout(resizeAllHighlights, 400)
+    );
+  }
+);
+window.onload = resizeAllHighlights;
+window.onresize = resizeAllHighlights;

cucu/reporter/html.py

@@ -14,7 +14,11 @@ import cucu.db as db
 from cucu import format_gherkin_table, logger
 from cucu.ansi_parser import parse_log_to_html
 from cucu.config import CONFIG
-from cucu.utils import ellipsize_filename, get_step_image_dir
+from cucu.utils import (
+    ellipsize_filename,
+    generate_short_id,
+    get_step_image_dir,
+)
 
 
 def escape(data):
@@ -130,6 +134,7 @@ def generate(results, basepath, only_failures=False):
                             "timestamp": db_step.end_at or "",
                         },
                         "substep": db_step.is_substep,
+                        "screenshots": db_step.screenshots,
                     }
 
                     if db_step.text:
@@ -281,8 +286,6 @@ def generate(results, basepath, only_failures=False):
             scenario_started_at = None
             for step in scenario["steps"]:
                 total_steps += 1
-                image_dir = get_step_image_dir(step_index, step["name"])
-                image_dirpath = os.path.join(scenario_filepath, image_dir)
 
                 # Handle section headings with different levels (# to ####)
                 if step["name"].startswith("#"):
@@ -292,32 +295,52 @@ def generate(results, basepath, only_failures=False):
                         f"h{step['name'][:4].count('#') + 1}"
                     )
 
-                if os.path.exists(image_dirpath):
-                    _, _, image_names = next(os.walk(image_dirpath))
-                    images = []
-                    for image_name in image_names:
-                        words = image_name.split("-", 1)
-                        index = words[0].strip()
+                images = []
+                image_dir = get_step_image_dir(step_index, step["name"])
+                image_dirpath = os.path.join(scenario_filepath, image_dir)
+                for screenshot_index, screenshot in enumerate(step["screenshots"]):
+                    filename = os.path.split(screenshot["filepath"])[-1]
+                    filepath = os.path.join(image_dirpath, filename)
+                    if not os.path.exists(filepath):
+                        continue
+                    label = screenshot.get("label", step["name"])
+                    highlight = None
+                    if (
+                        screenshot["location"]
+                        and not CONFIG["CUCU_SKIP_HIGHLIGHT_BORDER"]
+                    ):
+                        window_height = screenshot["size"]["height"]
+                        window_width = screenshot["size"]["width"]
                         try:
-                            # Images with label should have a name in the form:
-                            # 0000 - This is the image label.png
-                            label, _ = os.path.splitext(words[1].strip())
-                        except IndexError:
-                            # Images with no label should instead look like:
-                            # 0000.png
-                            # so we default to the step name in this case.
-                            label = step["name"]
-
-                        images.append(
-                            {
-                                "src": urllib.parse.quote(
-                                    os.path.join(image_dir, image_name)
-                                ),
-                                "index": index,
-                                "label": label,
+                            highlight = {
+                                "height_ratio": screenshot["location"][
+                                    "height"
+                                ]
+                                / window_height,
+                                "width_ratio": screenshot["location"]["width"]
+                                / window_width,
+                                "top_ratio": screenshot["location"]["y"]
+                                / window_height,
+                                "left_ratio": screenshot["location"]["x"]
+                                / window_width,
                             }
-                        )
-                    step["images"] = sorted(images, key=lambda x: x["index"])
+                        except TypeError:
+                            # If any of the necessary properties is absent,
+                            # then oh well, no highlight this time.
+                            pass
+                    screenshot_id = f"step-img-{screenshot.get("step_run_id", generate_short_id())}-{screenshot_index:0>4}"
+                    images.append(
+                        {
+                            "src": urllib.parse.quote(
+                                os.path.join(image_dir, filename)
+                            ),
+                            "index": screenshot_index,
+                            "label": label,
+                            "id": screenshot_id,
+                            "highlight": highlight,
+                        }
+                    )
+                step["images"] = sorted(images, key=lambda x: x["index"])
 
                 if "result" in step:
                     if step["result"]["status"] in ["failed", "passed"]:

cucu/reporter/templates/scenario.html

@@ -150,7 +150,10 @@
                     <summary style="color: dimgray;">images ({{ step['images']|length }} images)</summary>
                     <div style="margin: 10px 0 0 0;">
                         {% for image in step['images'] %}
-                            <img class="mx-auto d-block img-fluid shadow bg-white rounded" style="margin-bottom:15px" alt='{{ image["label"] }}' title='{{ image["label"] }}' src='{{ image["src"] }}'></img>
+                            <img class="mx-auto d-block img-fluid shadow bg-white rounded" id='{{image['id']}}' style="margin-bottom:15px" alt='{{ image["label"] }}' title='{{ image["label"] }}' src='{{ image["src"] }}'></img>
+                            {% if image['highlight'] %}
+                            <div class="step-image-highlight" id='{{ image["id"]}}-highlight' height-ratio='{{ image['highlight']['height_ratio'] }}' width-ratio='{{ image['highlight']['width_ratio'] }}' top-ratio='{{ image['highlight']['top_ratio'] }}' left-ratio='{{ image['highlight']['left_ratio'] }}'></div>
+                            {% endif %}
                         {% endfor %}
                     </div>
                 </details>
@@ -222,4 +225,5 @@
             });
         });
     </script>
+    <script src="../../external/manage_scenario_highlights.js"></script>
 {% endblock %}

cucu/utils.py

@@ -245,56 +245,42 @@ def take_screenshot(ctx, step_name, label="", element=None):
         os.mkdir(screenshot_dir)
 
     if len(label) > 0:
-        label = f" - {CONFIG.hide_secrets(label).replace('/', '_')}"
-    filename = f"{CONFIG['__STEP_SCREENSHOT_COUNT']:0>4}{label}.png"
+        label = CONFIG.hide_secrets(label).replace("/", "_")
+    filename = f"{CONFIG['__STEP_SCREENSHOT_COUNT']:0>4} - {label}.png"
     filename = ellipsize_filename(filename)
     filepath = os.path.join(screenshot_dir, filename)
 
-    if CONFIG["CUCU_SKIP_HIGHLIGHT_BORDER"] or not element:
-        ctx.browser.screenshot(filepath)
-    else:
-        location = element.location
-        border_width = 4
-        x, y = location["x"] - border_width, location["y"] - border_width
-        size = element.size
-        width, height = size["width"], size["height"]
-
-        position_css = f"position: absolute; top: {y}px; left: {x}px; width: {width}px; height: {height}px; z-index: 9001;"
-        visual_css = "border-radius: 4px; border: 4px solid #ff00ff1c; background: #ff00ff05; filter: drop-shadow(magenta 0 0 10px);"
-
-        script = f"""
-            (function() {{ // double curly-brace to escape python f-string
-                var body = document.querySelector('body');
-                var cucu_border = document.createElement('div');
-                cucu_border.setAttribute('id', 'cucu_border');
-                cucu_border.setAttribute('style', '{position_css} {visual_css}');
-                body.append(cucu_border);
-            }})();
-        """
-        ctx.browser.execute(script)
-
-        ctx.browser.screenshot(filepath)
-
-        clear_highlight = """
-            (function() {
-                var body = document.querySelector('body');
-                var cucu_border = document.getElementById('cucu_border');
-                body.removeChild(cucu_border);
-            })();
-        """
-        ctx.browser.execute(clear_highlight, element)
-
+    ctx.browser.screenshot(filepath)
+    element_info = {
+        "x": None,
+        "y": None,
+        "height": None,
+        "width": None,
+    }
+    if element:
+        element_info.update(element.rect)
+    # driver.get_window_size returns the size of the window the OS draws for
+    # the browser, not the window the browser uses to display the DOM.
+    # If we go through JavaScript, we ignore the height of the adress bar
+    # and such.
+    script = """
+        function getDimensionsOfCurrentWindow() {
+          const windowSize = {
+            width: window.innerWidth,
+            height: window.innerHeight,
+          };
+          return windowSize;
+        };
+        return getDimensionsOfCurrentWindow();
+    """
+    browser_window_size = ctx.browser.execute(script)
     screenshot = {
         "step_name": step_name,
         "label": label,
         "element": element,
-        "location": f"({element.location['x']},{element.location['y']})"
-        if element
-        else "",
-        "size": f"({element.size['width']},{element.size['height']})"
-        if element
-        else "",
+        "location": element_info,
         "filepath": filepath,
+        "size": browser_window_size,
     }
     step.screenshots.append(screenshot)
 

{cucu-1.3.14.dist-info → cucu-1.3.15.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.3
 Name: cucu
-Version: 1.3.14
+Version: 1.3.15
 Summary: Easy BDD web testing
 Keywords: cucumber,selenium,behave
 Author: Domino Data Lab, Rodney Gomes, Cedric Young, Xin Dong, Kavya Yakkati, Kevin Garton, Joy Liao

{cucu-1.3.14.dist-info → cucu-1.3.15.dist-info}/RECORD

@@ -54,14 +54,15 @@ cucu/reporter/external/dataTables.bootstrap.min.css,sha256=AVjWb9eSGQ0-3f4WNiVU1
 cucu/reporter/external/dataTables.bootstrap.min.js,sha256=H_ZJHj902eqGocNJYjkD3OButj68n-T2NSBjnfV2Qok,4401
 cucu/reporter/external/jquery-3.5.1.min.js,sha256=9_aliU8dGd2tb6OSsuzixeV4y_faTqgFtohetphbbj0,89476
 cucu/reporter/external/jquery.dataTables.min.js,sha256=XNhaB1tBOSFMHu96BSAJpZOJzfZ4SZI1nwAbnwry2UY,90265
+cucu/reporter/external/manage_scenario_highlights.js,sha256=UAGC3CLzTqDdPI9d2tFOeww9afVS5S4J1Elg96x60cY,2669
 cucu/reporter/external/popper.min.js,sha256=pS96pU17yq-gVu4KBQJi38VpSuKN7otMrDQprzf_DWY,19188
 cucu/reporter/favicon.png,sha256=9ikXLAmzfQzy2NQps_8CGaZog2FvQrOX8nnSZ0e1UmM,2161
-cucu/reporter/html.py,sha256=MpTwYmd-_GycFh3zqQrmSp6Wp-FBJ1CvfatV5bBxpbs,19925
+cucu/reporter/html.py,sha256=8wXF9ntF5Rkmoe-LWHY0YgxbSwuJGdZ1XTKWD-LFbBE,21009
 cucu/reporter/templates/feature.html,sha256=IBkwGiul-sRO5lT8q8VFXMUJx1owsAd1YbdDzziSjKw,3645
 cucu/reporter/templates/flat.html,sha256=inx9wBo23SKsETA5BqU3GAxM7WaLTsDgCyL_D7TPpdA,2531
 cucu/reporter/templates/index.html,sha256=pJ1eojL19EIUuIiqtALPm3atTabKJb7M1FwGzWpGkdg,2818
 cucu/reporter/templates/layout.html,sha256=2iDRbm8atO8mgHWgijIvDCrBMKvcP6YHrmr95WtJiE4,4561
-cucu/reporter/templates/scenario.html,sha256=yOAVb3cHMDvf1xzHatbXdpJnhClVMwMMyZrTSU9Nz9o,11735
+cucu/reporter/templates/scenario.html,sha256=LWjSj2PNcBpC1EnxCmgnzG8ZLDIXEDF4F1oexfFfx4E,12238
 cucu/steps/__init__.py,sha256=seSmASBlWu6-6wbFbvEbPwigBcRXiYP18C4X_2cW8Ng,753
 cucu/steps/base_steps.py,sha256=0fPvdaKoan8lMAKrDnK0-zrALpxm11P1zVAY5CN7iXA,1893
 cucu/steps/browser_steps.py,sha256=iTRl5ffpf2YrFk5qh655WFHAeSOwoE3HFhmXhjsZtao,12687
@@ -87,8 +88,8 @@ cucu/steps/tables.js,sha256=Os2a7Fo-cg03XVli7USvcnBVad4N7idXr-HBuzdLvVQ,945
 cucu/steps/text_steps.py,sha256=Jj_GHoHeemNwVdUOdqcehArNp7WM-WMjljA4w0pLXuw,2576
 cucu/steps/variable_steps.py,sha256=WSctH3_xcxjijGPYZlxp-foC_SIAAKtF__saNtgZJbk,2966
 cucu/steps/webserver_steps.py,sha256=i11xOmSjhhrQ-2QrDfpjDhWroeJuuGKvbYEsHV1cioI,1406
-cucu/utils.py,sha256=LCcs8sMzvdvH05N8P5QYO4lO6j-_PQC530mEAD96go8,10957
-cucu-1.3.14.dist-info/WHEEL,sha256=eh7sammvW2TypMMMGKgsM83HyA_3qQ5Lgg3ynoecH3M,79
-cucu-1.3.14.dist-info/entry_points.txt,sha256=11WRIhQM7LuUnQg1lAoZQoNvvBvYNN1maDgQS4djwJo,40
-cucu-1.3.14.dist-info/METADATA,sha256=O06K0LOySNXhSXlxm1DR8pXT9M5bgMTMEwKiGIa5Bj0,16722
-cucu-1.3.14.dist-info/RECORD,,
+cucu/utils.py,sha256=hkvfTpN9bCClZ8ezny8mkAPq0OaR3A3kJi8lzq0zL0Q,10164
+cucu-1.3.15.dist-info/WHEEL,sha256=eh7sammvW2TypMMMGKgsM83HyA_3qQ5Lgg3ynoecH3M,79
+cucu-1.3.15.dist-info/entry_points.txt,sha256=11WRIhQM7LuUnQg1lAoZQoNvvBvYNN1maDgQS4djwJo,40
+cucu-1.3.15.dist-info/METADATA,sha256=VH6FZBTbcc29w_3Rh27ROd7qvLDHvnt9clbzRqmU2lg,16722
+cucu-1.3.15.dist-info/RECORD,,