I am trying to click a button/element on a popup window using Selenium2Library in Robotframework:
Click Element name=OK
But I get the following error in Robotframework:
ValueError: Element locator 'name=OK' did not match any elements.
I Believe this is happening due to an ui-widget-overlay that does not disappear. Below are snippets from the html code, containing the Ok button and the ui-widget-overlay:
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">OK</span></button>
<div class="ui-widget-overlay" style="width: 1793px; height: 620px; z-index: 1005;"></div>
I know that I can successfully click element using xpath, but the xpath is dynamic in this case and I want to use a fixed value. Also, "Click Button" keyword did not work either.
Please let me know how I can go about this.
Have you tried looking at the class attribute of the button? To me it sounds like that might provide a more stable xpath or css reference. For example //button[contains(#class, 'ui-button')]
You've misinterpreted the text of the button (OK) to be itsname attribute. An attribute is part of the XML/HTML tag, e.g. it should have been something like:
<button class="some values" name"OK">
, which it's not in the sample.
As you are looking for the particular button by it's visible text, this xpath locator would match it:
xpath=//button[span[#class="ui-button-text" and text()="OK"]]
The expression reads "match a button element having as a direct child a span with that class and text"
Related
I am trying to put outline on a font awsome while navigating with keyboard, but it is not working. I tried to add aria-hidden="true" tabindex="1" like suggested in another post but it still doesn´t work.
<div class="faContainer">
<a class="homeAnchor" href="" aria-hidden="true" tabindex="1">
<i class="fas fa-home fa-2x">
</i>
</a>
</div>
CSS
a:focus{
outline: 3px solid white;
}
tried also targeting i element
Few issues to address here:-
Never use positive tab index
A positive tab index disrupts the natural tabbing order, you want tabindex="0" in order to make something that isn't normally focusable able to accept focus. It is also not needed in your example as <a> elements are focusable by default.
aria-hidden has nothing to do with focus
aria-hidden is to do with the accessibility tree. By adding this attribute you are telling assistive technology (i.e. screen readers) to ignore this item. Remove this.
empty hrefs can get ignored
Your href="" attribute can be ignored in certain circumstances as it is not a valid hyperlink.
Add href="#" during testing if you do not know the URL you want to point it at currently.
If it is going to be used to make a change on the current page use a <button> element instead as that is semantically correct (i.e. it is going to work with a JavaScript function rather than function as a link).
how to find out why outline isn't working
The above CSS (on a dark theme) should work fine.
On Google Chrome -> Open developer tools (F12) -> inspect the element.
Top right you will see Filter :hov .cls +
Select :hov and click the :focus checkbox.
There will be a rule set that is over-riding your a:focus rule, either by being more specific (e.g. a.homeanchor:focus) or by using !important.
That rule is likely to be outline:0 or outline:none so you could also try doing a search within your CSS for those terms to identify the issue.
How to select Actions Button followed by the Div class containing known Text ( for example, card_header-title"Addresses" in this case) in Robot Test Framework?
The page contains several span table sections and each of them has its own actions and show-history buttons. To select the specific Actions button, I could use its xpath, but I am trying to access all sections in a for loop and the xpath of actions button in one section changes from the other, so hard coding is not an option for me. Would someone please help.
<div class="attribute-group-header card__header">
<h3 class="attribute-group-title card__header-title">Addresses</h3>
<div class="floatright">
<input type="button" class="action small btn" value="Actions">
<input type="button" class="showHistory action small btn" value="ShowHistory">
</div>
</div>
I know you say you don't want to use Xpaths but maybe one of these examples could help. I don't see any other way of achieving what you're asking for other than having id's supplied on the buttons.
You could use an xpath locator that first finds the text of the "attribute-group-title card__header-title" element and then selects the following sibling div, followed by the input:
//*[contains(text(),'Addresses')]/following-sibling::div[1]//input[#value='Actions']
Can't find the right words to explain so here's a code example:
<button class="btn btn-default">
<i class="glyphicon glyphicon-alert"></i>
<span>button</span>
</button>
<button class="btn btn-default">
<span>button</span>
<i class="glyphicon glyphicon-alert"></i>
</button>
Two buttons, one with a glyphicon at front, one with glyphicon at end
Now let's say we want to add more of a gap between the word and icon:
.btn {
> .glyphicon:first-child {
margin-right: 15px;
}
> .glyphicon:last-child {
margin-left: 15px;
}
}
Works nicely like so: http://codepen.io/anon/pen/wzxRPw
My question... How would this be done without the extra span around the words?
If I remove the span then the glyphicon is the only element, so it's treated as both the first and the last
Edit: Note: My intention in the question is to find out how/if this can be done without adding an extra class, and without the span tag.
I'm aware that maybe the ideal solution is to keep the spans or add a class, I just thought perhaps there was a way to do this in CSS that I had no knowledge of (I'm still learning)
I feel like you're trying to eliminate code that really doesn't need to be eliminated (that's just my opinion). No matter what you do, if you don't wrap the text in a span tag or something of that nature, there's only going to be 1 child element of the actual <button>. Meaning, you won't be able to target anything other than that element without explicitly setting a class or inline styles. The span tags are a great solution, but if you insist on getting rid of them you have a couple of other options (however, I think the span tag is the best):
Create a CSS class that defines margin offset and set that to the according button. So, you'd set a class like .margin-left to one and .margin-right to the other
You can write inline styles for each of the glyphicons.
Like I said above, I think you have the best solution of your options. I don't think there is anything else you can do.
The only reasonable solution without span is to add a class:
<button class="btn btn-default icon-on-left">
<i class="glyphicon glyphicon-alert"></i>
button
</button>
<button class="btn btn-default icon-on-right">
button
<i class="glyphicon glyphicon-alert"></i>
</button>
and style it appropriately. But that creates maintainability issue: while changing content of the button you need to change its class in sync.
I'm not clear what you exactly want to get as the result, still ill tell u some ideas you have to decide whether it suits ur need or not.
If you can you can add between glyphicon and the span
If you remove only span tag then you can set respective margins for span tag instead of glyphicon
Iam getting a problem while i place mouse on tooltip only when the page loads intially. When i login to website, after the page is loaded when i place my mouse on '?' glyphicon symbol, iam able to see the whole title script that written inside the html.
This is the below text iam seeing when i hover. This is the title with close button 'x' inside the tool tip.
About your score<button type=button class=close data-dismiss=popover aria-hidden=true onclick=$('#abcPopover').popover('hide')>×</button>
I made the tooltip clickable. when i click on '?' glyphicon symbol the popover is not coming on first click and the script is now hiding. when i click on '?' glyphicon symbol second time it works fine the popover is coming. This is the problem iam seeing only on when page loads and when i click on '?' glyphicon symbol the title will hide and on second click works fine and popover will come up.
This is the code i have written in html.
<a href="#" id="abcPopover" data-html="true"
title="About your score<button type=button class=close data-dismiss=popover aria-hidden=true onclick=$('#abcPopover').popover('hide')>×</button>"
data-toggle="popover" data-content="{{abcTooltip}}" ng-click="open()"><i class="glyphicon glyphicon-question-sign"></i></a>
nesting a button in Html tag it isn't valid HTML5 according to the HTML5 Spec Document from W3C:
Content model: Transparent, but there must be no interactive content descendant.
The a element may be wrapped around entire paragraphs, lists, tables,
and so forth, even entire sections, so long as there is no interactive
content within (e.g. buttons or other links).
In other words, you can nest any elements inside an except the following:
<a>
<audio> (if the controls attribute is present)
<button>
<details>
<embed>
<iframe>
<img> (if the usemap attribute is present)
<input> (if the type attribute is not in the hidden state)
<keygen>
<label>
<menu> (if the type attribute is in the toolbar state)
<object> (if the usemap attribute is present)
<select>
<textarea>
<video> (if the controls attribute is present)
However, if your <button> tag is styled using CSS and doesn't look like the system's widget... Do yourself a favor, create a new class for your <a> tag and style it the same way.
Check this link out to create your tooltip. Link
Fiddle
I'm trying to make a "clickable" region.
<a
style="display: block"
href="http://stackoverflow.com">
StackOverflow
</a>
A is an inline element but the CSS made it a block.
If the above is valid, then the following should be valid too:
<a
style="display: block"
href="http://stackoverflow.com">
<div>Some DIV that links to StackOverflow</div>
</a>
But validator.w3.org shouldn't be flagging it as invalid (which it is right now).
If it is invalid, what would be the most proper way to make a block element "clickable" and redirects to an arbitrary page. I'm aware I can use JS onclick to achieve this behaviour, but how will Google see this?
The validator is correct - you can't put <div> inside <a>, no matter what you do afterwards with CSS.
The proper thing to do is what you did in your first code block - <a style="display: block;">
If you want something inside that you can do <a style="display: block;"><span style="display: block;">
Don't confuse valid HTML with valid CSS. It is valid to use the display css property to make inline elements block. It is not valid to put block HTML elements within inline ones.
It doesn't follow that the one being valid implies the other has to be. There are nesting rules for HTML, and div-within-anchor doesn't fit them, which is why validator.w3.org is giving you a hard time.
If you truly must have a div, rather than text, images or <span style="display: block">s, that's clickable, then yes, you will have to use an onclick event. Google will not understand or acknowledge the existence of the link. (You may be able to cope with this by having an anchor on something that anchors can apply to, in addition to the onclick div.)
Something I've done in the past with this sort of problem is invoke the click on the parent element (My example uses jQuery):
<div class="link">
Visit Google
</div>
$(".link").click(function(){
document.location = $(this).find("a:first").attr("href");
});
With styles you could make the entire area appear to be the link by setting the cursor, a roll-over state, etc.
First you need to know whether you want to use strict or transitional XHTML (frameset is not useful here). Then you look into the DTD (link) and you'll see that A cannot have a DIV inside.
Why don't you use an area tag for this? It is supposed to define the clickable area in an imagemap.
Google bots now follow simple javascript links, so using JS on the onClick event of your div is an option. Other search engine bots don't do that, but sooner or later they will.
More info in this article.