How to select element from options populated - selenium-webdriver

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();
}

Related

How to auto select the first element with ng-repeat in angular?

Could you please help me to auto select the first item for the menu on the left.
here is my code : https://next.plnkr.co/edit/4pGTMsVlSiFo7eoS?preview
Like this:
<div class="floatingbox list">
<input type="text" ng-model="check" placeholder="search applets"
ng-init="setSelectedModel(model[0])">
<ul>
<li ng-repeat="model in model | filter:check">
<a class="listItem" href ng-click='setSelectedModel(model)'>{{model.key}}</a></li>
</li>
</ul>
</div>
Notice the ng-init="setSelectedModel(model[0]) that selects the 1st item on page load by calling the same function that would be used when clicked on a certain item.
If I read what you wanted correctly.

How to find element in selenium python using class in div with different selection

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.

How to get model array after angularjs drag and drop?

I have a list in which data is filled as such:
<ul ui-sortable="sortableOptions" ng-model="hiringstagelist" class="sortable list">
<li ng-repeat="y in hiringstagelist">
<div class="row">
<div class="col-md-1">
<label class="switch">
<input id="{{y.id}}" class="switch-input" type="checkbox" ng-model="y.isDeleted" ng-click="deletehiringstage(y.id)" />
<span id="data_{{y.id}}" class="switch-label" data-on="" data-off=""></span>
<span class="switch-handle"></span>
</label>
</div>
<div class="col-md-11">
{{y.stageName}}
<span style="float:right;margin-right:10px;"><img src="~/Images/sortarrow.png" /></span>
</div>
</div>
</li>
</ul>
As I'm using angularjs drag and drop hence as soon as I drag and drop any item in the list an event gets triggered which is :
$scope.sortableOptions = {
stop: function (e, ui) {
var model = ui.item.model;
console.log(model);
var index = ui.item.sortable.index;
var draggedModel = ui.item.sortable.model;
var newProdArray = ui.item.sortable.resort.$modelValue;
}
}
With index I only get the old value of the item in the list. "newProdArray" doesn't seems to work. Can i use anything so that i can get a model with new index values along with other parameters od the item like id etc ?
Please guide
I think you want ui.item.sortable.dropindex which gives you the index the item was dropped at. See here for documentation.

ng-repeat Circular Reference Screen Refresh

I'm a noob to AngularJS. As a learning exercise I am creating a typeahead control.
The typeahead is comprised of a text box for filtering the options, an unordered list for displaying the menu of short-listed options, and a Show/Hide button for manually toggling the list.
The text box filters the li elements using ng-repeat. When selecting an li item from the list, I populate the text box with the selected value, and then hide the list.
<div class="xtab-typeahead" ng-controller="xTabTypeAheadCtrl">
<input type="text" class="xtab-typeahead-search" placeholder="{{type}}" ng-model="query.id" ng-focus="showMenu()" ng-init="query.id = undefined" />
<button ng-click="toggleMenu()">Show/Hide</button>
<ul class="xtab-typeahead-menu" ng-class="{true:'active',false:''}[isActive]">
<li ng-repeat="item in menuItems | filter:query"
ng-click="hideMenu(); query.id = item.id">
{{item.id}}
</li>
</ul>
</div>
My issue is that when the value is assigned to the text box, the list is momentarily filtered to the one option selected (because the text box is also the source of the ng-repeat filter), before hiding the menu. What I want id for the menu to be hidden without being refreshed with the filter first.
It should be noted that this only occurs when using CSS transitions which I am using to fade the menu out.
Here is a plnkr to illustrate.
Here's a working Plnkr. I basically gave your menu time to finish its animation before setting the value. Relevant code is as follows:
$scope.selectItem = function(id){
$scope.isActive = false;
$timeout(function(){
$scope.query.id = id;
}, 250);
}
...and the HTML using the newly created selectItem method:
<div class="xtab-typeahead" ng-controller="xTabTypeAheadCtrl">
<input type="text" class="xtab-typeahead-search" placeholder="{{type}}" ng-model="query.id" ng-focus="showMenu()" ng-init="query.id = undefined" />
<button ng-click="toggleMenu()">Show/Hide</button>
<ul class="xtab-typeahead-menu" ng-class="{true:'active',false:''}[isActive]">
<li ng-repeat="item in menuItems | filter:query"
ng-click="selectItem(item.id)">
{{item.id}}
</li>
</ul>
</div>

How do I only add complete items to this list

I'm using an input field to accept comma-separated values then dynamically generating list items for each comma-separated value. However, I don't want items added to the list until they have a comma after them. For example, if I enter "Dog, Cat, Fish" in the input field, I don't want the following as I'm typing "Cat"
Dog
Ca
I want "Cat" to be added only once I've put a comma after it to indicate it is a complete entry.
Here's the code I'm using to achieve this.
<input ng-list ng-model="labels" placeholder="Enter labels">
<div>
<ul>
<li ng-repeat="label in labels track by $index">
{{ label }}
</li>
</ul>
</div>
Link to running example
What's the angular way to achieve this?
One way to do this would be to use custom filters to filter the ng-repeat items instead of relying on the ng-list directive.
See the associated PLUNKER of the code below.
HTML
<input ng-model="labels" placeholder="Enter labels" />
<div>
<ul>
<li ng-repeat="label in labels | completeList">
{{ label }}
</li>
</ul>
</div>
JAVASCRIPT
filter('completeList', function() {
return function(items) {
var list = [];
if(items) {
list = items.split(',');
var last = list[list.length - 1];
if(items.charAt(items.length - 1) != ',' || last.length === 0)
list.pop();
}
return list;
};
});

Resources