cucu 1.3.14__tar.gz → 1.3.16__tar.gz

{cucu-1.3.14 → cucu-1.3.16}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.3
 Name: cucu
-Version: 1.3.14
+Version: 1.3.16
 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 → cucu-1.3.16}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "cucu"
-version = "1.3.14"
+version = "1.3.16"
 description = "Easy BDD web testing"
 readme = "README.md"
 license = { text = "The Clear BSD License" }

cucu-1.3.16/src/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-1.3.14 → cucu-1.3.16}/src/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-1.3.14 → cucu-1.3.16}/src/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-1.3.14 → cucu-1.3.16}/src/cucu/steps/browser_steps.py

@@ -67,7 +67,7 @@ def execute_javascript_and_save(ctx, variable):
 def assert_url_is(ctx, value):
     ctx.check_browser_initialized()
     url = ctx.browser.get_current_url()
-    if value == url:
+    if value != url:
         raise RuntimeError(f"current url is {url}, not {value}")
 
 

{cucu-1.3.14 → cucu-1.3.16}/src/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)