I have the following type of element,
<td class="x-btn-mc">
<em id="ext-gen141" class="x-btn-split" unselectable="on">
<button id="ext-gen33" class=" x-btn-text" type="button">
<div class="mruIcon"/>
<span>Legacy CaseMon</span>
</button>
</em>
</td>
In this I am unable to select exact co-ordinates of drop down arrow,
And the xpath for all the list of options are also same( <//*[#id='ext-gen141']> )
Only thing varies is Span (Say I have to select "Cases",then span value becomes <Span>Cases</Span>)
Can anyone please help me choosing the different value
Thanks..
Related
I'm working on a discount item, and I'm trying to show both the original price and the new price. I want the original price to be crossed-out and faded. I already have the line-through, but I can't figure out a text fading style. Does CSS have anything like that?
Thanks!
Here's my asp code:
<div ID="OriginalPrice" class="pricing-price">
<span class="price-unit">$</span><asp:Label style="text-decoration: line-through" ID="lblOrigPrice" runat="server">This is a test</asp:Label><span class="price-tenure">/mo</span>
</div>
You can use opacity for that. Its value could be between 0 and 1, like opacity: 0.5.
<div ID="OriginalPrice" class="pricing-price">
<span class="price-unit">$</span><asp:Label style="text-decoration: line-through;opacity: 0.5;" ID="lblOrigPrice" runat="server">This is a test</asp:Label><span class="price-tenure">/mo</span>
</div>
You may want to very the value slightly in order to get what you want.
HTML:
<div class="validation-summary-errors text-danger">
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine">To field is required</span>
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine">To field is required 2</span>
<span ng-show="Mail.Subject.$error.required && !Mail.Subject.$pristine">Subject field is required</span>
<span ng-show="Mail.Subject.$error.minlength && !Mail.Subject.$pristine && !focusSubject">Subject length must be at least 3</span>
</div>
Generated by Angular HTML
<div class="validation-summary-errors text-danger">
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine" class="">To field is required</span>
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine" class="">To field is required 2</span>
<span ng-show="Mail.Subject.$error.required && !Mail.Subject.$pristine" class="ng-hide">Subject field is required</span>
<span ng-show="Mail.Subject.$error.minlength && !Mail.Subject.$pristine && !focusSubject" class="ng-hide">Subject length must be at least 3</span>
</div>
CSS:
.validation-summary-errors > span:not(.ng-hide):last-child {
display: block;
margin-bottom: 20px;
}
Problem:
This CSS select span which no have ng-hide class AND is last child at the same time.
Need:
Select span which no have ng-hide class and last child among them, i.e. only second span.
Only CSS please or another way show some block errors with padding if errors is exists.
As mentioned in comments, that's pretty tough to pull off with just CSS. As an alternative to what you are trying to do, you could attempt to come at it the other way around, by selecting the first element with the class of ng-hide, which is easier because of the way that selectors can only select forwards of elements:
.validation-summary-errors > :not(.ng-hide) + .ng-hide
would select the element immediately after the element you are trying to select now, which means you can sort of flip your styles around.. use margin-top on it instead of margin-bottom on the one previous, etc.
This may not give you exactly what you want, depending on how exactly you are trying to style your elements, but it might work.
I am using a bootstrap on hover pop up(using data-toggle and data-content) in ng-repeat as below .
<tr ng-repeat="row in docDetails">
<td class="uploadedDocs"> {{row.EnrollmentDocumentTypeName}}</td>
<td class="uploadedDocs">
<div class="col-sm-2" data-toggle="popover" data-content="Uploaded By:{{row.DocumentUploadedBy}} Uploaded Date :{{row.ChangedDateTime | date:'dd-MMM-yyyy HH:mm:ss'}}" data-trigger="hover">
{{row.FileName}}
</div>
</td>
Now after I added it inside a <td>, the pop up content is getting limited by td size, I want the pop up to be displayed fully, and not restricted inside table data.
any suggestions?
I could fix it using data-container="body"
I'm using the small module Link Badges to display a badge with the amount of flagged nodes next to a link to the View in question. It works great and I've styled the badge to my needs. This is the current HTML code:
<a class="menu__link menu__link link-badge-wrapper">
<span class="link-badge-text">My View</span>
<span class="link-badge-badge-wrapper">
<span class="link-badge link-badge-menu_badges_execute_view">0</span>
</span>
</a>
Now, I'd like to display the badge a little bit differently (other colors etc.) when the value is 0. I thought about doing this by adding a new CSS class link-badge-zero to the value.
<a class="menu__link menu__link link-badge-wrapper">
<span class="link-badge-text">My View</span>
<span class="link-badge-badge-wrapper">
<span class="link-badge link-badge-zero link-badge-menu_badges_execute_view">0</span>
</span>
</a>
How can I achieve this?
If you just want to add a class if the value inside your span is "0", give this a try
JQuery:
if($(".link-badge").text() == "0"){
$(".link-badge").addClass("link-badge-zero");
}
Here is a fiddle
Both these buttons have almost similar ID (the number on the ID may change and so is not reliable)
Both have same classes
They both reside under the same parent
Except for the span nothing is different
All the UI elements of the application I am trying to locate and build events on Using Selenium are similar to the below piece...
Can anyone please suggest how I can locate these buttons preferable with xpath?
<div id="button-1749" class="x-btn x-box-item x-toolbar-item x-btn-default-toolbar- small x-noicon x-btn-noicon x-btn-default-toolbar-small-noicon x-item-disabled x-disabled x-btn-disabled x-btn-default-toolbar-small-disabled" style="margin: 0pt; left: 1563px; top: 0px;">
<em id="button-1749-btnWrap" class="">
<button id="button-1749-btnEl" class="x-btn-center" autocomplete="off" role="button" hidefocus="true" type="button" aria-disabled="true" disabled="">
<span id="button-1749-btnInnerEl" class="x-btn-inner" style="">Delete Selected</span>
<span id="button-1749-btnIconEl" class="x-btn-icon x-hide-display"> </span>
</button>
</em>
</div>
<div id="button-1750" class="x-btn x-box-item x-toolbar-item x-btn-default-toolbar-small x-noicon x-btn-noicon x-btn-default-toolbar-small-noicon" style="margin: 0pt; left: 1654px; top: 0px;">
<em id="button-1750-btnWrap" class="">
<button id="button-1750-btnEl" class="x-btn-center" autocomplete="off" role="button" tabindex="1" hidefocus="true" type="button">
<span id="button-1750-btnInnerEl" class="x-btn-inner" style="">New Title</span>
<span id="button-1750-btnIconEl" class="x-btn-icon x-hide-display"> </span>
</button>
</em>
</div>
If you want to look for the elements under a specific div, you can use descendent axis.
Example:
//div[#id='your div']/descendant::button[contains(#class, 'x-btn-center')]/span[text()='Delete Selected']"
This will give you Deleted Selected button that is within the div with id 'your div'.
You could also use GetElements (opposed to GetElement) and this will return a List of elements that match your search criteria. Then, providing the order the buttons appear on the page never changes, you may use this List to access the button you want every time by using the associated index.
Eg.
ReadOnlyCollection<IWebElement> buttons = driver.FindElements(By.XPath("YOUR XPATH HERE"));
//If it's the 3rd button that matches your criteria
buttons[2].Click(); //or whatever you want with this button :)
I think this should work in your case:
locator = driver.find_element_by_xpath("//div/em/button/span[contains(text(),'Delete Selected')]")
You can do similar way in case of another element.
though xpath is a desired locator per your question, there are documented speed differences between xpath and css selector, here's one example: http://saucelabs.com/blog/index.php/2011/05/why-css-locators-are-the-way-to-go-vs-xpath/. to locate those elements via css selector, use the following, python example
els = driver.find_elements_by_css_selector("button[id^=button]
for eachel in els:
eachel.click()
You have to create your own xpath if the xpath of 2 elements are same
driver.findElement(By.xpath("//span[contains(text),'New Title')]")).click;