I have tried
driver.find_element_by_xpath( "//div[#class='pepDayScroller_dayNum']").click()
for below elements but it did not work. Please help.
Try to located second element with a number of 2
<div class="pepDayScroller_dayNum">1</div>
<div class="pepDayScroller_dayNum">2</div>
<div class="pepDayScroller_dayNum">3</div>
here is addition information
<div class="pepDayScroller_dayWrapper">
<a href="#" class="pepDayScroller_day pepDayScroller_day--selected" data-index="0">
<div class="accessibleText accessibleSelectedMark" aria-hidden="false">Selected</div>
<div class="pepDayScroller_dayNum">1</div>
<div class="pepDayScroller_startingFrom"><div
class="pepDayScroller_startingFromLabel">Prices vary by date.</div>
</div>
</a>
</div>
<div class="pepDayScroller_dayWrapper"><div class="accessibleText accessibleSelectedMark" aria-hidden="false">Selected</div><div class="pepDayScroller_dayNum">1</div><div class="pepDayScroller_startingFrom"><div class="pepDayScroller_startingFromLabel">Prices vary by date.</div></div></div>
once I am able to click on this button, it will scroll down and ask me to select either it is peak or value. codes are below
<a href="#" class="pepTieredCalendar_dateBox tappable pepTieredCalendar_dateBox--32 pepTieredCalendar_dateBox--value" tabindex="0" role="button" data-tier="value" data-date="2018-09-27" aria-label="2018-09-27, 87.30 USD">
<span class="pepTieredCalendar_dateBoxText">27</span>
</a>
how do I find these elements.thanks
The class which you're trying to refer matches many elements at once. You could try to find by matching text like:
driver.find_element_by_xpath("//*[contains(text(), '2')]")
or by matching all elements and selecting the one that you need:
all_elements = driver.find_elements_by_class_name("pepDayScroller_dayNum")
two_element = None
for el in all_elements:
if el.text == "2":
two_element = el
break
Let me know if that helps.
Related
I want to generate a span element for each saved tag from my collection tag's array.
I use firebase and get in *ngFor loop i get one big span element with all saved tags separated by comma, instead of getting a span for each tag. Is there any way that i can't prevent this from happening. Also i have created an interface for Saved.
Thanks in advance.
<div class="card">
<div class="card-body">
<h5 class="card-title text-center">{{saved?.title}}</h5>
<hr />
<div *ngFor="let tag of saved.tags">
<span class="badge badge-pill badge-primary">{{saved?.tags}}</span>
</div>
<hr /> View
</div>
</div>
//Saved interface in Saved.ts file
export interface Saved {
id: string;
title: string;
tags: string[];
}
Try having your code like this. This should make the span element repeat rather than the div and then make sure to reference the individual tag rather than the array inside.
If the tag has a name / title attribute swap {{ tag }} for {{ tag.title}}
looking at the interface its just {{ tag }}.
<div>
<span *ngFor="let tag of saved.tags" class="badge badge-pill badge-primary">
{{tag}}
</span>
</div>
Reference to Angular docs on using *ngFor to display data.
At the moment, you are referencing the array inside your *ngFor. So, as a result, you should see the whole list of n tags, for n times. If you switch from {{saved?.tags}} to {{tag}}. You will see one div per tag including one span and a single tag inside.
So for getting one span per tag, use it like the following:
<div class="card">
<div class="card-body">
<h5 class="card-title text-center">{{saved?.title}}</h5>
<hr />
<div>
<span class="badge badge-pill badge-primary" *ngFor="let tag of saved.tags">
{{tag}}
</span>
</div>
<hr />
View
</div>
</div>
<div class="list-group bg-light no-border list-group-opt no-radius m-b-none">
<a class="list-group-item" on-tap="enterIndividual">
<div class="primary-info"
<div class="pull-left w-1x">
<img src={{avatar}} class="w-full r-3x"/>
</div>
<div class="pull-left m-l intro">
<span class="text-lg font-bold text-black m-b-sm">{{name}}</span>
<i class="fa fa-user"></i>
<div class="text-muted long-intro">
<span>{{detail}}</span>
</div>
</div>
</div>
</a>
</div>
It works well in computer,but when I tested it in my mobile,it had no react for touching.But if I use on-click instead of on-tap,it performs pretty well.So I am puzzled with this problem.Are there any requirement to use on-tap.Oh,it still has a strange point.If I touch it above a half of the div,it can work.What's the problem?
First, there are some errors in the code:
close the div.primary-info tag
a-tags are not allowed (HTML5) to contain block elements (div) - usually not a problem, but can cause some and will definitely not validate.
I guess your problem is, that the a-tag enclosing everything does not have the proper height and width. Try to give it a background and u'll see how large the a-tag is actually rendered as the tappable area.
U can simply skip the a-tag and move your event on-tag to the div.primary-info
I am trying to use range slider in angularjs to filter the grid. I want a greater than and less than filter in my ng-repeat. But I am not getting how to do this. I am using the following code for now. But this is not working for me. This code is not giving me desired output
Here is my html for grid
<div class="col-md-3 product-left-grid" ng-repeat="data in Products| filter:priceSlider.max |filter:priceSlider.min">
<div class="product-grid"></div>
<div class="product-grid-text">
<a href="javascript:void(0)">
<img alt="" src="{{data.Picture1}}">
</a>
<div class="products-grid-info">
<div class="price">
<a class="btn btn-sm btn-width btn-default btn-font-weight"
href="javascript:void(0)"
ng-click="viewDetails($index)">Quick View</a>
<a href="javascript:void(0)"
class="btn btn-sm btn-width btn-default btn-font-weight"
ng-click="addToCart (data.ProductID,data.Picture1,data.ProductName,data.UnitPrice,data.Discount,data.ShippingCharges,data.wieght)">Add to cart</a>
<div class="tovar_description clearfix">
<a class="tovar_title" href="#"><b>{{data.ProductName}} </b> | {{data.UnitPrice | currency:mycurrency}}</a>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
this is my price range slider
<rzslider rz-slider-floor="priceSlider.floor"
rz-slider-ceil="priceSlider.ceil"
rz-slider-model="priceSlider.min"
rz-slider-high="priceSlider.max"
rz-slider-on-change="onSliderChange()"></rzslider>
Now I am using filter but I have doubt that I am going wrong somewhere. Please experts help to solve this problem. Price range filter I need like every eCommerce website have.
Thanks
You have to make a custom filter :
//create an angular filter named "price"
app.filter('price', function () {
//our function will need three arguments
return function(items, greaterThan, lowerThan) {
//then we filter the array with dedicated ES5 method
items = items.filter(function(item){
//if item price is included between the two boundaries we return true
return item.price > greaterThan && item.price < lowerThan;
});
//then we return the filtered items array
return items;
};
});
You can see how Array.filter() works here
Our function will need 3 arguments to work, the items list which is passed by default and the lower and higher boundaries that we will pass as arguments in our ng-repeat filter.
Then you can use the filter as follow :
<div ng-repeat="data in Products | price:priceSlider.min:priceSlider.max | orderBy:'price'">...</div>
As I said above, items array is passed by default, then, to specify other parameters you have to separate them with a colon : right after the filter name.
You can read about custom filters in the official documentation here.
Finally you can then specified as many other filters as you want by separating them with a pipe |.
In our example I'm ordering them by price after the array has been filtered.
Here is a working JSFiddle.
I have this HTML
<div class="pageContent">
<aside class="left-cont">
<ul class="btn-menu" >
<li ng-repeat="tab in tabs" ><a class="ng-scope ng-binding" href="#" ng-click="show={{tab.id}}"> {{tab.name}}</a> </li>
</ul>
</aside>
<section class="main-content" ng-show="show === 1">
<h1> {tab.title}}</h1>
<p>{{tab.content}}</p>
</section>
<section class="main-content" ng-show="show === 2">
<h1> {{tab.title}}</h1>
<p>{{tab.content}}</p>
</section>
<section class="main-content" ng-show="show === 3">
<h1> {{tab.title}}</h1>
<p>{{tab.content}}</p>
</section>
</div>
And I have three problems with it:
1)ng-click="show={{tab.id}}"shows me the right id number in the dom, for instance, id=1 does show <a class="ng-scope ng-binding" href="#" ng-click="show=1">but I do get an error in my console - Error: [$parse:syntax] http://errors.angularjs.org/1.3.8/$parse/syntax?p0=%7B&p1=invalid%20key&p2=7&p3=show%3D%7B%7Btab.id%7D%7D&p4=%7Btab.id%7D%7D Why is that? I have tried to to write tab.id instead of {{tab.id}}, but it doesn't even fetch the element.
2) I want the section tags to be appended whenever there's a click on the a, but I can not do so since the section tags aren't wrapped in the li tags (when I do put them in the li they do fire, but that's not what I want). How do I bind these two different elements?
3) I want each section to append the content of its specific tab for the section that has - ng-show="show === 1" I want tab.title and tab.content of the tab that has the id=1, and so on..
How is that all possible?
Help is very much appreciated here
#HarishR is right: this is not the AngularJS way to do things. The imperative way of doing things would be to have an ng-click set the isActive property to true on an instance of tab.
Then the directive would would watch the isActive property and change class accordingly.
Since you probably don't want to reinvent the wheel, you could consider using Angular strap ( http://mgcrea.github.io/angular-strap/#/tabs#tabs ) or check out this code https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js.
I need to write a script with Selenium-Webdriver. I am stuck in a situation where I need to enter text (e.g : "tt") in the textbox and a list gets populated (hidden values). We need to select an option from the populated list. (Like we do in "Google" search).
<div class="select2-search">
<input type="text" autocomplete="off" class="select2-input tabindex="-1" style>
</div>
<ul class="select2-results">
<li class="select2-results-dept-0 select2-result select2-result-selectable select2-new">
<div class="select2-result-label">
<span class="select2-match">et</span>
</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable select2-highlighted">
<div class="select2-result-label">"Secr"
<span class="select2-match">et</span>"ary"
</div>
</li>
<ul>
So i'll write a little code to help you.
I'm using www.google.com as exemple.
WebElement inputElement = driver.findElement(By.id("gbqfq")); // get the input
inputElement.sendKeys("zyzz"); // you want to search him on internet ;)
// get all suggestions in a list
List<WebElement> suggestionList = driver.findElements(By.CssSelector(".gsq_a table tbody tr td:first-of-type span"));
To select an option you have 2 choices, first :
// you get a random option and click on it
suggestionList.get(1).click();
or
// you only want to click on the link that contains that.
for(WebElement elem: suggestionList)
{
String text = elem.getText();
if(text.equals("zyzz motivation"))
elem.click();
}