I have to set position:static on my html tag because I need to disable chrome's default swipe left to go back (we use the same gesture elsewhere in the app)
However, this breaks many of my cypress tests, often where should('be.visible') is used.
Is there any way to turn off the position: static ancestor checking?
Related
When you create a new element, you can assign tags to it, but the tags window constantly jumps around the screen as you type. Which is very annoying if you want to quickly select with the mouse by ready-made tags.
https://i.imgur.com/AccTcXZ.jpg
And here http://eucaly-tw5.tiddlyspot.com/ the owner has already screwed something up and the window does not move, and of course it is more convenient.
https://i.imgur.com/63boyVQ.jpg
What parameters need to be changed in order to get the same effect on myself?
This behaviour is controlled via CSS. One option would be to add the following value to a sitewide stylesheet (tagged $:/tags/Stylesheet):
.tc-edit-add-tag {
display: unset;
}
I am writing automation tests for a webpage. I can't share any specific details, so all I'm looking for is some general brain-storming to help me figure out what is causing the problem. A long-shot, I know, but I've become obsessed with this problem.
There is an element with id="troublesome" on the webpage. On manual testing, hovering over #troublesome will cause it to disappear and something else pops up in its place (as it should). I'm trying to verify that the pop-up occurs on hover using automation testing (Capybara, selenium driver, ruby). However, no matter what technique I use, hovering doesn't work.
troublesome is visible upon visiting the page. It is not cut off by screen size. Capybara has no trouble finding it and reading its text and attributes. i.e. A regular ol' find("#troublesome").text will return the correct text.
However, I cannot use Capybara to click on #troublesome without executing javascript.
i.e. find("#troublesome").click won't do anything (it won't throw any errors either). I must use find("#troublesome").execute_script("this.click()") to click on it.
But I don't need to click it. I just need to hover over it.
Using Capybara:
find("#troublesome").hover --> will not work. No errors thrown either. Test just continues until it fails because it fails to find the expected result. Telling ruby to sleep(however_many_seconds) doesn't help.
Using Selenium:
page.driver.browser.action.move_to(find("#troublesome").native).perform --> this doesn't work either. Again, no errors thrown.
Using trigger:
find("#troublesome").trigger(:mouseover) --> doesn't work because selenium driver doesn't support trigger (and I don't want to use another driver).
Using jquery:
Won't work. Website doesn't use jquery
Attempting to use javascript to force :hover to be true on element doesn't work:
mouseHover = 'var x = document.createEvent("MouseEvent");
x.initMouseEvent("mouseover", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.getElementById("troublesome").dispatchEvent(x);'
page.execute_script(mouseHover)
(I can change mouseOver to click, and it'll click though!)
Apparently, mouseover is not 'trusted' by browser (but click is), so kinda useless to have that as an option, isn't it?
I've tried all of the above by working within a within("#id") do... end block. Doesn't make a difference.
I've even tried unconventional means to get the mouse over #troublesome:
find("#troublesome").right_click --> the mouse will be DIRECTLY over #troublesome, right-click, and a menu will pop up RIGHT OVER the element!!!!!!
So CLEARLY, the mouse IS hovering over #troublesome during my automation test, yet it's not registering on the browser. The website is not bugged. Hovering works when I do it manually.
I can find other elements on the webpage and hover over them just fine. In fact, I've even tried putting the mouse over another element, then moving it from there to #troublesome like so:
page.driver.browser.action.move_to(find("#somethingElse").native, 1200, -50).perform
That doesn't work, but if I adjust the coordinates to a third element just below #somethingElse, this will trigger the third element's hover state, so clearly this strategy can work in principle and practice, yet not for #troublesome!
Note that #somethingElse and the 'third element' exist on a div that is at the same 'heirarchy' as the ancestor div of #troublesome.
There are iframes on the webpage, but #troublesome is not on the iframe.
There are random script tags inserted all over the body of the webpage. I don't know what those script tags are doing as I can't see the code.
#troublesome has become my Moby Dick.
This whale is driving me nuts. I've invested too much time into it already. I can't give up now or all those hours of toil would be for nothing.
Please help.
Thank you.
find("#troublesome").hover
page.driver.browser.action.move_to(find("#troublesome").native).perform
find("#troublesome").trigger(:mouseover)
mouseHover = 'var x = document.createEvent("MouseEvent");
x.initMouseEvent("mouseover", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.getElementById("myDiv").dispatchEvent(x);'
page.execute_script(mouseHover)
page.driver.browser.action.move_to(find("#somethingElse").native, 1200, -50).perform
No error messages other than standard capybara/rspec failure log because it failed to find the element that was supposed to pop up upon hovering over #troublesome
The problem you're running into is because the '.hoverme' element in your example at https://jsfiddle.net/pwo7zuL2/1/ has a size of 0x0 px (this is also why you couldn't click it). The size is 0x0 because it only contains absolute positioned elements which don't technically count when calculating the auto size of the parent. If instead of attempting to hover over the .hoverme element you hover over the visible absolute positioned child (which actually has size) of the element the hover will work correctly (which is what you are actually doing when you do it manually in your example).
find('#next').hover
I now know the problem, and I have a solution (albeit a hacky one).
The problem is due to an iframe which covers the full screen. This blocks selenium from being able to hover over #troublesome even though #troublesome is not within the iframe and #troublesome's z-index is set to a high number (thereby forcing it to be at the top layer).
Manual hovering works, but hovering with selenium fails. I believe this is a bug, so I have reported it on selenium's github.
One solution that works is to use javascript to force the iframe to shrink, then hover (which should work now), then use javascript to return the iframe to full screen (so as to not affect other aspects of the test).
shrink_frame = 'document.getElementById("#frame").setAttribute("style", "width: 100px; height 100px");'
page.execute_script(shrink_frame)
This is not an ideal solution because it is obviously not how a real user would interact with the webpage, but it's acceptable given that this is due to a selenium bug and that manual testing works.
I have a responsive layout that must be accessible for screen readers. The issue is around the order of buttons on desktop vs mobile.
On desktop the button order is
Cancel - Remind Me Later - Learn More
...and the screen reader reads left to right. However on mobile the button order is vertically stacked and is ordered as the reverse of the desktop:
Learn more
Remind me later
Cancel
The problem is the screen reader still reads as if user was in desktop mode - the visual order no longer matches.
Is there a way for the screen reader to change the reading order depending on the viewport?
In general, screen reading software ignores CSS (*). The order of your DOM is the order the screen reader will read it. Even if you used tabindex, that will only control the order of tabbing through the interface. If you use CSS to reposition elements, whether through flexbox or grid or float, the screen reading software will ignore that.
A screen reader user can simply walk the DOM (**) by using the up/down arrow keys. (** The user is not really walking the DOM but rather the accessibility tree, but it's similar to the DOM. Not every element in the DOM will be on the accessibility tree, but it's a similar analogy).
So, the only way to "control" the order that a screen reader hears the elements is by modifying the order of the elements in your DOM.
(*) (If you have a :before or :after pseudo-element with a content property, that property will be read by a screen reader as noted in step 2F of the "Accessible Name and Description Computation")
This is a common issue and there are a few solutions you can do. Without knowing much about your codebase, here are a few suggestions for you:
Not knowing how complex your markup is, you could provide a version of the form elements that are only visible on small screens. That way you can explicitly control the accessibility tree structure.
Another option, you can use CSS (flexbox or grid) to reposition the buttons based your media query for small screens.
While this would work, I would not advice using "tabindex="1", "2", "3" "..." to control tab order seeing as how your UI is not rendering in the correct order anyway.
Hope this helps. Good luck with your project.
Is there a way for the screen reader to change the reading order depending on the viewport?
One solution is to have two sets of the same menu and use your media queries to use one or the other
<div class="desktop">Cancel - Remind Me Later - Learn More</div>
<div class="mobile">
Learn more
Remind me later
Cancel
</div>
CSS:
.mobile {display:none}
#media screen and (max-width: 600px) {
.desktop {display:none}
.mobile {display:block}
}
This way, you will be free to let the DOM order match the visual order.
I'm spending some time writing HTML and CSS, and am using the developer tools in Firefox 53. Specifically, the "HTML/DOM/CSS Inspector".
When you move the mouse over a chunk of HTML in the Inspector window, the corresponding rendered HTML element on the page is highlighted. Plus, there are some helpful grid lines and color overlays and whatnot also drawn over the page, all of which was a good decision on the part of the Mozilla developers. It shows how random divs and other elements might be overlapping, is great for showing where margins are collapsing, etc.
However, when I move the mouse off the HTML tree, all that useful highlighting and overlays vanish. Is there a way to get that highlighting/overlay to "stick"? For example, until I click on another HTML element, or reload the page, or... actively take some action other than simply moving my mouse?
Note that right-clicking the Inspector and selecting the ":hover" menu entry is most emphatically not what I'm looking for. I want to change the mouseover behavior of the Inspector, not that of the page.
(Now I'm going to pour another shot of whiskey and resume fighting with the Rules/Computed-versus-"browser styles" controls. Those were... not as well designed.)
The general highlighter can't be toggled to stay on the page, it only reacts on hovering the nodes.
Only some other highlighters are sticky, like the one for elements matching a specific CSS selector or the CSS grid highlighter, both located within the Rules side panel:
The CSS selector matching highlighter is currently (as of Firefox 53) the one that comes nearest to what you're looking for, though it's missing the grid lines.
Furthermore, there is already a request for adding a sticky element highlighter in Mozilla's bug tracker.
When working on a pre-existing fixed-width web design to try to make it responsive, what I find when I narrow the view / screen size during testing is that at some point a horizontal scroll-bar appears, indicating that some element or combination of adjacent elements on the site have a combined width that is higher than the width of the view. I need to identify what that element is so I can figure out what to do about it.
My question is, what is the best way to determine what the widest element(s) are on the page - ie, the reason why it won't narrow any further? Using the browser's built-in inspector tool this is just a guessing game on any long page, and is very inefficient for accomplishing this.
Thanks for any suggestions.
I don't see any special instruments for this, but in my work I use next way:
In the web inspector you choose some html node and apply overflow: hidden for this node, If horizontal scrollbar is hidden, whoa :) So the widest element is in this node, you delete for current node overflow: hidden and choose next node inside current node and again apply overflow: hidden and etc
In my case helped to write "di" to the style of some or another node. After detools popups list "display:" options just scroll for them. Wanted width immediately shows.