We have a custom input element that contains several div elements that are masked behind a canvas element. The div elements handle click events, and this works fine in all browsers.
How can we click such an element in Watir-Webdriver? If we locate the div element and use the .click method, it causes the error:
Element is not clickable at point (423, 247). Other element would receive the click: <canvas></canvas>
Which of course it would, before event bubbling. What we want to do is to click the location where the div element is (which first clicks the canvas, and then bubbles to the div).
We wouldn't want to fire JavaScript events directly to the div, as it does not correctly test the event bubbling.
You could, of course, just click the canvas element just like you clicked the div. But to answer the question you raised: you can try to access the underlying selenium-webdriver browser driver and utilize selenium-webdriver methods to do this.
driver = $browser.driver
element = driver.find_element(css:'div.class_name')
driver.action.move_to(element).click.perform
Related
I have a TinyMCE editor embedded in a page in which the outer element has an ondrop handler that uploads dropped files.
However, if the user drops a file on the TinyMCE editor, the parent handler is never called. Regardless of whether I enable or disable drag-drop in the editor, the event never propagates to the parent element.
Is there a way to propagate an ondrop event from the TinyMCE editor to the surrounding element?
The editor itself is an iFrame so if you want to propagate the event you need to make sure you are passing it to the parent if you want the page to get the event.
Perhaps you can make a TinyMCE Fiddle or CodePen of what you are doing so people can see what you have tried?
I have this page I can only access in the browser. There is a HTML element that only exists during drag&drop, and I want to get / analyze its HTML code in the Inspector / Firebug.. but as soon as I stop dragging, the element is removed.
Is there any way of getting the generated HTML element without wading through the JS source that builds it?
EDIT: got it, using the ctrl+S shortcut in chrome to save the page while holding mouseDown with the dragged-element did the trick.
Firebug html inspection shows the HTML of the page real time, so it does show changes caused by interaction. The trick is probably to scroll the inspection panel to the section of the HTML where your drag element appears. That way you would be able to see it while you drag.
GWT 2.5.1; using Eclipse 4.2 with GPE;
UI specified with UiBinder
The app puts up a splash screen containing a "Go" button. That button's click handler does various initialization, including hiding itself and showing three other buttons, images, and text; it also initiates a server request (XMLHttpRequest) via a RequestBuilder. The RequestBuilder callback uses the returned server data to draw a bar graph in a canvas element.
After I click the "Go" button the browser window looks as expected with all the visual elements mentioned above. But the three buttons are not responsive to clicks. Not only are their handlers not invoked, they don't show the slight visual indication of activation when the mouse is clicked on them. The browser is not frozen; e.g., if the window is resized the app's resize handler is called.
Based on logging: after the "Go" button handler returns the RequestBuilder callback executes; then "nothing happens" i.e., there are no more log outputs (unless I resize the window).
FWIW this is my first GWT endeavor.
By experiment, I found a partial answer. The three non-responsive buttons are declared in the ui.xml file with {style.hidden} referring to a visibility:hidden attribute in my .css. In the java code I unhide these buttons with:
protected void showElement(Element e) {
e.removeClassName(style.hidden());
}
Evidently starting life as hidden and then shown this way is insufficient to activate the buttons. I am about to go off to research why this is so, but an answer to this "smaller" question is still welcome as long as I've not posted a comment indicating that I am less ignorant.
(too long for a comment)
I have just discovered that the problem relates to the fact that I have buttons in the same position, of which only certain ones are supposed to be visible at a given time. In other words, the user would see at the same position on the page one of:
ButtonA ButtonB ButtonC
or
ButtonD ButtonE ButtonF
or
BigButtonG (as wide either of the preceding groups)
The problem is that regardless of visibility, whichever of the three above displays is declared last has (in effect) a higher z-index and is the only one that will be mouse-responsive. So I am just about to implement a solution of explicitly setting div z-indexes in the code which shows/hides button groups.
Can you set the button's positions in your UiBinder file rather than in your Java code? Place them in a HorizontalPanel and they'll be spaced automatically.
And rather than interacting at the Element level to hide a button, instead call your button instance with setVisible(true); e.g., buttonA.setVisible(true)
I have an empty div to which data may be appended dynamically through a ajax call on button click. I have Jscroll pane tagged to that div and its not working. The div is without scroll. But the scroll works when I put only a static data to that div. Please help me out.
You need to reinitialize the scrollbar whenever the content is updated. See an example here http://jscrollpane.kelvinluck.com/dynamic_content.html
I'm trying to use Firebug to inspect a page element that appears when I hover over a photo.
Problem is, the element's position is dynamically offset from the mouse position, so it's impossible for me to right-click on it to get the "Inspect Element" option.
I had hoped that the onhover element would be inserted into the DOM in a sensible place, but so far, I haven't been able to find it.
Any suggestions?
If you know where in the DOM the new element will be created (quite often those elements are created as children of the body element) you can set up a breakpoint for when it is created.
Let's assume that the element will be created as a child of the body element. You will be able to inspect the element if you follow these steps:
Load the page
activate FireBug's HTML panel
Locate the body element
Right-click on the body element and choose Break on Child Addition or Removal from the popup menu
Go hover over your photo to trigger the wanted element's creation
Script execution should then break as soon as the element is created. At that point you will have all the time you need to inspect that dynamically created element, even in the HTML panel.
This isn't an ideal solution, but you could investigate the onhover code to find out more information about the element that's being created. That info might allow you to find it in Firebug's DOM viewer.
Can you search for the element using the search bar at the top of the firebug window?
You can use CTRL+F to find it in the code view.