Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
caroline-ferri opened this issue Jun 27, 2024 · 5 comments
Open

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

caroline-ferri opened this issue Jun 27, 2024 · 5 comments
Labels
Cypress 14 Issues scoped for Cypress 14 pkg/electron This is due to an issue in the packages/electron directory type: bug

Comments

@caroline-ferri
Copy link

caroline-ferri commented Jun 27, 2024 •
edited
Loading

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/caroline-ferri/my-app, let me know if you have trouble accessing it.
Reproduction Steps:

  1. Run the app using command npm run start
  2. 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.
  3. Open the dev console on the cypress interface
  4. Observe the Carousel component is not rendered in the test
  5. 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

Related to: #28943
@caroline-ferri caroline-ferri mentioned this issue Jun 27, 2024
Closed
1 task
@jennifer-shehane
Copy link
Member

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

@jennifer-shehane jennifer-shehane added stage: needs information Not enough info to reproduce the issue pkg/electron This is due to an issue in the packages/electron directory labels Jun 28, 2024
@caroline-ferri
Copy link
Author

@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:
Screenshot 2024-06-28 at 10 13 06 AM
Screenshot 2024-06-28 at 10 10 32 AM

@jennifer-shehane
Copy link
Member

@I585157 Thanks! This is really helpful. Unfortunately our Electron upgrade is blocked. Version 28 has a breaking change and version 29 has a bug in v8 that we're waiting for Chromium to respond to, but we'll be actively seeking resolution of that this quarter. See #28943 (comment)

@jennifer-shehane jennifer-shehane mentioned this issue Jul 1, 2024
Closed
3 tasks
@jennifer-shehane jennifer-shehane added type: bug and removed stage: needs information Not enough info to reproduce the issue labels Jul 1, 2024
@jennifer-shehane jennifer-shehane mentioned this issue Sep 11, 2024
Closed
3 tasks
@dkris
Copy link

dkris commented Sep 19, 2024

@I585157 Thanks! This is really helpful. Unfortunately our Electron upgrade is blocked. Version 28 has a breaking change and version 29 has a bug in v8 that we're waiting for Chromium to respond to, but we'll be actively seeking resolution of that this quarter. See #28943 (comment)

@jennifer-shehane , Based on the most recent comment on the Chromium bug report, it looks like there's a confirmed temporary workaround that fixes the problem. Based on this, Are you able to share an updated timeline by when this issue can be addressed?

@jennifer-shehane
Copy link
Member

@dkris We still need to update Electron, so we're aiming for the end of year to have that done. 🤞🏻

@jennifer-shehane jennifer-shehane added the Cypress 14 Issues scoped for Cypress 14 label Oct 3, 2024
@ryanthemanuel ryanthemanuel mentioned this issue Oct 23, 2024
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Cypress 14 Issues scoped for Cypress 14 pkg/electron This is due to an issue in the packages/electron directory type: bug
Projects
None yet
Milestone
No milestone
3 participants
@dkris @jennifer-shehane @caroline-ferri