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 am having a problem with jQuery-scrollify. I have a header section which is a 100vh heigh and works without any problems. The next section is taller than the viewport. It scrolls down to it normally, but it prevents you from scrolling further down to look at the elements in that container. When I use the scrollbar and basically force it to scroll down, it snaps back up to the upper edge of the section.
I have tried changing the setHeights variable but that doesn't help.
The weird part is, that when I resize my window or open the Chrome inspector, it fixes itself. Because of that I tried calling the update method in the afterRender function, but that didn't work. Although it does work when I call the update method from the console. When Scrollify is installed I also get an issue where my footer is in the middle of the section above it. I do think that this issue is a result of the same problem as the scrolling , as that fixes itself when I update scrollify as well.
These are my settings:
section: ".scroll",
sectionName: "section-name",
interstitialSection: ".footer",
easing: "easeOutExpo",
scrollSpeed: 700,
offset: 0,
scrollbars: true,
target:"html,body",
standardScrollElements: false,
setHeights: true,
overflowScroll: true,
updateHash: true,
touchScroll:true,
before:function() {},
after:function() {},
afterResize:function() {},
afterRender:function() {}
I'm continuing this thread. Basically, I'm using jqGrid JS 5.3.0 with styleUI set to Bootstrap. The grid is inside a ".tab-pane" of a bootstrap tabs(https://getbootstrap.com/docs/4.0/components/navs/). The problem is that the grid shrinks to the left side of the tab pane on about 1/3 of full tab/screen width. I haven't set shrinkToFit but autowidth:true. Is there a cure for this? Thx.
It is good to know which Bootstrap is used 3 or 4, since Guriddo jqGrid support both with different style sheets.
The autowidth option work on element which width is known. The tab initially has a width = 0 which causes maybe this problem.
You can try to enclose the jqGrid code within setTimeout function with enough delay (since of the Bootstrap effects when opening the tab).
If the problem is not solved, please post your code ( jsfiddle.net or other place) to revise it and recommend a solution.
It almost seems like this is counter to the idea of Slickgrid and I'm not sure if it's possible but I'm going to throw it out there. I need a way to render every row of slickgrid permanently so when I scroll it's not constantly re-rendering things. Unfortunately, autoheight:true as a grid option is not viable as it makes the headers disappear when scrolling, and because it's contained in an iframe (which I can't get rid of, sadly), it makes it impossible to scroll through as well. The only other things I tried which didn't work were forceSyncScrolling and, based on the description, enableCellNavigation:false - just searching through grid options didn't give me any better ideas and I'm not sure where to go from there.
These are the current grid options I'm using:
var options = { // Grid Options
enableCellNavigation: true,
enableColumnReorder: false,
multiColumnSort: true,
rowHeight: 19
};
If any other code sounds like it would be helpful to post, let me know - I am just not quite sure where to go with this.
I am stumped. I am using JQGrid in IE9 and it doesn't behave like it does in other browsers. This is very easy to demonstrate. If you look at the Loading Data demo at http://www.trirand.com/blog/jqgrid/jqgrid.html and select "Array Data" and look at the grid, in IE9 it looks different than it does in Chrome, Safari or Fox. First off, it has a horizontal scroll bar? and the notes column extends past the end of the grid. If you try and use the column resize bar between the Total and Notes column in IE9 there is a big offset in the column line. This does not happen in other browsers. If you move the checkbox column to the end of the grid and when a vertical scroll bar appears, it hides the checkbox column. This again happens only in IE9.
I am using the 4.4.3 version of JQGrid.
If anyone can shed some light if I am doing soemthing wrong or a workaround it would be greatly appreciated.
Thanks
First of all I don't see any difference between the look of the "Loading Data" / "Array Data" page of the official jqGrid demo in IE9 and other web browsers which I have (Chrome 24, Firefox 18, Opera 12.13).
The page from the demo "Loading Data" / "Array Data" are made for very very old version of jqGrid and the current usage of jqGrid in the way would be very bad style. Instead of that one should move the line which definition and initializing of mydata at the beginning of the code, One should add data: mydata, gridview: true, options to the grid and add additionally either a pager (pager option or toppager: true option) or add rowNum with large enough value if one don't want to use any local paging of data. For example one could add rowNum: 10000 option.
To remove unneeded empty space in the grid I would recommend you to use height: "auto" (or height: "100%") or use alternatively scrollOffset: 0 option.