SAP/ui5-webcomponents incompatibility: Current electron version doesn't support ':dir(rtl)' selector

I585157 commented 3 days ago

Current behavior

The current electron version doesn't support the :dir global attribute (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir). Running e2e tests on applications that use later versions of SAP's ui5-webcomponents and ui5-webcomponents-react causes unexpected and incorrect test behavior. This is due to the following error: Uncaught DOMException: Failed to execute 'matches' on 'Element': ':dir(rtl)' is not a valid selector. that occurs when the :dir() attribute is utilized. While this issue was found through testing with ui5-webcomponents, this problem can persist elsewhere.

Desired behavior

Tests that are run on applications/components utilizing the :dir() property should run as expected.

Test code to reproduce

I have setup a sample react based application using the latest version of SAP/ui5-webcomponents, SAP/ui5-webcomponents-react, and Cypress. Here is the link: https://github.com/I585157/my-app, let me know if you have trouble accessing it. Reproduction Steps:

Run the app using command npm run start
then run the only e2e spec in the cypress folder (testSpec.cy.js). This spec should navigate to the local application, and then tests if the Carousel is rendered.
Open the dev console on the cypress interface
Observe the Carousel component is not rendered in the test
Observe that the error Uncaught DOMException: Failed to execute 'matches' on 'Element': ':dir(rtl)' is not a valid selector. is preventing the Carousel from being properly rendered

Cypress Version

13.10.0

Node version

v18.18.0

Operating System

macOS

Debug Logs

No response

Other

jennifer-shehane commented 2 days ago

@I585157 Could you link to where you have narrowed this down to Electron and it being fixed in a later version?

I585157 commented 2 days ago

@jennifer-shehane I used the following repo https://github.com/electron/electron-quick-start to test different versions of electron to identify where the errorUncaught DOMException: Failed to execute 'matches' on 'Element': ':dir(rtl)' is not a valid selector is coming from. I ran the app with the open dev tools line uncommented in main.js. I then began testing the command document.querySelector("body").matches(":dir(rtl)") in the console when running the application with the latest version of electron cypress supports, increasing the version each test. When running with node v.18.17.1 and electron v27.0.0 the document.querySelector("body").matches(":dir(rtl)") command failed with the Uncaught DOMException. When running with node v18.18.2 and electron v28.0.0 the command returned false which is the expected response if no values within the <body> match the selector.

Here a some relevant screenshots for more detail:

cypress-io / cypress