[BUG] Using Cypress to perform automation tests, is not functional

[CharalamposSam]

Software versions

Node 16.16.0
Cypress 10.7.0
Bokeh 2.4.3

Browser name and version

Tested on Chrome and Firefox

Jupyter notebook / Jupyter Lab version

No response

Expected behavior

Cypress should be able to select an area in the plot.

Observed behavior

Cypress is not functional in the plot

Example code

I'm using the trigger function of cypress to perform click events like mousedown, mousemove, mouseup:

cy.get('canvas') //selecting any canvas element (each plot contains 2 canvas elements)
   .eq(0) //selecting the first of two canvas element (tried selecting 2nd canvas element too)
   .trigger('mousedown', 100, 100, {force: true}) 
   .trigger('mousemove', 200, 200, {force: true})
   .trigger('mouseup', 200, 200, {force: true}) //force: true has been added to be sure the event 
                                                //will be performed if the canvas is being 
                                                //covered from another element

Cypress trigger documentation:
https://docs.cypress.io/api/commands/trigger

Stack traceback or browser console output

No response

Screenshots

I used cypress to draw a triangle in a simple canvas element and works fine:

In Bokeh, he code seems to be working in the plot but is not functional:

mousedown

mousemove

mouseup

*After a test has been completed in Cypress, the Test Runner doesn't display the content of a canvas due to memory issue. That's why the plot is blank.

[mattpap]

cy.get('canvas') //selecting any canvas element (each plot contains 2 canvas elements)

You need to select the top-level layer that is responsible for event handling, which is a div.bk-canvas-events (in bokeh 2.4; this changes in 3.0-dev).

[CharalamposSam]

Unfortunately, it didn't work either.

[mattpap]

I'm assuming you have the right setup, i.e. there needs to be a tool active for a plot to handle UI events (specific to the tool)? You may also want to consult our Selenium-based integration tests, specifically this support method:

bokeh/tests/support/plugins/project.py

Lines 191 to 201 in 5f8abdb

	def drag_element_at_position(self, element: WebElement, x: int, y: int, dx: int, dy: int, mod: _KeySeq | None = None) -> None:
	actions = ActionChains(self._driver)
	if mod:
	actions.key_down(mod)
	actions.move_to_element_with_offset(element, x, y)
	actions.click_and_hold()
	actions.move_by_offset(dx, dy)
	actions.release()
	if mod:
	actions.key_up(mod)
	actions.perform()

which we use for testing PanTool, etc. Note we use hammer.js for managing UI events, which may require some fiddling to get the right sequence of events to make things work (e.g. double tap detection makes writing certain kinds of tests harder than usual). Also note that bokehjs is async by default, thus you will need to wait for it to finish before taking a screenshot.

[bryevdv]

@CharalamposSam do you have any further input on this? No one on the core team uses or has access to Cypress. We are happy to try to help with any guidance in this issue, but speaking plainly, there's almost no chance of any further developments here without an active collaboration / back-and-forth with a Cypress user trying things out. If this is no longer a priority for you, we can close this issue.

[mattpap]

I was recently struggling with hammer.js and interactive testing in bokehjs, so I made some improvements to UI event handling, which helped with my use case and potentially could help in cypress as well.

[CharalamposSam]

@bryevdv thank you for your message. It is among my priorities but I haven't found any solution till now. I would appreciate this collaboration.

I will check that both Cypress and Bokeh have the latest version and I'll perform the tests again. I'll let you know about the results.
If you have anything in mind that you want to be tested by me let me know.