I am try to automate the button press on stacked Modal dialog (Modal 2 on my screenshot), but get the following error: Element locator '/html/body/div[2]/div/div/div[3]/button[2]' did not match any elements.
even though that is the path to the button.. what am I missing please.
Sugestion:
Check your DOM with attention (..)
Maybe you have some iframe in there?
Related
I am running a test on a web app using Ruby-Watir-Rspec. It is very simple since I'm a beginner.
I open a form and enter the required information, but the "Create" button is not in the visible area, so I get the message:
Failure/Error: #browser.button(class: xxx).click
Watir::Exception::UnknownObjectException:
element located, but timed out after 30 seconds, waiting for #<Watir::Button: located: true; {:class=>xxx, :tag_name=>"button"}> to be present
Caused by:
# Selenium::WebDriver::Error::ElementNotVisibleError:
# element not interactable
If I scroll while the script is running, it clicks on the button and the test is successful.
I tried scroll.to, wait_until_present, scroll to coordinates, scroll_into_view, none of them worked.
The only way to make it work was to put " #browser.send_keys :tab" several times until it reaches the button at the bottom of the form.
I believe the problem is the button being inside the form which does not take the entire page (behind the form is the map so that part of the page doesn't have the scrolling option)...so is there some way to scroll inside the form? Or do you know some other approach to finding this button? Any hint is appreciated.
Btw, the page is maximized.
Here is the code snippet, just simple:
it 'should create the place' do
#browser.button(class: xxx).click
end
My guess is that this is a custom scrollable element that hides the content with the overflow: hidden style. Elements in the overflow are not considered visible/present. When you manually scroll, you're bringing the element out of the overflow so that it's present.
I've seen a couple of these in the past. Each one needed a different approach for scrolling. Without the exact HTML/CSS, it's hard to say how to scroll the element.
However, if you're not trying to test the scrolling, you could manually fire the click event. This will bypass the visibility requirements:
#browser.button(class: xxx).click!
Try using the Watir Scroll gem: https://github.com/p0deje/watir-scroll and scrolling the element to the center of the viewport: button.scroll.to :center.
You can also submit the form directly #browser.form.submit
To be clear, this is not highlighting in the sense of finding an element from the DOM Inspector to the page, or vice versa. It's behavior I haven't seen before, but then I usually use Chrome.
I'm debugging a textarea that won't accept clicks, or allow selection, or basically gain focus in any way. I noticed that clicking on the textarea, in the page, caused several DOM nodes in the Inspector to highlight, and then fade away after a second. None of the nodes that highlighted were the textarea; they were parents of the textarea, including the body, but not necessarily all of the parents in between the textarea and the body. There was also a sibling of one of the parents highlighted, as well.
It's one of those things where Firefox is trying to tell me something, but I don't know what. I feel like the answer to my original problem is probably contained in this highlight, if only I knew what it meant.
In the attached screenshot, you can see the textarea highlighted in blue, being the selected element, and the rather grossly-colored highlights on a few other elements; this was right after I clicked on the textarea (in the page, like I was trying to enter some text in it; not in the inspector)
What does it mean?
When the nodes in the markup view (the thing in your screenshot) highlights, it means that these nodes have gone through mutations. These can be of the following manner:
Attribute value change on the node
Addition/Removal of child nodes
Now, what you are actually looking a way to hover the textbox and get the markup view to select your textbox, right ?
You can do that in two ways:
Hit the shortcut Ctrl + Shift + C. You will see an overlay on the page which follows your mouse. Head over to text box and click it.
Click the "Pick an element from the page" button on top left corner of the developer tools and the same node-selector will appear.
For more and deep information : visit the MDN page : https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
Consider a webpage contains a IFrame, in that IFrame it contains only one
text box and a close button is present outside the IFrame.
According to this scenario,
how to click on the close button by filling in some values in Iframe text box
i.e First thing is to select the Frame using the command selenium.selectFrame("1_frame"); and
enter the text using the command selenium.type("id=name","test");
Problem here is,I need to click on the close button which is present outside the Frame.
What command should I use to click on the close button, present outside the frame?
How should I bring the focus to close button ?
Can any one help me out!
Thanks in advance .
After entering value in text box set focus to main window if close button is not part of IFRAME. You can do this by selectWindow("null") command.
Use Xpath or css path of close button and then perform click(Xpath).
If you are using firefox you can use firebug to get xpath or css path.
If it is not in iframe u can even use click(id or name)
if your IFRAMEs are Static then it can be handled easily.
If dynamic iframe present then You have to work from framework label.
I have referred this for creating error message tool tips, to be displayed continuously unless the error is resolved by the user. :: http://aralbalkan.com/1125 .....................
But, this is being applied to a pop-up window visualized as a pop-up form.
When the user clicks 'CANCEL' button, I want the error message tooltips if present to be cleared off from the screen. The message tool tips remains on the screen even if the CANCEL button is clicked.
The tooltips created are not linked to the dialog pop-up directly - i.e. they're not created as child widgets of the pop-up.
To work around this you hook into the cancel button with an on-click hander, and have the handler loop through all elements in the errorMessageToolTips dictionary, hiding each one.
Depending on your code structure, to avoid problems later on you may want to make the errorMessageToolTips dictionary specific to the pop-up and not a global array.
Sometimes I need to inspect elements that are only showing up on a page if you put mouse over some area. The problem is that if you start moving mouse towards firebug console in order to see the changes, mouse-out event is triggered and all changes I am trying to inspect disappear. How to deal with such cases?
Basically I am looking for something that would either:
Switch to firebug console without moving a mouse (using keyboard shortcuts maybe? But I can't figure out how to use firebug with keyboard only)
Have an ability to "freeze" the page so your mouse movements don't trigger any events anymore.
Thanks.
HTML Tooltip (Firebug)
Select the element with the inspector or in the DOM. Go to the "Styles" tab in firebug and click to the small arrow on the tab and select ":hover" (also available ":active"). The state will remain on "hover" and you can select other elements to make them hover.
HTML Tooltip (Firefox developer tools)
Click the button to see three checkboxes, which you can use to set the :hover, :active and :focus pseudo-classes for the selected element
This feature can also be accessed from the popup menu in the HTML view.
If you set one of these pseudo-classes for a node, an orange dot appears in the markup view next to all nodes to which the pseudo-class has been applied:
JQuery Tooltip
Open the console and enter jQuery('.css-class').trigger('mouseover')
Regular Javascript Tooltip
Open the console and enter document.getElementById('yourId').dispatchEvent(new Event('mouseover'));
The style panel in Firebug has a dropdown menu where you can choose the :active or :hover state.
You can also start the debugger on a timer. Enter this command into the console:
setTimeout(function(){ debugger; }, 10000);
This will give you 10 seconds to use the mouse and make the page look the way you want in order to inspect it. When the debugger starts, the page will freeze, and you'll be able to explore the elements in the developer tool tab, without the DOM changing or responding to any additional mouse events.
I think you can also do this :
Choose Firebugs Inspect mode
Hover over the item that pops up the element you wish to inspect and then use the Tab key several times to make Firebug active (I found it tricky to see when Firebug was the active component but nothing like trial and error - when I saw that Firefoxes Find Toolbar was active I'd then Shift + Tab backwards twice to get into Firebug.
Then I'd use the L/R arrow keys to contract/expand elements and U/D arrow keys to navigate through Firebugs console
Worked for me anyway!
For Jquery UI tooltip I finally set up a long delay for the hiding of the element so I have time to inspect it before it's deleted. For example, I used this to inspect the tooltip:
$( document ).tooltip({ hide: {duration: 100000 } });
instead of:
$( document ).tooltip();
You could insert a breakpoint at the start of the mouseout event handler. Its code won't be executed until you allow it to continue, and you can use the DOM inspector and so forth while execution is stopped.
Firebug's hotkey for inspecting elements is Ctrl + Shift + C (Windows/Linux).
Go here for a list of all Firebug keyboard shortcuts.
For the bootstrap tooltip:
$(document ).tooltip({delay: { show: 0, hide: 100000 }});
While selecting :hover in the CSS menu might be nice if you only want to inspect some CSS code, it doesn't work if whatever you want to inspect is changed using JavaScript.
A simple hack in this case is to open Firebug in a different window (top right corner of the Firebug bar) than move your mouse at the desired location and drag and drop something from there out of the browser window. Now you can inspect whatever in the Firebug window. Just don't move your mouse back into the browser window.
For Javascript events such as Mouse over.
Open Firebug/Inspect an element.
Click on the element before the mouseover event, e.g. click on a div. It will turn blue to show it is selected.
Put your mouse over the element and don't move it from this point forward.
Use your ↑/↓ arrow keys to manoeuvre in Firebug.
Use your ←/→ arrow keys to expand/contract code with + or -.
Double tap Tab to get to the CSS pane.
Use the arrow keys to navigate. Use shift and arrow keys to select text. Ctrl & C to copy.
Hold Shift and double tap Tab to get back to the HTML pane.
I'd like to chip in with my preferred method. Putting this little snippet in your console allows you to start the debugger at any time with a simple keypress on your keyboard (F8 is used in this example)
document.addEventListener("keydown", (event) => {if (event.key == 'F8') {debugger}});
You can also use a keycode if you prefer:
document.addEventListener("keydown", (event) => {if (event.keyCode == 119) {debugger}});
I found that Chrome does work a bit differently than Firefox. In particular, menus that close when the mouse is clicked outside of the menu remain open when inspecting them in Chrome (and they close when inspecting them with Firebug). So the advice is to try to use a different development tool in a different browser to see if it makes a difference.
Open console:
If you have javascript based tooltip, find applicable elements in console with appropriate selector. like below and confirm you able to find appropriate element with selectors.
$('your selector')
Write above javascript and Press enter. you will have list of elements.
Now e.g. If library added event on mouseenter enter following script:
$('your selector').mouseenter()
Press enter.
This way you can simulate mouse movement events without actual mouse. and can use actual mouse pointer to investigate thing in debugger tool.
This is an extremely old question by now, but I've found an answer that directly answers the "freeze the browser" portion of the question.
Control + Alt + B. This is "break on mutate". Which means, when you are hovering over an element with firebug engaged (Control + Shift + C), that when the HTML attributes would change, instead they hit a breakpoint, allowing you to easily navigate around to examine for paths, etc.