There is hidden link on a page. It appears only when manually mouse hovered over it.
But as a part of automation, I tried to use the following keywords and not fruitful result:
Mouse Over <XPATH to the link>
or
Click <XPATH to the link>
I got the below error :
ElementNotVisibleException: Message: Element is not currently visible and so may not be interacted with
What browser are you using? If it's IE, you will not be able to solve this problem due to how it handles mouse events - https://github.com/SeleniumHQ/selenium/wiki/InternetExplorerDriver
An alternative may be to use the 'Simulate' Keyword or execute it using javascript, my preference is to use the keyboard and take advantage of tab ordering.
This shouldn't be an issue in other browsers unless your locators are poor.
I have faced the same issue(when the element is at the bottom of the page and we need to scroll to find that element). I have come up with below steps.
1.Mouse hover over the target element(or parent)which ever the driver can determine the element.(Ex: Mouse Over > Xpath of element)
You can add sleep or wait to find the element in between 1 & 2.
2.Now click on the Target element.(Ex: Click Element > Xpath of target element)
It should work in chrome.(I haven't tried in IE or FF).
Hopefully this might help you
I'm working with the Firefox browser.
As suggested by the #supraja reddy , first I mousehovered on the parent and then on the final element. I worked.
Below the code snippet :
Mouse Over id=${parent_id}
Mouse Over id=${child_id}
Click Link id=${child_id}
Related
I am using Monaco Editor 0.22.3 in combination with StencilJS and TailwindCSS. Everything works great, except for an annoying visual glitch in the intellisense dropdown as depicted here:
As you can see, the last suggested item is partially obscured.
I suspect it might have something to do with some style coming from TailwindCSS, but I'm pretty much at my wits end here. I tried to use the F12 element inspector to see if I can find some hints, but that is proving to be close to impossible since the intellisense dropdown disappears as soon as it loses focus.
Any hints would be much appreciated!
UPDATE 1
Here's a screenshot with a bigger editor to demonstrate that the dropdown itself does not appear to be clipped:
UPDATE 2
Here's an animated gif showing the issue when trying to debug the HTML elements using the browser developer tools:
As you can see, the dropdown disappears as soon as I click anywhere else.
The issue comes from a fairly common css class being used: .tree. Libraries such as tailwindcss add padding-bottom to it for example. To undo some of its additions for the monaco editor we added the following to our css file:
.monaco-editor .suggest-widget div.tree {
white-space: unset;
padding-bottom: 0;
}
And to get get to that solution for other libraries and styling artefacts:
It should have been quite easy but the suggestion dialog has a tendency to hide when we try to observe it. so a UI guy and I spent a while going through the playbook to try to debug it. The only successful way to inspect it was to abuse the JS debugger by running (which was a hint from a stack overflow post that I'm struggling to find to give credit), and just cause the JS engine to pause:
Run:
setTimeout(5000);
This gives us 5 seconds to get the suggestion window to show (or set to a relative amount of time to the problem). After which, you could mostly inspect it as normal with a quick shortcut:
ctrl+shift+c that brings up the debuggers element selector.
Here we are, the suggestion was from the following post:
How can I inspect disappearing element in a browser?
break on subtree probably would have worked, but we became a bit impatient stepping through the changes. ctrl+ / didn't seem to help in this case, which left the odd setTimout to save the day.
The drop down is clipped at the editor's boundaries. I actually wonder how you can see the last empty part outside of the editor.
For inspection: use your browser's dev tools to see how the containers overlap. This will avoid that the editor hides the drop down.
Update
After your update I think now that somehow the styles are messed up. You will have to figure out a way to show the popup and still navigate the DOM tree in the developer tools. Try to locate the parent and see if that popup is only hidden (it still shows up then in the tree) or if it is dynamically created or is a portal, which lives in a completely different part of the tree.
If that cannot be done then try to disable all CSS you have and see if that solves the issue. If so enable the CSS piece by piece to find the culprit.
Scenario
I click on an element in the CSS styles tab of Chrome dev tools and then click the + symbol to add an instance of the selected element so I can make independent changes to it, this action creates an instance of the selected element (image 1).
Problem
When I click in-between the curly braces of the new instance of the element in the styles tab it then disappears (image 2).
Does anyone know why this his happening and how to prevent it? This doesn't happen when I follow the same procedure in FireFox and I've not encountered it before. It is also happening on every element.
Thanks,
This problem stopped happening when I updated my version of SASS.
Refresh icon. Can some one help me to locate an element (XPath or CSS) which is displayed?
<svg class="ult-icon .....height: 20px;">
HTML below: link.
The short answer is No, no one here can find the element you need for you. First, we'd need to see the entire page to tell you how to access the element, it may be in an iframe or multiple iframes, etc. Second, that's not really how this works.
What we can do is help you find it yourself. So, here's what I would try.
First, I'd use FireFox's developer version and inspect the element. To do this browse to the page in Firefox, right click on the element in the page and select inspect. This will open a new screen that you can use to see the HTML and JavaScript. From there you can right click on the selected element and copy the XPath, CSSS selector or grab the id from either of those.
Second, you need to determine if you are in an iframe. Once you are in the inspection screen, there is a path bar that can scroll left and right at the bottom of the screen. Check that to confirm that and look for iframe tags to determine if your element is inside of an iframe. If it is, you will need to switch to the correct frame before accessing the element. You may have to switch into multiple iframes, like moving through a directory structure, before you get to the correct one. Once you are there you should be able to access and work with the element.
Third, depending on the element you may find that some Find By methods work better than others. Try the Find By Xpath, CSS Selector, Link Text or Id until you get one that works. This is just trial and error. I usually start with the Xpath.
I have encountered an annoying problem while trying to debug some CSS in Chrome. I am rather new to CSS, and using Chrome's "Computed" window in the CSS developer tools has been very handy in figuring out where CSS properties I'm trying to assign are being overwritten later down the chain. (Please feel free to correct any incorrect terminology so I can be on the same page).
Here's an example of how it helped me successfully change the color for an active jQuery UI Tab:
http://1drv.ms/1yJzyec (don't have enough rep points yet to post a picture. This goes to my OneDrive.)
I need to use this approach to figure out what's going wrong with my CSS for a hovered or focused element. Here's the problem: as soon as I click into Chrome's developer tools to see the chain of inheritance for a specified element, it is no longer hovered/focused because I've clicked into the developer tools, preventing me from seeing the inheritance.
Are there any other tools out there that can help me dissect an HTML element's CSS inheritance chain in real-time?
Thanks!
Using Chrome developer tools, you can force the element to be in the hovered state.
Click on the Toggle Element State icon (dash-bordered box with pointer) to show this.
I have googled, but found no satisfactory answer.
Is there a way to execute a CSS selector live in the browser in the same way you can with JavaScript in the console?
I know I can modify the CSS in the Styles pain, but this doesn't seem to let me add psuedo selectors such as :first-of-type. It also doesn't appear to show all tags affected or the tag set returned by a selector.
Is there a way I can execute section.blah:first-of-type and see the returned or affected elements?
I'm using only Chrome right now but can use FF or whatever if it gives me this feature.
In the Elements tab, you can search with selector syntax.
If you search for
.myclass
you will find elements that have class="myclass"
I think that this is the closest that you can get to what you are asking
Go to the elements tab, and press ctrl+F (for find). in the example below, enter div.answer
to the right of the search string, you see "1 of 3" stating that 3 elements met your criteria. The current one is highlighted. and you can go up & down thru the items with the arrows.
If you use jQuery in your page then you can do:
$("section.blah:first-of-type");
Executing that in the browser console will show you a list of elements that jquery matched.
Better yet you can assign it to a variable and traverse it programatically.
Acctually you can do that just via editing the Styles pane.
You have to select a parent first(html in my case).
The result is:
In this way, chrome will show all affection instantly. Not just highlight the DOM tree.