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.
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
Webelements inside the vue.js's fragment are not visible to Selenium webdriver #9668
Comments
The article you posted is using Reading
Perhaps the monkey-patching behaves in a non-native way that makes Selenium interpret it wrong? |
Can you please provide a complete code snippet so we can have a look? Without any 3rd party dependencies. |
In the above code, first sysout gives me expected output which is "FOB". If you check the xpath in DOM then it highlights the "t320210727141945" but since it is in vue fragment block selenium could not read that and instead returns the wrong text. |
Blue Highlighted Element is accessible to webdriver Red-Highlighted Element is not accessible to webdriver since that is generated by vue Fragment. |
As discussed in #10157 |
Using the example from #10157 the reason for this is the Vue fragment addons screwing with the
element has had parentNode modified to return an element which isn't actually in the render tree
That alone wouldn't be so bad but the element returned as the parent doesn't have childNodes set
So it's a 0 height, 0 width element with no children to overflow and therefore calculates as non-visible (positiveSize function returns false). Capybara is not affected by this because it had overridden the isDisplayed atom with it's own version which used |
This issue may only affect Vue 2 projects using vue-fragment - |
So, the problem is with how Vue is messing with the DOM, and presumably users can update their code to avoid this issue. That said, this is probably a good opportunity to discuss slimming down the atom and we can address the issue on the Selenium side as well. |
Add $(element).css({"overflow": "visible", "position": "static"}) will resolve this issue. isDisplayed.js use this style to check whether element exists. |
Any updates on this issue? Should we expect this to be fixed sometime? |
Technically this is a bug in If Selenium changed the atom to use |
I am trying to reduce this down as there isn't reduced html show casing this... it might take some time unless someone with vue experience can give me a single page html with everything. Until then I will be trying to reduce down the html in #10157 |
Still no updates here? |
@GgStormer please change/update your library or raise an issue with vue-fragment. This is not a defect in Selenium. Additionally, the Selenium atom is not an easy thing to work with in its current state and it has some bigger limitations than this issue. Really it needs an overhaul and maybe a move away from Closure to TypeScript. This particular issue might be addressed as part of that move, or it might not, because moving from parentElement to parentNode might not be the right choice for it. |
@GgStormer did you raise an issue with |
Facing this too. I understand that this is not an issue within Selenium, but is there any hacky workaround that could be used here when changing |
I forked the XPath libary and replaced the native implementation https://github.com/NikhilVerma/xpath-next this handles Vue 3 issues by ignoring the vue fragments and adds supports for shadow DOM elements I also logged an issue here - vuejs/core#8444 |
Maybe this is related to #13132 ( |
One more question. Do these vue.js components use a closed Shadow DOM? If yes, I noticed #13132 by the end of last week. |
This issue is looking for contributors. Please comment below or reach out to us through our IRC/Slack/Matrix channels if you are interested. |
🐛 Bug Report
Elements with attribute 'fragment' are not visible.
Impossible to interact with child elements.
Root Cause
vue.js uses a concept called Fragments to create more than one root node in a Vue component. This is done for Accessibility support which is necessary to allow assistive technology like screen readers to interpret web pages and applications, More about this in -> https://blog.logrocket.com/fragments-in-vue-js/
So, basically they are creating HTML tag that would not read as a node by the DOM and called it fragments.
Hence the webelements inside such fragments are not visible for Webdriver. This is more or less like a iframe inside html page where we do switchToIFrame and interact with it. Only that for Fragments there are no ways to make it visible to the webdriver.
PFA Screenshot of DOM snapshot containing the Fragment.
To Reproduce
https://jsfiddle.net/brantansp/bwdkx1tg/3/#&togetherjs=eM6k1p6Iaz
Detailed steps to reproduce the behavior:
System.out.println(webDriver.findElement(By.xpath("((//div[@Class='nested-list']/div)[1]//div)[4]")).getText()); //returns null
Expected behavior
System.out.println(webDriver.findElement(By.xpath("((//div[@Class='nested-list']/div)[1]//div)[4]")).getText()); //should return value
Test script or set of commands reproducing this issue
WebDriverManager.chromedriver().setup();
WebDriver webDriver = new ChromeDriver();
System.out.println(webDriver.findElement(By.xpath("((//div[@Class='nested-list']/div)[1]//div)[4]")).getText());
Environment
OS: Windows 10 x64
Browser: Chrome
Browser version: 89
Browser Driver version: ChromeDriver 89
Language Bindings version: Java 3.141.59
The text was updated successfully, but these errors were encountered: