I'm currently trying to find this tab and click on it. I'm trying to find a easier way of clicking on this button. In my code, I tried to use find command and it's unable to find this tab.
<div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab">Animals</div>
Code:
find('tab[div=Animals]').click
Not sure what I'm doing wrong.
It looks like you need to study CSS selectors a bit more. 'Animals' is text content and CSS does not provide a way to query on text content. In Capybara you can use the text option to filter matching nodes by their text content so combining valid CSS with the text filter like
find('div[role="tab"]', text: 'Animals').click
or
find('div.ant-tabs-tab', text: 'Animals').click
would be ways of clicking on that element
Note: I would recommend https://flukeout.github.io/ to learn what you can and can't do with CSS selectors.
Related
<a href="#" role="button" >
<span aria-hidden="true"> First</span>
<img src="D:/kk.JPG" alt="First name" width="20px" height="20px"/>
</a>
JAWS reads it as First First name button instead of First name button.
Is this a Firefox issue? How do I resolve this without using aria-label for the outer anchor tag.
The problem, here, is that JAWS does not consider this element itself, but it is used in the calculation of the text alternative for the link.
To solve this, you can try to remove the redundant text from the img alternative name.
I would make a guess on the pertinence of the image alt here as it is inside a link with other text, so you don't have to describe the image but the purpose of the link.
Of course, if you hadn't said so, I would have suggested to use aria-label.
See the following page: webaim.org/blog/alt-text-and-linked-images
In the above example, because text within the link provides the content of the image and the function of the link, the image itself can be given an empty alt value. An image within a link is something very specific: you don't have to consider the image alternative but the link alternative.
According to WCAG, when an image is the only element inside a link, it should describe the purpose of the link. When you use aria-hidden=true on the only other element, you fall in this situation. As a consequence: the alt for this image should describe the purpose of the link and you have to forget about the description of the image. That's being said, as this does not work in Jaws/Firefox, if you can remove the redundant part, it's the best option
Is there a way to make input text inside a link tag works well in IE8? I cannot place the caret inside nor select the text within it.
<input type="text">
I think the reason why I'm trying to do this is not important here, just consider I have no choice of make it work under an <a> tag. I only have control over what's inside the <a> tag.
As a solution, I was thinking about some JQuery DOM manipulation when in IE8 mode but there must be a easier/cleaner way of fixing this "bug".
Thanks
I think this is due to the input and link tag display properties, while an input is display:inline-block; your link is display:inline;. Try to play with these properties and z-index if it's not working.
Hovever, i think jQuery solution is better, and simpler, except if this is your only usage of jQuery on your page.
HTML :
<input type="text" />
jQuery script
jQuery(document).ready(function(){
$("#myInputLink").click(function(){
// .trigger('focus') or .focus(), but the first one is better on my own
$(this).next('input[type="text"]').trigger('focus');
});
});
Have a nice day.
I have the following HTML:
<input type="submit" style="-webkit-user-select:none;line-height:100%;height:30px" value="Advanced Search" class="jfk-button jfk-button-action adv-button">
I have written xpath as: //input[#value='Advanced Search']
What is the CSS locator/path?
It's difficult to answer as optimum search selectors need the entire source code to be written, as several DOM Elements in the document could be returned for a generic selector.
In this case, a more detailed selector would be :
input.adv-button[value='Advanced Search']
You can convert your xpath into corresponding CSS Locator by using the following website:
http://cssify.appspot.com/
For example:
Go to site http://cssify.appspot.com/
Insert the XPath //input[#value='Advanced Search'] into text field
Click submit button and observe the result
You can see the corresponding CSS Locator as follows:
input[value="Advanced Search"]
Folks,
I have an image with the following HTML code:
<div unselectable="on" class="x-grid-cell-inner x-unselectable" style="; text-align: right;" id="ext-gen1453">
<img alt=""src="data:image/gif;base64,FRFRFR/GFFFFFFFFFF==" class="x-action-col-icon x-action-col-0 folder-action-add folder-action" data-qtip="Add New Music File" id="ext-gen1300">
When I click on the image it should open a pop up so that I can add new music file, I tried a few things but I am not able to click on that image. Any suggestions?
Thanks a lot
You can click on it by the class or a partial match of the class.
#browser.image(:class=>/folder-action-add folder-action/).click
Here is a list of the identifiers you can use for watir, I think it's mostly the same for watir-webdriver.
So far, you haven't got a consistent way of actually identifying the element. From what you've said in the comments, you've tried the 'text' attribute which doesn't exist, and the 'id' attribute which is auto generated and different every time.
You need to find a way of consistently identifying the element. It's usually preferable to use a semantic class on the element to make styling and testing easier and less brittle. You have a few classes declared, perhaps 'folder-action-add' expresses the intent of the button clearly? If not, you could add one such as 'add-music-file'.
Then you should be able to use watir to select an element by it's class, I'm not familiar with the syntax but at a guess, #browser.image(:class => 'add-music-file') might do the job.
I want a sidebar on article page, with additional info. Is there such a solution for Joomla 1.5.
I mean that I add an article and the info is pulled from my text between the tags e.g.
{info_for-sidebar}
Lorem ipsum....
{/info_for-sidebar}
And this info shows in sidebar for current article with actual info.
Is this possible?
Setting up something like what you are asking for require some sort of workarounds.
First, lets agree that what you are calling a "sidebar" is nothing but a content... You enter that content as a part of your article.
So, to achieve what you are asking for I would recommend you use what is called CCK - Content Construction Kit - extension for Joomla using Form2Content. There's a free light edition that would be enough.
Form2Content let you setup a content type. You define what fields you want for each content. Then you create a template that will use the info you are going to enter on the fields to built an article layout.
So let's say you are going to create 3 fields like this :
1- Intro text
2- Full text
3- Sidebar
You are going to create a template as we said. each content type will have 2 templates an intro text template and a full text template
The full text template shall be like this :
<div class="content-container">
<div class="content-sidebar">{$SIDEBAR}</div>
<div class="content-fulltext">{$FULLTEXT}</div>
<br clear="both" />
</div>
The {$SIDEBAR} and {$FULLTEXT} are the text you entered in the form and Form2Content will use it to create a regular content with layout.
If you don't want to use another extension or that solution looks too complicated, you could use a javascript solution. For example you could create an HTML module in Joomla and assign its to the sidebar. On this module switch the view to HTML code and enter this:
<div class="content-sidebar"></div>
When you enter an article, switch the view to HTML code and enter the text you want to show on the sidebar and add a class to the paragraph or the div like this :
<p class="special-content">Lorem ipsum dolor<p>
Then use jQuery to append this special text to the sidebar like this :
jQuery(".content-sidebar").append(".special-content");
Note: Joomla does not load jQuery by default, you have to add it on your template or use a plugin.