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

CharalamposSam commented 2 years ago

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:

drawTriangle

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

mousedown

mousemove

mouseup 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 commented 2 years ago

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 commented 2 years ago

Unfortunately, it didn't work either.

mattpap commented 2 years ago

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: https://github.com/bokeh/bokeh/blob/5f8abdbe699e72b33fb9c285b30fb81015da12bc/tests/support/plugins/project.py#L191-L201 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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

@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.

bokeh / bokeh