There is button description span in Microsoft Fabric button. What is the use of it? When that span is really used, I was expecting it will show tooltip but it doesn't show.
<button class="ms-Button buttonsInGroup" id="selectTimespan">
<span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
<span class="ms-Button-label">Select Timespan</span>
<span class="ms-Button-description">Modify the selected range for tags.</span>
</button>
In the Office Dev Center you can see an example for the compound button for which it is rendered below. For the other buttons I guess the main function could be for accessibility reasons like screen readers.
Related
On a form, I have a typical opt-in text checkbox but also have a link in that label. That link doesn't go anywhere but rather triggers a Bootstrap 3 Popover for additional detail.
It works, however clicking the popover link also unchecks the checkmark. Saw other questions on SO and solutions but they were for normal links and didn't apply to a javascript link link like this. Any thoughts?
The of course first thing one would think of is to have the link outside the label, but then the text won't wrap with the preceding text and will always have to appear beneath the disclaimer text which is not desired.
<div class="checkbox">
<label>
<input class="optin" type="checkbox" checked value="">My disclaimer text here. <a type="button" data-toggle="popover" title="Popover Title Here" data-content="Popover body text here">My Link</a>.
</label>
</div>
Assuming I need to integrate stop propagation somehow but can't seem to determine how to integrate in this scenario.
In web page,there are few tabs like CustomerAccountContact.
These tabs are inside SPAN html tag.
I have added the web element for Account in OR. When I try to highlight it works fine but when I try to click using Click method its not going to the Account tab.
If I take the abs_x and abs_y of the web element and try to click using mercury.devicereply object it works fine.
PFB, the html source code for accounts tab:
<a class="x-tab-right" onclick="return false;" href="#">
<em class="x-tab-left">
<span class="x-tab-strip-inner">
<span class="x-tab-strip-text ">
Account
</span>
</span>
</em>
</a>
Since the link has an onclick="return false;" this means that click events don't do anything and the application reacts to different events. Apparently these events aren't those that UFT fires when it simulates a Click event.
You have two options as I see it.
Find out what event the application is reacting to and fire that event in the test (instead of performing a click)
Use device replay, this can be done more simply than using the Mercury.DeviceReplay object as you're doing by changing the replay-type to device (as explained in this answer).
It is occurring because application is firing different event. Even fire event may not work in this case. Since it is already working with Mercury device replay it would be better for you to create and register it (RegisterUserFunc).
RegisterUserFunc "WebLink", "fLnkClick", "fLnkClick"
Use:
Before click method
Setting.WebPackage("ReplayType") = 2
After click method
Setting.WebPackage("ReplayType") = 1
If you set Replay Type = 2 then you are giving control to Mouse, which do the actions similar the way you do manually. So clicks, mouseover and other mouse related actions will work if normal QTP click fails.
Also we can use "Mercury.DeviceReplay" object for the implementing similar logic.
I guess the title says it all. I keep reading how the hamburger menu (the three lines that appear on a minimized menu) is so passe, but can anybody show me a way I can change the three lines to perhaps another shape, maybe chevrons perhaps?
You can change the icon by replacing this:
<span class="icon-bar"></span>
With something like this:
<span class="glyphicon glyphicon-play"></span>
Here's a fiddle showing this:
http://jsfiddle.net/edencorbin/gkssyqy9/
For test automation on a web app I am currently using Robot framework and the Selenium library. There comes the moment I want to click on a button and then I wait for an element to appear. Alas, the click, although recorded successful in the log, does not lead to the apparition of the element I wish. In fact it is as if the click never happened.
To click on the button, I retrieve it using xpath. Using Firepath I successfully verified that the element is unique and does exist but what it shows leads me to think I have found why the button is not clicked correctly
You can see in light blue the button I want to click on and wrapped with dotted line the zone detected by firepath.
Is it possible that the click is done next to the button instead on it ?
Here is the incriminated line :
Click Element xpath=(.//button[contains(#id,'editContract')])[1
Edit :
HTML of the page :
<button id="listContractTableForm:listContractTable:0:editContract" name="listContractTableForm:listContractTable:0:editContract" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" onclick="window.location.href='destinationPage?faces-redirect=true&contractEntityContractId=678'">
<span class="ui-button-icon-left ui-icon ui-c ui-icon-search"></span>
<span class="ui-button-text ui-c">ui-button</span>
</button>
Assuming you want the span with class containing ui-button-icon-left ui-icon ui-c ui-icon-search
//button[contains(#id,'listContractTableForm')]/span[contains(#class,'ui-icon-search')]
if you want the span with class="ui-button-text ui-c" simply change the class in the xpath
I'm wondering if there is an alternative for dijit.form.DropDownButton when it comes to the usage of TooltipDialog. On dojo guide reference it says "TooltipDialog can only be opened by other widget, usually DropDownButton", but I don't want that.
What I really want, and maybe a lot of people, is declarative way to call the dialog clicking on an image/link/or whatever, not only buttons. It's something like the Tooltip widget does with connectId.
See a sample what I am looking for:
<div dojoType="MyWidget">
<img src="test.png" /><!-- this image will be clickable to open dialog -->
<div dojoType="dijit.TooltipDialog">Text here</div>
</div>
Any thoughts?
Thanks!
You could extend the dijit.form.DropDownButton and provide a html template that is just the image.