I am n00b to watir and I'm testing a web app that uses extjs. The app has a main menu with several items that have sub items. One of the main menu items has the same text as one of its submenus. In watir webdriver I have this code:
jobs_menu = d.p(:text => "Jobs")
jobs_menu.when_present.flash
jobs_menu.click
jobs_submenu_item = d.a(:text => "Jobs")
jobs_submenu_item.when_present.flash
jobs_submenu_item.click
This is supposed to flash and click the first menu and cause the submenu to drop. Then it should flash and click the submenu item. I get 3 results in 3 different browsers with this:
Firefox - 1st menu flashes and drops, submenu item flashes, but does not get clicked
Chrome - 1st menu flashes and drops, submenu item flashes and clicks OK - yay!
IE - 1st menu flashes and drops, then it goes away and the submenu item cannot be found with ElementNotVisibleError
Interesting to note for a different menu where the drop down text is different than the submenu text then Firefox and Chrome both work OK. IE still gives the ElementNotVisibleError.
How can I get this to work the same in all 3 browsers?
In some cases the display of menus does not require a click, and can be triggered by mousing over the menu. In that case it might work to try .hover instead of .click to get the menu to appear.
A problem with a lot of these custom controls is that they work differently on different browsers, which means your automation code MAY have to take that into account, this is the downside to custom controls like this and not using basic HTML elements
Related
Is there a way in the Safari Developer menu to show triggered/executed JS functions/code on events on a web page (for instance a button is clicked)?
Yes, it posible, first you have to enable the Inspect Element:
here a tutorial:
Choose Safari > Preferences, and click Advanced.
At the bottom of the pane, select the “Show Develop menu in menu bar” checkbox.
then open the Inspect Element and go to the 'Sources' tab
here you will see the Breakpoints and start play.
The Problem: Menu items on the hidden menu are still spoken by VoiceOver
See the prototype in action: mobile-menu.html
Our website has a slideIn mobile menu for tablet and narrower viewports. In Chrome, Keyboard accessibility behaviors include clicking on the "close-X" button in the expanded mobile menu to hide the menu; navigating beyond the menu hides the menu; Esc on the keyboard hides the menu.
In Safari on iOS using VoiceOver, using an external keyboard, QuickNav correctly stops on the dropdown toggle, and selecting it correctly expands the hidden menu. The menuitems can be chosen. Navigating off the end of the menu hides the menu. Selecting "close-x" also hides the menu.
When the menu is hidden, the desired behavior is to walk ONLY through the page's visible links.
VoiceOver has a quirk: if the menu was hidden by selecting "close-X", then only the visible links on the page are audible. If the menu was hidden by a virtual click - jQuery's .click() behavior triggered by exiting the menu - then VoiceOver continues to treat the hidden links as if they are visible.
The Question: How can I get VoiceOver to make a virtual click behave like a physical click - and ignore the hidden links on the collapsed slide-in menu?
In your code example I see this:
<div class="nav-mobile dropdown-menu dropdown-menu-right" role="menu" aria-hidden="false">
The aria-hidden starts with a value of true, but after I start toggling the menu and hide it again it never switches back to true. Since that is the technique you rely on to hide the menu from a screen reader, it will not be hidden.
In short, this appears to have nothing to do with a click event and more to do with something in your function failing to toggle that value when the menu toggles.
I am not testing on VoiceOver, I am seeing this on NVDA. You should test on more screen reader combinations and maybe replace your jQuery function with vanilla JavaScript to confirm your assertion.
While I am here, I suggest you take a look at focus management for the menu. Since the first tab-stop is to close the menu, which the hamburger already does, you may want to just move focus to the close link.
Also, the role="navigation" could be replaced just by using the <nav> element.
Further, the role="menu" can be confusing for users unless you want to replicate an OS-style menu and implement all the expected keyboard shortcuts. I suggest you just remove it.
I'm working on 3 level navigation menu.
I find great example of menu on http://bootply.com/92442 which works pretty cool, but when I insert url addresses to the code the drop-down menu item don't open sub menu, but going to url. Here is example: http://bootply.com/109393
It only happens on firefox browser. On Chrome and Opera everything is ok.
There's a problem with Twitter Bootstrap's dropdown menus on mobile. If I use Android's stock browser and click on a menu, it will open and close in less than a sec without me doing anything else. The same thing happens if I press the dropdowns on the official Bootstrap site, so this has nothing to do with my code.
If you want to keep the dropdowns open and fix this, you have to tap them for a little bit longer, smth like 1 second. But obviously I'd like a simple tap to be enough.
Is this normal for Android's stock browser? In Firefox and Opera Mini dropdowns work just fine.
Thanks!
PS: no, I don't have any form inside dropdowns. Only links that work fine in other browsers.
This is an android browser thing. They handle links with dropdowns as both a hover and click. Other browser such as iOS handles menus with dropdowns as just the hover then another click to initiate the link.
I have a page with "main tabs" which behaves as follows;
1. On hover of these, I show "sub tabs"
2. On click of any of the main tabs, it goes to one of the default sub tab pages.
$(".mainlink_href").mouseover(function(){...}
Now these behaves as expected on desktop browsers. But on the iPad, when user clicks on any of the main tabs, it always does the hover method execution i.e. shows the sub tabs and does not go the sub tabs page (as in the desktop)
Now I agree, that this is as per expected iPad behavior since there is no mouse cursor to track for hover event otherwise...
But is there any way that I can update the code such that "only for the iPad" it does not go through the hover method for the first click and instead does the click event and directly takes the user to the default sub tab page (i.e. similar to point 2 above in desktop browsers)
Please help me. Thank you.
You could just assign both event handlers, and have the ontouchstart handler remove the onmouseover handler.
$(".mainlink_href").mouseover(function(){...});
$(".mainlink_href").ontouchstart(function(){this.mouseover=function(){};});