Pattern Matching Callbacks and Dash Testing

Dash Python
1

Hi folks,

Wondering what to use for HTML selectors for the Browser testing API when we use a pattern-matching callback. I tried a stringified dictionary with no whitespaces as alluded to in the pattern-matching callback documentation, i.e.: '{"index":0,"type":"dynamic-dropdown"}' as a stab in the dark with no luck.

Is there an implementation for this yet?

2

In the Dash codebase, we’ve got some pattern matching tests with selectors here: https://github.com/plotly/dash/blob/dev/tests/integration/callbacks/test_wildcards.py. Maybe that helps?

2 Likes
3

Thanks, your CSS escape function helped.

I ended up debugging my problem by printing out all of the IDs on the page. The issue was that the ID was formatted as '{"index":1,"type":"filter"}' instead of '{"type":"filter","index":1}' such as how it was created. Do the dictionary keys get sorted alphabetically or something?

edit: just realized i could also inspect the element IDs with dev tools… shows you how much time i spend on the front end :upside_down_face:

4

Hey guys,

unfortunately I wasn’t able to get this to work and even after trying around for a while, I just can’t manage to find any element used in a pattern-matching callback.

This is the element I would like to access:

image
image951×48 3.1 KB

This is the code im using to look for the element using the css_escape method which is used in the test_wildcards.py posted by @chriddyp

def css_escape(s):
         selector = re.sub("[\\{\\}\\\"\\'.:,]", lambda m: "\\" + m.group(0), s)
         return selector

def test_guap001(self, dash_duo):

        dash_duo.start_server(app_to_test)

        # Works just fine
        element1 = dash_duo.find_element("#load-input")
        print(element1)
        assert element1.text == "Load Input"

        selector = css_escape("#{'id':'duration-input','type':'boundary}")
        print(selector)

        # Doesn't work, throws NoSuchELementException
        element2 = dash_duo.find_element(selector)
        print(element2)

I check with a normal id first, just to make sure everything works. I’ve tried to switch the two keywords around or formatting the ID string a number of ways, but it always throws a NoSuchElementException.

The selector that is generated by the css_escape looks like this:

"#\{\'id\'\:\'duration-input\'\,\'type\'\:\'boundary\}"

Does anyone have an idea of what I could be doing wrong. I’ve already spent way too long looking for a solution.

Thanks a lot
Gillner

5

Seems like the Javascript is expecting double quotes instead of single quotes?