Trying to built correct xpath - css

I have a problem with building an xpath, maybe you have an idea.
I am working on some automation and I really need to get the full path to this "delete reminder" button, but it must be also checking name, which is located in span 7 (Dh3M5EdV6l in this case). Tried everything, nothing works, it must be that name somewhere included, but I just have no idea how to combine values from 2 spans into one path. Is it possible?
CSS might work too
<li class="row-fluid" data-target="upcoming_reminder_row">
<div class="span7">Dh3M5EdV6l</div>
<div class="span3">Oct 10, 2025 12:00 PM EDT</div>
<div class="span2">
<div class="pull-right">
<i class="icon-Edit" data-target="edit_reminder" data-value="67">
</i>
<i class="icon-Close" data-target="delete_reminder" data-value="67">
</i>
</div>
</div>
</li>

Basically, we need to locate the li element that has the "span7" element with an appropriate text. Then, we'll locate the desired button inside it. Both things in a single XPath expression:
//li[#data-target = "upcoming_reminder_row" and div[#class = "span7"] = "Dh3M5EdV6l"]//i[#data-target = "delete_reminder"]

Related

How to locate Button followed by card_header-title containing specific text in sample html

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']

ARIA: Treat HTML element as a whole

Is there any way to tell an assistive tool to treat an element (e.g: <div>) as a whole, and not split it in child elements?
First example
Using iOS VoiceOver and a with a field on it, it gets splitted into two different elements:
Second example
This elements are splitted in two parts, where the best solution would be read "122 points" and "First position":
<div class="row">
<div class="stat lg col-xs-6">
<span>122</span>
<i class="icon icon-prize" aria-hidden="true"></i>
<h5>Points</h5>
</div>
<div class="stat lg col-xs-6">
<span>1ยบ</span>
<i class="icon icon-prize" aria-hidden="true"></i>
<h5>Position</h5>
</div>
</div>
VoiceOver on iOS does indeed sometimes split a sentence, although your example code actually works fine. I used your code as the first line in the screen shots below and then copied the text without the <a> tag as the second line. The second line gets broken up by VoiceOver but the <a> tag does not.
<span class="label info">
<a href="/round/next">
Next round starts <strong>in 3 days</strong>
</a>
</span>
<br>
Next round starts <strong>in 3 days</strong>
(Note: I have the enhanced outline turned on for VoiceOver so the black outline is probably thicker than what you're used to seeing.)
I found that using role="button" the element is treated as a group and its innerText property is read, but announced as a button.

how to find complex css selector

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

What is the correct alternative for the attribute "name"?

When I validate this page with the w3c validator, I am told that "the name attribute is obsolete," however, I cannot find an alternative. Every article I can find about linking within a page still seems to specify using the name attribute. And the method that is mentioned on the validator (linking to an "id") doesn't seem to work for me.
Anyone know the correct alternative, or how to correctly link to an id?
Also, I'd like to be able to link to a specific point just above where the anchor points currently are...is there any way to be more specific about where the page scrolls/jumps to?
http://firewalkcreative.com/2012/2012.html
You can skip to any element with specified identifier like that:
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
Skip to navigation
you can use a class name or an id:
<a id="top"></a>
<a class="top"></a>
or you can assign multiple class to make it more specific
<a class="link top"></a>
or with html5 you can do this:
<a data-name="top" ></a>
in the old days, speek html 4, you could to internal links like:
link
and the target would be
<a name="bottom"></a>
Now this days we do it like that:
link
target:
<foo id="bottom"></foo>
You see i use foo, because it can be whatever element you like

trouble finding element on page using xpath or css

Guys, I'm trying to write xpath or css to find/click on list element "All" based on known span(in this case SNG NAME below). On page, there are different lists Which can contain same list item called as "All". So we have to identify "All" based on span(in this case SNG NAME below)
can someone shed some light on my issue
<html>
<head>
<body>
<div class="grc_selected">
<div class ="lbl_selected">
<span> SNG NAME </span>
</div>
<div id="id1" class="cl1">
<ul id="id_ul">
<li class="tclass" title="[1] All">
<img class="treeIcon" src="1/2/3.gif"/>
<span class="inA">All</span>
</li>
</ul>
</div>
</body>
</head>
</html>
You could use an XPath query like:
//div[span=" SNG NAME "]/following-sibling::div//span[.="All"]
That targets the div which contains the span whose text value is SNG NAME, then moves to the following div (id1) and finally targets the span inside it containing the text All. This makes the assumption that the HTML is fixed (there's currently mismatching div tags) in such a way that the above query structure makes sense (by placing the missing closing div tag between the </ul> and final </div>).

Resources