HTML Code:
<td width="50%">
<div id="divselect-tab" style="width:100%;">
<div id="s2id_select-tab" class="select2-container FontFace" style="width:100%;">
<a class="select2-choice select2-default" href="javascript:void(0)" tabindex="-1">
<span id="select2-chosen-1" class="select2-chosen"/>
<abbr class="select2-search-choice-clos**`strong text`**e"/>
<span class="select2-arrow" role="presentation">
</a>
I got the exception:
Element should have been "select" but was "a".
Related
I am trying to find out count of number of items on a page that is Correspondence Courses.All of the items contains same class name. It is returning 0 size all the time however the xpath I am using giving correct cont when I am verifying it using xpath helper. It is my selenium code here:
#Test(priority=2)
public void AddItems() throws InterruptedException
driver.findElement(By.linkText("CORRESPONDENCE COURSES")).click();
List <WebElement> listele = driver.findElements(By.xpath("//*[#id='custom-
block-grid']/div/ul/div[1]/li"));
System.out.println(listele.size());
HTML is:
<div class="small-9 columns product-card left" role="main" id="card-width" style="padding-left: 10px; float: right !important">
<article>
<ul class="small-block-grid-2 cp-inline-block padding-card ng-scope" ng- repeat="data in testseriesData" style="">
<li id="custom-block-grid" class="">
<div class="panel card-background card-shadow">
<ul class="no-bullet">
<div class="image-card-container">
<li class="card-pointer image-align-card" ui-sref="description({cName: 'books', id: data.id})" href="#/books/description/id=750">
<img ng src="https://d2fldgtygklyv6.cloudfront.net/SSC_Corr_Course_with_test_HINDI_1500195234532.png" class="img-card-dim" src="https://d2fldgtygklyv6.cloudfront.net/SSC_Corr_Course_with_test_HINDI_1500195234532.png">
</li>
</div>
<span class="line-clamp card-pointer label-card title-border-top ng-binding" ui-sref="description({cName: 'books', id: data.id})" href="#/books/description/id=750">SSC Correspondence Course (HINDI MEDIUM)</span>
<div class="price-field">
<del class="fade ng-binding"><i class="icon-rupee icon-rupee-buy-card" aria-hidden="true"></i>4,499</del>
<span class="cp-float-right selling-price ng-binding"><i class="icon-rupee icon-rupee-buy-card" aria-hidden="true"></i>3,599</span>
</div>
<div class="add-to-cart listing-add-to-cart margin-force-zero sf-button-secondary" ng-click="addToCart(data)" role="button" tabindex="0">
<span class="icon-cart icon-cart-buy-card"></span>
<span>ADD TO CART</span>
</div>
</ul>
</div>
</li>
</ul>
</article>
</div>
<div class="small-9 columns product-card left" role="main" id="card-width" style="padding-left: 10px; float: right !important">
<article>
<ul class="small-block-grid-2 cp-inline-block padding-card ng-scope" ng- repeat="data in testseriesData" style="">
<li id="custom-block-grid" class="">
<div class="panel card-background card-shadow">
<ul class="no-bullet">
<div class="image-card-container">
<li class="card-pointer image-align-card" ui-sref="description({cName: 'books', id: data.id})" href="#/books/description/id=750">
<img ng src="https://d2fldgtygklyv6.cloudfront.net/SSC_Corr_Course_with_test_HINDI_1500195234532.png" class="img-card-dim" src="https://d2fldgtygklyv6.cloudfront.net/SSC_Corr_Course_with_test_HINDI_1500195234532.png">
</li>
</div>
<span class="line-clamp card-pointer label-card title-border-top ng-binding" ui-sref="description({cName: 'books', id: data.id})" href="#/books/description/id=750">SSC Correspondence Course (HINDI MEDIUM)</span>
<div class="price-field">
<del class="fade ng-binding"><i class="icon-rupee icon-rupee-buy-card" aria-hidden="true"></i>4,499</del>
<span class="cp-float-right selling-price ng-binding"><i class="icon-rupee icon-rupee-buy-card" aria-hidden="true"></i>3,599</span>
</div>
<div class="add-to-cart listing-add-to-cart margin-force-zero sf-button-secondary" ng-click="addToCart(data)" role="button" tabindex="0">
<span class="icon-cart icon-cart-buy-card"></span>
<span>ADD TO CART</span>
</div>
</ul>
</div>
</li>
</ul>
</article>
</div>
<div class="small-9 columns product-card left" role="main" id="card-width" style="padding-left: 10px; float: right !important">
<article>
<ul class="small-block-grid-2 cp-inline-block padding-card ng-scope" ng- repeat="data in testseriesData" style="">
<li id="custom-block-grid" class="">
<div class="panel card-background card-shadow">
<ul class="no-bullet">
<div class="image-card-container">
<li class="card-pointer image-align-card" ui-sref="description({cName: 'books', id: data.id})" href="#/books/description/id=750"><img ng src="https://d2fldgtygklyv6.cloudfront.net/SSC_Corr_Course_with_test_HINDI_1500195234532.png" class="img-card-dim" src="https://d2fldgtygklyv6.cloudfront.net/SSC_Corr_Course_with_test_HINDI_1500195234532.png">
</li>
</div>
<span class="line-clamp card-pointer label-card title-border-top ng-binding" ui-sref="description({cName: 'books', id: data.id})" href="#/books/description/id=750">SSC Correspondence Course (HINDI MEDIUM)</span>
<div class="price-field">
<del class="fade ng-binding"><i class="icon-rupee icon-rupee-buy-card" aria-hidden="true"></i>4,499</del>
<span class="cp-float-right selling-price ng-binding"><i class="icon-rupee icon-rupee-buy-card" aria-hidden="true"></i>3,599</span>
</div>
<div class="add-to-cart listing-add-to-cart margin-force-zero sf-button-secondary" ng-click="addToCart(data)" role="button" tabindex="0">
<span class="icon-cart icon-cart-buy-card"></span>
<span>ADD TO CART</span>
</div>
</ul>
</div>
</li>
</ul>
</article>
</div>
And similarly for other items
If it's working when you test it in the browser but not when your script is running, most likely it's a timing problem. The code runs fast and likely returns 0 before the page has completed loading. The way to solve this issue to add a wait, WebDriverWait.
Example code is below. The wait returns the collection of elements waited for so you can then stick that in a List, as you did with your code, and then print the size() of the collection. I changed the name of the variable to be more descriptive, courses, instead of listele. It will help you and others read and understand your code more easily.
By locator = By.cssSelector("article");
// By locator = By.xpath("//*[#id='custom-block-grid']/div/ul/div[1]/li");
List<WebElement> courses = new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(locator));
System.out.println(courses.size());
Another thing... since you are just counting the number of courses, those are denoted with the article tag so you can just count those which makes your locator simple.
I have problem with Bootstrap carousel in ng-repeat, because images are not load one by one if carousel changes, but all images are load all at onece. I found similar questions in stackoverflow, but in my case I loading data from database (not use $scope)
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3" ng-repeat="product in main.products"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3" ng-repeat="product in main.products"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
The issue is that you are repeating all of your images inside an item of the carousel. A carousel item is defined by the "item" class. If you want a single image to displayed at once then repeat the items like so:
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<!-- add the `active` class to the first item with one-time binding (if $index is 0) -->
<div class="item {{::($index === 0 ? 'active' : '')}}" ng-repeat="product in main.products track by $index">
<div class="row">
<div class="col-xs-3"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
In web app i am showing list of items using ng-repeat directive of angularjs. And on-click of each item am assigning a summary controller to the summary page (using ui-routing) and shows the result. Currently what happens if there is 10 list items showed using ng-repeat then 10 times summary controller is getting initialized on click of one item. Eventually which makes my app bit slow. Here is my ng-repeat code in html.
<div class="surveyList" ng-repeat="survey in allSurveys | filter:headerObj.search track by $index">
<span class="surveycheckbox" ng-click="toggleClass($event)"></span>
<div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" ng-click="surveyIdForQuota(survey.SurveyID)">
<div class="col-xs-5 col-sm-2 col-md-4 surveyitleElipse">{{survey.SurveyName}}</div>
<div class="col-xs-5 col-sm-2 col-md-1">
<span class="title_thumb">
<span class='fa fa-mobile-phone' ng-show="survey.Type=='App'" title="APP" my-Tooltip />
<span class='fa fa-envelope-o' ng-show="survey.Type=='SMS'" title="SMS" my-Tooltip />
<span class='fa fa-desktop' ng-show="survey.Type=='Web'" title="WEB" my-Tooltip/>
</span>
</div>
<div class="col-sm-3 col-md-2 hidden-xs">{{survey.Date | date:'dd/mm/yyyy'}}</div>
<div class="col-sm-2 col-md-2 hidden-xs SurveyLastChild">124</div>
<div class="hidden-xs surveyListTool" ng-show="hoverEdit">
<a class="editSurvey" title="edit"><i class="fa fa-pencil fa-2"></i></a>
<a class="deleteSurvey" ng-click="sendsurveyID(survey.SurveyID)" data-surveyID="{{survey.SurveyID}}" ><i class="fa fa-trash-o fa-2"></i></a>
<a class="cloneSurvey" ng-click="cloneSurvey(survey.SurveyID)" title="clone"><i class="fa fa-clone fa-2"></i></a>
<a class="menuSurvey" title="menu">
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
</a>
</div>
</div>
<!-- On click Of the list am showing this div box -->
<div class="surveyDetailsBox"> <!--This is the header section -->
<div class="surveyDetailHead">
<p class="surveyTitle">{{survey.SurveyName}}</p>
<div class="surveyDetailHeadTool" >
<a class="editSurvey" title="edit" ng-click="showEditSurveyForm(survey.SurveyID,$index);"><i class="fa fa-pencil fa-2"></i></a>
<a class="deleteSurvey hidden-xs" ng-click="sendsurveyID(survey.SurveyID)" ><i class="fa fa-trash-o fa-2"></i></a>
<a class="menuSurvey" title="menu">
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
</a>
<a class="hidden-xs" title="close"><i class="fa fa-angle-up fa-2"></i></a>
</div>
</div>
<!--This is the body section where summary and other modules are present -->
<div class="surveyDetailContent hidden-xs" ng-if="is_desktop">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="col-xs-2 col-sm-2 col-md-2 leftMenu">
<div class="list-group">
<a ui-sref="survey.surveyList.details" class="list-group-item summary" ui-sref-active="active">Summary</a>
<a ui-sref="survey.surveyList.questionare" class="list-group-item " ui-sref-active="active">Questionaire Management</a>
<a ui-sref="survey.surveyList.sampleManagement" class="list-group-item " ui-sref-active="active">Sample Management</a>
<a ui-sref="survey.surveyList.quotaManagement" class="list-group-item " ui-sref-active="active">Quota Management</a>
<a ui-sref="survey.surveyList.scheduling" class="list-group-item " ui-sref-active="active">Scheduling</a>
<a ui-sref="survey.surveyList.notification" class="list-group-item " ui-sref-active="active">Notifications</a>
<a ui-sref="survey.surveyList.reports" class="list-group-item " ui-sref-active="active">Reports</a>
<a ui-sref="survey.surveyList.location" class="list-group-item " ui-sref-active="active">Geolocation</a>
</div>
</div>
<div class="col-xs-10 col-sm-10 col-md-10 rightContent" ui-view></div>
</div>
</div>
</div>
For each sub module like Summary, questionnare etc., one controller is associated.
On click of this list am showing the summary box and running the controller also.
Code for surveyIdForQuota() goes here
$scope.surveyIdForQuota = function(SurveyID){
$rootScope.quotaSurveyID = SurveyID;
$scope.exportViewDetails="";
$http.get(__env.apiUrl+"/UserSurvey/GetInvitationCount?surveyId="+$rootScope.surveysummaryID,{headers:{"Content-type":"application/json",'sessionID':$rootScope.token}}).
then(function(response){
console.log(response);
$scope.summaryDetails = response.data;
},function(error){console.log(error)})
};
ng-click should be add on the item of list
<div class="surveyList" ng-repeat="survey in allSurveys |filter:headerObj.search track by survey.SurveyID"> <div ng-
click="surveyIdForQuota(survey.SurveyID)">)">//rest code inside goes here</div></div>
Your first div is a parent div, but you wrote ng-click on the list. So if you click any place of the div. it will be call the method
In my application i used angular ui-tree.
Now to add new node i used below code
<button class="btn btn-info btn-circle btn-sm" type="button" ng-click='x.tasks.push({task: "New Task",depth:"2", tasks:[]})' style="margin-top:15px" data-nodrag><i class="fa fa-plus"></i></button>
<script type="text/ng-template" id="nodes_renderer.html">
<div ui-tree-handle class="tree-node tree-node-content">
<div style="width:100%">
<div style="width:87%;display: inline-block">
<a class="" style="color:#c1c1c1" data-nodrag ng-click="toggle(this)"><span class="fa" ng-class="{'fa-plus': collapsed, 'fa-minus': !collapsed}"></span>
<span class="label label-info"><i class="fa fa-tasks"></i></span> </a>
<span style="width:80%;word-wrap: break-word" class="remove-editable-click cursor-pointer" editable-text="node.task" buttons="no" e-ng-model="WBSData.task" e-ng-blur="changeFieldEdit(this)" e-required data-nodrag e-style="border:1px solid #DDDDDD;width:90px">
{{node.task}}
</span>
</div>
<div style="width:10%;display: inline-block">
<input icheck type="checkbox" ng-model="node.WBSDataSelectedTask" checklist-value="node.task" style="float:right" value="none">
</div>
</div>
</div>
<ol ui-tree-nodes="" ng-model="node.subtasks" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.subtasks" ui-tree-node ng-include="'nodes_renderer1.html'">
</li>
</ol>
</script>
<div ui-tree="treeOptions" id="tree-root">
<ol ui-tree-nodes ng-model="x.tasks">
<li ng-repeat="node in x.tasks" ui-tree-node ng-include="'nodes_renderer.html'"></li>
</ol>
</div>
By clicking on button it is adding node but adding node at bottom.I need to add that on top.How can i do that?
x.task.push adds item at the end of the array. That's where you need to change
ng-click='x.tasks.push({task: "New Task",depth:"2", tasks:[]})'
Use unshift instead.
ng-click='x.tasks.unshift({task: "New Task",depth:"2", tasks:[]})'
For reference: How can I add new array elements at the beginning of an array in JavaScript?
I've got two JSON arrays, one for headers and the other for data. I'm handling the headers, and I'm trying to display the data with respect to those headers using nested ng-repeat, but it results in empty rows.
The JSON arrays and the html code for displaying the data are pasted below.
Please help me.
$scope.data=[{'first_name':'ruth','last_name':'vick','email':'ruthvick#gmail.com','isMarried':'no','nick_name':'ruthu'},{'first_name':'rahul','last_name':'kumar','email':'rahul#gmail.com','isMarried':'no','nick_name':'rahul'},{'first_name':'vicky','last_name':'gupta','email':'vicky#gmail.com','isMarried':'no','nick_name':'vicky'}]
$scope.headerAll=[{'field':'first_name', 'displayName':'First name','type':'required'},{'field':'last_name', 'displayName':'Last Name','type':'required'},{'field':'email', 'displayName':'Email','type':'required'},{'field':'isMarried', 'displayName':'marital Status','type':'optional'},{'field':'nick_name', 'displayName':'Nick Name','type':'optional'}]
<div>
<table class="table table-bordered table-hover">
<thead class="wrapper">
<tr>
<th ng-repeat="data in header">
<div class="col-md-9">{{data.displayName}}</div>
<div class="col-md-1">
<button href="" ng-click="deleteColumn(data.field,$index)"><span class=" glyphicon glyphicon-trash pull-right"> </span></button>
</div>
<div class="dropdown col-md-1" >
<button class="glyphicon glyphicon-pencil dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" ng-click = "toPoint($index);">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-repeat="optionalHeader in optional">
<li role="presentation" ng-repeat="dataEdit in headerAll"><a role="menuitem" tabindex="-1" href="" ng-click="editColumn(data.field,dataEdit.field,$index)">{{dataEdit.displayName}}</a></li>
</ul>
</div>
</th>
<th><div class="dropdown" >
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Add Columns
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-repeat="optionalHeader in optional">
<li role="presentation" ng-repeat="optionalHeader in optional"><a role="menuitem" tabindex="-1" href="" ng-click="addColumn(optionalHeader.field)">{{optionalHeader.displayName}}</a></li>
</ul>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="active" ng-repeat="row in data">
<td ng-repeat="fields in headerAll">
{{row.fields.field}}
</td>
</tr>
</tbody>
</table>
</div>
Here, row.fields.field is creating empty rows.
Try to access with braces and not the dot operator.
data:
<div ng-repeat="obj in data">
{{ obj["first_name"]}}
{{ obj["last_name"]}}
</div>
header
<div ng-repeat="obj in headerAll">
{{ obj["field"]}}
{{ obj["displayname"]}}
</div>