Implement the visible URL query parameter to control visibility of test results on page load. (#433)

* enable control of test result visability via query params

* fix typos and query parsing

* Add changelog entry

* fix type in changelog

Author: gnikonorov

docs/changelog.rst

@@ -9,6 +9,10 @@ Version History
 3.2.0 (unreleased)
 ~~~~~~~~~~~~~~~~~~
 
+* Implement the ``visible`` URL query parameter to control visibility of test results on page load. (`#399 <https://github.com/pytest-dev/pytest-html/issues/399>`_)
+
+  * Thanks to `@TheCorp <https://github.com/TheCorp>`_ for reporting and `@gnikonorov <https://github.com/gnikonorov>`_ for the fix
+
 * Make the report tab title reflect the report name. (`#412 <https://github.com/pytest-dev/pytest-html/issues/412>`_)
 
   * Thanks to `@gnikonorov <https://github.com/gnikonorov>`_ for the PR

docs/user_guide.rst

@@ -234,6 +234,9 @@ additional HTML and log output with a notice that the log is empty:
 Display options
 ---------------
 
+Auto Collapsing Table Rows
+~~~~~~~~~~~~~~~~~~~~~~~~~~
+
 By default, all rows in the **Results** table will be expanded except those that have :code:`Passed`.
 
 This behavior can be customized either with a query parameter: :code:`?collapsed=Passed,XFailed,Skipped`
@@ -246,6 +249,29 @@ or by setting the :code:`render_collapsed` in a configuration file (pytest.ini,
 
 **NOTE:** Setting :code:`render_collapsed` will, unlike the query parameter, affect all statuses.
 
+Controlling Test Result Visibility Via Query Params
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+By default, all tests are visible, regardless of their results. It is possible to control which tests are visible on
+page load by passing the :code:`visible` query parameter. To use this parameter, please pass a comma separated list
+of test results you wish to be visible. For example, passing :code:`?visible=passed,skipped` will show only those
+tests in the report that have outcome :code:`passed` or :code:`skipped`.
+
+Note that this match is case insensitive, so passing :code:`PASSED` and :code:`passed` has the same effect.
+
+The following query parameters may be passed:
+
+* :code:`passed`
+* :code:`skipped`
+* :code:`failed`
+* :code:`error`
+* :code:`xfailed`
+* :code:`xpassed`
+* :code:`rerun`
+
+Formatting the Duration Column
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
 The formatting of the timestamp used in the :code:`Durations` column can be modified by setting :code:`duration_formatter`
 on the :code:`report` attribute. All `time.strftime`_ formatting directives are supported. In addition, it is possible
 to supply :code:`%f` to get duration milliseconds. If this value is not set, the values in the :code:`Durations` column are

src/pytest_html/resources/main.js

@@ -63,9 +63,19 @@ function hideExtras(colresultElem) {
 }
 
 function showFilters() {
+    let visibleString = getQueryParameter('visible') || 'all';
+    visibleString = visibleString.toLowerCase();
+    const checkedItems = visibleString.split(',');
+
     const filterItems = document.getElementsByClassName('filter');
-    for (let i = 0; i < filterItems.length; i++)
+    for (let i = 0; i < filterItems.length; i++) {
         filterItems[i].hidden = false;
+
+        if (visibleString != 'all') {
+            filterItems[i].checked = checkedItems.includes(filterItems[i].getAttribute('data-test-result'));
+            filterTable(filterItems[i]);
+        }
+    }
 }
 
 function addCollapse() {