insightsengineering / teal

Exploratory Web Apps for Analyzing Clinical Trial Data
https://insightsengineering.github.io/teal/
Other
168 stars 33 forks source link

[Feature Request]: Add function that checks if elements on page are visible (`TealAppDriver`) #1181

Closed averissimo closed 3 months ago

averissimo commented 3 months ago

Between current main and #1150 there are 2 custom implementations of this feature.

I suggest we add a test_visibility method based on js: checkVisibility() browser API

    #' @description
    #' Test if CSS elements are visible on the page via Javascript call.
    #' @param selector (`character`) CSS selector to test visibility.
    #' A `CSS` id will return only one element if the UI is well formed.
    #' @param content_visibility_auto, opacity_property, visibility_property (`logical`) See more information
    #' on <https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility>.
    #'
    #' @return Logical vector with all occurences of the selector.
    test_visibility = function(selector,
                               content_visibility_auto = FALSE,
                               opacity_property = FALSE,
                               visibility_property = FALSE) {
      checkmate::assert_string(selector)
      checkmate::assert_flag(content_visibility_auto)
      checkmate::assert_flag(opacity_property)
      checkmate::assert_flag(visibility_property)
      unlist(
        self$get_js(
          sprintf(
            "Array.from(document.querySelectorAll('%s')).map(el => el.checkVisibility({%s, %s, %s}))",
            selector,
            # Extra parameters
            sprintf("contentVisibilityAuto: %s", tolower(content_visibility_auto)),
            sprintf("opacityProperty: %s", tolower(opacity_property)),
            sprintf("visibilityProperty: %s", tolower(visibility_property))
          )
        )
      )
    },
m7pr commented 3 months ago

@averissimo what if we use the name check_visibility?