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.
Related
I'm using the ngx-bootstrap date range picker (https://valor-software.com/ngx-bootstrap/#/components/datepicker?tab=overview). I noticed that this picker (which displays two side-by-side calendars) seems to share the template with the single-calendar date picker: https://github.com/valor-software/ngx-bootstrap/blob/development/src/datepicker/themes/bs/bs-datepicker-view.html.
However, despite the presence of Clear, Apply, and Cancel buttons in the template, there seems to be no way to add them to the date range picker via the usual bsConfig method (when I tried, the options are ignored). This may have been a choice on the part of the developers, but whatever the reason, I want to add those buttons.
Is there any way to extend the date range picker in my Angular component to hook into those template elements?
Example...here is the section of the template that contains the apply and clear buttons:
<div class="bs-datepicker-buttons" *ngIf="false">
<button class="btn btn-success" type="button">Apply</button>
<button class="btn btn-default" type="button">Cancel</button>
</div>
There is an ngIf condition, but it's hardcoded to false. How might I override that to make these buttons appear? And, once they appear, how do I add click handlers, since they are omitted in the template?
Thanks for pointing me in the right direction. I've only been coding with Angular (v. 15) for two months, so things like this are still difficult for me to conceptualize.
I wanted to perform click on Panel element in Selenium Robot Framework
code below:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<span href="#panel" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle panelTitle collapsed" id="panel" aria-expanded="false">Text 1<span class="toggle-icon"><i class="fa fa-plus-circle"></i></span>
</span>
</h4>
</div>
I want perform a click on "span" tag the whenever I write in my selenium robot framework as
Click Link (in first column) id=panel (in second column)
It doesn't work.
In my previous projects it was working fine but I am not able to make it work in this.
This is pretty hard to answer without you providing your test code or more detail but I suspect the element doesn't exist on the page when you try to click it? What error message are you getting? Providing this can help get an answer quicker.
Reading your question closer, are you using the right keyword, are you actually clicking a link? i.e. something contained in link tags? e.g.
all we've done together
Here's a rudimentary example:
Wait Until Page Contains Element panel 10
Click Element panel
This link should help you find further information if you require it: http://robotframework-seleniumlibrary.googlecode.com/hg/doc/SeleniumLibrary.html?r=2.8#Page Should Contain Element
Other libraries contain similar keywords you could use like the Selenium2Library
i am trying to automate the login functionality of a site.I want to verify whether the tooltip is present or not and to capture the tooltip text displayed for the textboxes.The tooltip is displayed when trying to click on the login btn without filling the textboxes.The tooltip text is attached to the input elements via bootstrap javascript.No tilte attribute is present for the textboxes
https://elasticbox.com/login/ is the site address.Any ideas on how to capture the tooltip text .Thanks in advance
This is not a bootstrap tool-tip as you commented for #Varun's reply.
This is just the HTML5 form validation which comes into action when you put "required" as the attribute of textfield.
Make an html file 'test.html' file using the below code:
<html>
<body>
<form name='form1' post="http://www.google.com">
<input type='email' required placeholder='email address please' />
<input type='password' required placeholder='password please' />
<input type='submit' value='button1' />
</form>
</body>
</html>
Herein, when you click on "button1" (after opening the file in browsers like: Chrome, Firefox, etc.), you will see the necessary validation under the textfield(s).
But, there is no possible way to inspect them.
You can, however, use Sikuli/Autoit to check the presence of that validation text, but that again will be a lost cause as the image of the validation messages/tooltip differs from one browser to another.
Looks like developer needs to be consulted for this.
In javascript it seems like the signin button will remain disabled until both values are filled i.e. username and password.
I am not much into javascript, may be you can consult the developer in order to understand this more.
You can refer image below:
I understand the purpose of the title and alt attributes, but I just do not understand the best use for them or if I can use the same title/alt more than once.
For example, take a website about dogs:
From my understanding all img tags need an alt attribute:
<img src="Husky.png" alt="Husky" />
<img src="Rottweiler.png" alt="Rottweiler" />
Is it good practice to use the same alt attribute for multiple pictures on the same subject?
<img src="Husky2.png" alt="Husky" />
<img src="Husky3.png" alt="Husky" />
<img src="Husky4.png" alt="Husky" />
Is it good practice to use a title/alt attribute in every tag? What about using the same attribute more than a few times?
Example:
<ol title="This Dog">
<li title="This Dog"> Dogs </li>
<li title="This Dog"> Dogs </li>
<li title="This Dog"> Dogs </li>
<li title="This Dog"> Dogs </li>
<li title="This Dog"> Dogs </li>
</ol>
<div id="body">
<p title="This Dog"> </p>
<p title="This Dog"> </p>
<p title="This Dog"> </p>
<p title="This Dog"> </p>
</div>
My understanding is that the title attribute acts as a tooltip that appears when hovering over text. The kind of thing that has to be done in newer browsers but alt and title used to do the same thing back in older browsers. Those attributes also serve as a method for search engines to recognize your website.
My understanding is that the title tag acts as a tool tip/hover over information type of thing in newer browsers and the alt tags use to do the same back in the older browsers.
No, the title and alt attributes have a different meaning/purpose (not old method vs. new method).
title
The title attribute is a global attribute, which means that you can use it on all elements. In general (note that one some elements (e.g. the abbr element) it has a special meaning) it is defined as:
The title attribute represents advisory information for the element […]
You should read the definition of the attribute, it explains how it should (not) be used.
alt
The alt attribute can only be used on the area, input (for image buttons) and img element. For img, it has this meaning:
the value of the alt attribute is the img element’s fallback content, and provides equivalent content for users and user agents who cannot process images or have image loading disabled.
There are many rules how you should (not) use this attribute.
So, the alt attribute is an alternative to the image: EITHER you see the image OR you read the alternative text. The alt value should not be given/presented as an addition to the image.
The title attribute gives additional information, that would be provided to both (the users that see the image and the users that read the alternative text). However, you shouldn't use the title attribute as the only means for information of importance, because …
… the typical presentation is often "hidden" behind a tooltip (users don't necessarily know that a tooltip is present at all, because they don't hover over all elements)
… keyboard or touchscreen users often cannot see the tooltip at all, because they can't hover
… screen readers often don't read/announce the title value (in the default settings)
ALT:
Alt text mean alternative information source for those people who have chosen to disable images in their browsers and those user agents that are simply unable to “see” the images. It should describe what the image is about and get those visitors interested to see it.
Without alt text, an image will be displayed as an empty icon: without alt
In Internet Explorer Alt text also pops up when you hover over an image. Plus, Google officially confirmed it mainly focuses on alt text when trying to understand what an image is about.
An Image with alt but image is not displaying.
<img src="a.png" alt="Ann Smarty">
Another image without alt and image is not displaying.
<img src="a.png">
Title:
Image title (and the element name speaks for itself) should provide additional information and follow the rules of the regular title: it should be relevant, short, catchy, and concise (a title “offers advisory information about the element for which it is set“). In FireFox and Opera it pops up when you hover over an image: An image with title and displaying image.
<img src="a.png" title="Optimize Images For Search Engines, Social Media">
Read More:http://www.searchenginejournal.com/image-alt-text-vs-image-title-whats-the-difference/
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.