<div id="ResultPanel" class="panel-body table-responsive">
::before
<div id="ResultLoader" class=""></div>
<h4 id="screenName">
TestScreen
<small>
first
</small>
</h4>
</div>
I want to get the text from <h4> tag only, not along with the <small> tag text. When I am trying to get xpath of <h4> tag, it shows text as "TestScreen first". I am using
//*[#id='ResultPanel']/descendant::h4[#id='screenName']
You can use the following locator:
//*[#id='ResultPanel']/descendant::h4[#id='screenName']/text()[1]
I have tested it in Chrome Developer Tools is working like a charm.
Related
i want to fill text in selenium firefox broswer
how to find entering text selector its very complex for me please explain me the only way i want to achieve this using only css selector
<div class="Gb WK">
<div class="Rd"guidedhelpid="sharebox_editor">
<div class="eg">
<div class="yw oo"">
<div class="yw vk"">
</div>
<div class="URaP8 Kf Pf b-K b-K-Xb">
<div id="195" class="pq"
Share what's new...
</div>
<div id=":37.f" class="df b-K b-K-Xb URaP8 editable" contenteditable="true"
g_editable="true"role="textbox"aria-labelledby="195"></div>
</div>
</div>
</div>
</div>
You already wrote the cssSelector. However I will explain this for you. CssSelector allows you to use single/multiple attribute search. In case if you don't find a single attribute unique you can keep adding more attribute to the selector
Single attribute
[role='textbox']
Multiple attributes
[role='textbox'][contenteditable='true']
If you want to add div for a faster search that's possible too
div[role='textbox'][contenteditable='true']
Notice if I don't add div it's going to be tag independent search
For designs similar to this the image card used on Materialize: http://materializecss.com/components.html#
Screenshot: http://i.imgur.com/zvncUFz.png
Should I be using roles of a group or listbox for properly describing the content? I'm a tad lost reading through the aria accessibility specs.
Basic Structure:
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>Card Content</p>
<a href='#'>Authors</a>
</div>
<div class="card-action">
This is a link
</div>
</div>
Side question on possibly how to deal properly addressing the links for multiple authors.
I would consider this to be a figure with a figcaption.
I would mark this up as follows(in Jade):
figure
div.card-image
img(src="", alt="If needed, any descriptive text here will be spoken by a screen reader, but will not be visible")
span.card-title Card Title
figcaption Anything within this figcaption tag will automatically be spoken by the screen reader
a.card-action(href="#") This is a link
In this case, there is no need at all to use any ARIA attributes. All that is needed is semantic markup. I hope this helps.
I am encoding the link contained in a RSS in this way:
<div class="link">
<span> <%# System.Web.HttpUtility.HtmlEncode(XPath("link").ToString())%> </span>
</div>
the above is returning the link of such rss in text format, for example like this:
http://feedproxy.google.com/~r/EuropeanRailwayReview/~3/0pxP3t3rge8/
but as text not as clickable link.
Is there a way to get it returned as a hyperlink that can be clicked to navigate to the relevant address? Or, even better as something to click without showing the url?
Try this:
<div class="link">
<span> <%# System.Web.HttpUtility.HtmlEncode(XPath("link").ToString())%> </span>
</div>
Or this:
<div class="link">
<span> Link to Article </span>
</div>
I'm new to web dev and I'm working with Twitter Bootstrap right now. I am trying to create 3 columns on my page using this code:
<div class="container">
<div class="row">
<div class="span4">
<h4 class="muted text-center">About me</h4>
<p>Sample Text1.</p>
<i class="icon-user"></i> Text1
</div>
<div class="span4">
<h4 class="muted text-center">About you</h4>
<p>Sample Text2</p>
<i class="icon-star icon-white"></i> Text2
</div>
<div class="span4">
<h4 class="muted text-center">About Us</h4>
<p>Sample Text3</p>
Text3
</div>
</div>
</div>
I've looked at numerous examples and tested it on my page but they don't seem to work.
This code outputs all the text one above the other and doesn't divide it into columns in the same row.
Do I need to alter the bootstrap.css file in some way? The default one doesn't contain a span4 class or anything.
Assuming you might have fumbled up with the library you are using for bootstrap and the syntax. (happened to me a while back)
As of bootstrap 3.0...spanX have been depreciated,instead,col-xx-## is used now where xx can be lg, md, sm or xs and # ranges from 1 to 12
so in above html markup of yours change <div class="span4"> to <div class="col-xs-6 col-md-4"> and it should work
see the demo here
see docs here on how to use it
Also, if you are using ver 2.xx of bs...i'll suggest you to move to latest 3.0 on which this solution is based!!
I think you’re using Bootstrap 3 with the classes of Bootstrap 2. Grid class names have changed in the last version, see the documentation.
I have the following html structure:
<div class="decorator">
<div class="EC_MyICHP_Item">
<div class="text">
<h3><a target="_blank" title="" href="#"></a></h3>
text here text here text here text here text here text here
</div>
</div>
<div class="EC_MyICHP_Item">
<div class="text">
<h3><a target="_blank" title="" href="#"></a></h3>
text here text here text here text here text here text here
</div>
</div>
<div class="EC_MyICHP_Item">
<div class="text">
<h3><a target="_blank" title="" href="#"></a></h3>
text here text here text here text here text here text here
</div>
</div>
<div class="readmore"><a></a></div>
</div>
I am trying to select the LAST EC_MyICHP_Item, by using last-child, but in vain. (both CSS and jQuery) Could you help me?
Thanks.
You need to use :last-child at the end of the selector.
div.EC_MyICHP_Item:last-child
http://reference.sitepoint.com/css/pseudoclass-lastchild
Example: http://jsfiddle.net/jasongennaro/zrufd/
Please note: this will not work in earlier versions of IE.
EDIT
As per the comment about the last div being added and it interfering. You're right. It does cause :last-child to choke... at least in Chrome where I tested it.
If your HTML structure remains the same, that is, always three div.EC_MyICHP_Item, you could do this
.EC_MyICHP_Item:nth-child(3)
Updated Example: http://jsfiddle.net/jasongennaro/zrufd/1/
EDIT #2
unfortunately the number of EC_MyICHP_Item div's varies
In that case, I would use jQuery:
$('.EC_MyICHP_Item:last')
Further updated example: http://jsfiddle.net/zrufd/2/
.EC_MyICHP_Item:last-child should work well.
It's important to realize that E:last-child means "an E element, which is a last child", not "last child of E element".
I added the ID for merely testing purposes.
But use :last.
http://jsfiddle.net/aDbcW/1/
.EC_MyICHP_Item:last-child would only work if the div is the last child of its parent div. Since you have div.readmore as the last child of the parent, your selector wouldn't work. You need to use .EC_MyICHP_Item:last-of-type instead.
Edit: in jQuery this would translate to .EC_MyICHP_Item:last.