I am testing infinity scroll using protractor on an angular application. The table initially have 50 rows that are displayed upon loading the url. Once I scroll the next 50 rows are displayed. similarly 800-900 rows are displayed. That means I have to scroll atleast 16 to 18 times. There is also some load time of approximately 3 seconds for next 50 rows to be loaded. How do I test this using Protractor?
I am using scroll into View to load the rows.
var tableRows = element.all(by.css('tbody tr'));
let lastCount = 0
let count = -1
const go = () => tableRows.count().then(function (rowCount) {
lastCount = count
count = rowCount
console.log("Count:" +count)
console.log("lastCount: "+lastCount)
browser.executeScript(e => e.scrollIntoView(), tableRows.last());
browser.sleep(3000)
if (lastCount !== count) {
console.log("going again")
go()
}
else{
console.log("In Else")
callback();
Here is my HTML
<tbody infinite-scroll="$ctrl.loadInventories()" infinite-scroll-container="'.table-wrapper'" md-body="" class="md-body ng-isolate-scope">
<!-- ngRepeat: data in $ctrl.inventories | orderBy: myOrder -->
<tr class="" ng-repeat="data in $ctrl.inventories | orderBy: myOrder" style="">
<!-- ngRepeat: data in $ctrl.inventories | orderBy: myOrder -->
<tr class="" ng-repeat="data in $ctrl.inventories | orderBy: myOrder" style="">
<!-- ngRepeat: data in $ctrl.inventories | orderBy: myOrder -->
<tr class="" ng-repeat="data in $ctrl.inventories | orderBy: myOrder" style="">
<!-- ngRepeat: data in $ctrl.inventories | orderBy: myOrder -->
<tr class="" ng-repeat="data in $ctrl.inventories | orderBy: myOrder" style="">
You can try taking the tr count .If the initial tr count is not equal to final tr count continue the loop and if the count matches then we can confirm that all the rows are loaded and no more is left. Hope it helps yous
Related
I can get value when I tried this on console using:
$x("//*[#class='file-folder-breadcrumbs-item-part name']")[1].innerText;
or
document.querySelector("[ng-if='currentPathNodes.length']").innerText;
but not able to convert in this JavaScript code in Protractor code.
Below is HTML
<div class="file-folder-breadcrumbs-child-panel ng-hide" ng-shenter image ow="isExpanded(root.full)">
<!-- ngRepeat: child in root.nodes -->
<div ng-repeat="child in root.nodes" class="ui-state-default filedrop file-folder-breadcrumbs-item-child ng-scope" ng-click="navigateToChild($event, child, root)">
<span class="ng-binding">TestFolder</span>
</div>
<!-- end ngRepeat: child in root.nodes -->
</div>
I think this is what you are looking for:
const breadcrumbPart = element.all(by.css('.file-folder-breadcrumbs-item-part.name').first();
const myText = await breadcrumbPart.getText();
// console.log(myText);
expect(myText).toEqual('something');
Or synchronous solution:
const breadcrumbPart = element.all(by.css('.file-folder-breadcrumbs-item-part.name').first();
breadcrumbPart.getText().then(myText => {
// console.log(myText);
expect(myText).toEqual('something');
});
I am testing Infinite scrolling in my angular application. The scroll is part of a table in the main page. The main page doesn't have any scroll bar of its own and if I hover the mouse over the table and scroll more elements will be loaded.
Initially, 50 rows are displayed on the screen out of which only 10 are visible on the table. On scrolling to the last element, the next 50 will be loaded in the UI. This will be continued until all the elements are retrieved.
I tried clicking on the first row of the table and used scroll
dashboard.Row1.click()
browser.executeScript("window.scrollBy(0,200)");
This doesn't scroll the table. I am not sure if this is the right approach to solve the problem. I also tried using offset but it didn't help either
This is my HTML:
<tbody infinite-scroll="$ctrl.loadInventories()" infinite-scroll-container="'.table-wrapper'" md-body="" class="md-body ng-isolate-scope">
<!-- ngRepeat: data in $ctrl.inventories | orderBy: myOrder -->
<tr class="" ng-repeat="data in $ctrl.inventories | orderBy: myOrder" style="">
<!-- ngRepeat: data in $ctrl.inventories | orderBy: myOrder -->
<tr class="" ng-repeat="data in $ctrl.inventories | orderBy: myOrder" style="">
<!-- ngRepeat: data in $ctrl.inventories | orderBy: myOrder -->
<tr class="" ng-repeat="data in $ctrl.inventories | orderBy: myOrder" style="">
<!-- ngRepeat: data in $ctrl.inventories | orderBy: myOrder -->
<tr class="" ng-repeat="data in $ctrl.inventories | orderBy: myOrder" style="">
You could try scrolling to the last row of the table using scrollIntoView(). It would be something like
const tableRows = element.all(by.css('tbody tr'));
browser.executeScript(e => e.scrollIntoView(), tableRows.last());
Or more compactly, perhaps less readable
browser.executeScript(e => e.scrollIntoView(), $$('tbody tr').last());
I'm having an issue pulling a child div ID for each row in the row.map function below.
In other words, for each row element I iterate, I want to pull rowId attrib:
<div id="rowId_21">
Here's an Html snippet:
<div ng-repeat="row in vm.sourceData.data" ng-init="thatRow=$index">
<div id="rowId_21" ng-class-odd="'row-2'" ng-class-even="'row-3'" >
<div ng-repeat="column in vm.sourceData.columns" >
<div ng-if="row[column.field].length !== 0" class="ng-scope highlight21">
<span ng-bind-html="row[column.field] | changeNegToPrenFormat" vm.highlightedrow="" class="ng-binding">
Sales
</span>
</div>
</div>
</div>
</div>
<div ng-repeat="row in vm.sourceData.data" ng-init="thatRow=$index">
<div id="rowId_22" ng-class-odd="'row-2'" ng-class-even="'row-3'" ng-class="vm.hideRow(row)" class="row-3 height-auto">
<!-- ... -->
</div>
</div>
I start with pulling the rows object, then I iterate them :
// pulls the data rows
var selDataRows = '.grid-wrapper.fluid-wrapper';
var rows = element(by.css(selDataRows)).all(by.repeater('row in vm.sourceData.data'));
rows.map(function (row, idx) {
//var thisRowId = row.element(by.css('div[id^="rowId_"]')); // *** RETURNS NULL
var thisRowId = row.all(by.xpath("descendant::div[starts-with(#id, 'rowId')]"));
thisRowId.getText().then(function(txt){
// RETURNS A VERY LONG ID: [ '7\n4\n41\n113\n3.3\n(34)\n(1.1)\n7...]
console.log('--- Curr Div ID: ', txt);
});
}).
then(function(){
console.log('*** Rows.Map Done.');
});
I thought this would pull the first child id (i.e. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors ):
by.css('div[id^="rowId_"]') ,
or perhaps this way:
by.xpath("descendant::div[starts-with(#id, 'rowId')]") ,
however neither seems to be working.
Advice appreciated...
Bob
First of all, you need to return from the mapping function. And, use .getAttribute() method to get the id attribute:
var selDataRows = '.grid-wrapper.fluid-wrapper';
var rows = element(by.css(selDataRows)).all(by.repeater('row in vm.sourceData.data'));
rows.map(function (row) {
return row.element(by.xpath("descendant::div[starts-with(#id, 'rowId')]")).getAttribute("id").then(function(rowId) {
return rowId;
});
}).then(function(ids) {
console.log(ids);
});
I am using kendo's mvvm and sortable widget to allow a user to sort multiple tables with data binded to it. I have implemented the following code. It works, but the data seems to be logging correctly to the console. However, the data in the UI jumps around.
$(".sortable-handlers").kendoSortable({
handler: ".move",
hint:function(element) {
return element.clone().addClass("sortable-hint");
},
change: function(e) {
var services = viewModel.get("services");
console.log(e.oldIndex);
var oldIndex = e.oldIndex;
var newIndex = e.newIndex;
services.splice(newIndex, 0, services.splice(oldIndex, 1)[0]);
//Set it back to the original list
viewModel.set("services", services);
console.log(JSON.stringify(viewModel.get("services")));
}
});
It's been a long time but adding .trigger("change") works for me (I'm using jquery ui sortable instead of kendo ui sortable).
// Define model with dependent method
var MyModel = kendo.data.Model.define({
fields: {
left: "number",
right: "number"
},
total: function() {
return this.get("left") + this.get("right");
}
});
// Create view model
var viewModel = kendo.observable({
items: []
});
// bindings
kendo.bind($("#myView"), viewModel);
// using $.ui.sortable when list changes
var timeout = null;
viewModel.items.bind("change", function(e) {
clearTimeout(timeout);
timeout = setTimeout(function() {
$("#sortable").sortable({
update: function(e, ui) {
// get UID of sorting target
var targetUid = ui.item.attr("uid");
// list before
var beforeIndexes = _.map(viewModel.items, _.iteratee("uid"));
// target's original index
var fromIdx = _.indexOf(beforeIndexes, targetUid);
// list after
var afterIndexes = $("#sortable").sortable("toArray", {
attribute: "uid"
});
// target's new index
var toIdx = _.indexOf(afterIndexes, targetUid);
var changeItem = viewModel.items[fromIdx];
viewModel.items.splice(fromIdx, 1);
if (toIdx >= viewModel.items.length) {
viewModel.items.push(changeItem);
} else {
viewModel.items.splice(toIdx, 0, changeItem);
}
// refresh
viewModel.items.trigger("change");
}
});
}, 500);
});
// add some items to list
viewModel.items.push(new MyModel({
left: 1,
right: 2
}));
viewModel.items.push(new MyModel({
left: 6,
right: 3
}));
viewModel.items.push(new MyModel({
left: 5,
right: 7
}));
<link href="https://code.jquery.com/ui/1.12.0-beta.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<div id="myView">
<div class="k-grid k-widget">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table>
<thead>
<tr>
<th class="k-header">SORTABLE</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table>
<tbody id="sortable" data-bind="source: items" data-template="template-item">
</tbody>
</table>
</div>
</div>
<div class="k-grid k-widget">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table>
<thead>
<tr>
<th class="k-header">NOT-SORTABLE</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table>
<tbody id="sortable" data-bind="source: items" data-template="template-item">
</tbody>
</table>
</div>
</div>
</div>
<script type="text/x-kendo-template" id="template-item">
<tr data-bind="attr: {uid: uid}">
<td>
<span data-bind="text: left" />+
<span data-bind="text: right" />=
<span data-bind="text: total" />
</td>
</tr>
</script>
I am currently working on a grails project and am trying to create a one to many form. I have been using the tutorial at the link below to get started:
http://omarello.com/2010/08/grails-one-to-many-dynamic-forms/
The solution has a form with two field of data that are static and one dynamic fiwld where the user is allowed to add as many variables as they want and then save them. below you can see all the various files for this functionality:
Products.Groovy Domain Class
import org.apache.commons.collections.list.LazyList;
import org.apache.commons.collections.FactoryUtils;
/**
* Products
* A domain class describes the data object and it's mapping to the database
*/
class Products {
String productType
String product
List vars = new ArrayList()
//This represents a product belonging to a single department
static belongsTo = [dept:Depts]
static hasMany = [ vars:Dynam ]
static mapping = {
vars cascade:"all-delete-orphan"
}
def getVarsList() {
return LazyList.decorate(
vars,
FactoryUtils.instantiateFactory(Dynam.class))
}
static constraints = {
productType blank: false
product blank:false, size: 1..160
}
}
Dynam.groovy
class Dynam {
public enum VarType{
T("Testimonial"),
D("Dimentions"),
N("Networking")
final String value;
VarType(String value) {
this.value = value;
}
String toString(){
value;
}
String getKey(){
name()
}
static list() {
[T, D, N]
}
}
static constraints = {
index(blank:false, min:0)
data(blank:false)
type(blank:false, inList:VarType.list(), minSize:1, maxSize:1)
}
int index
String data
VarType type
boolean deleted
static transients = [ 'deleted' ]
static belongsTo = [ product:Products ]
def String toString() {
return "($index) ${data} - ${type.value}"
}
}
ProductsController.Groovy
Creation Function
def createDynProduct(){
def productsInstance = new Products()
productsInstance.properties = params
//This is used in order to create a new User Object for the current User logged in
def userObjects = springSecurityService.currentUser
//This passes the 2 models to the view one being Products and the other a User Department
[productsInstance: productsInstance, dept: userObjects.dept]
}
Save Function
def save() {
def productInfo = "dynam"
def userObjects = springSecurityService.currentUser
def dept = Depts.findByName(params.dept.name)
def product = new Products(product:productInfo, productType:params.productType, dept: dept, vars:params.varsList)
def _toBeRemoved = product.vars.findAll {!it}
// if there are vars to be removed
if (_toBeRemoved) {
product.vars.removeAll(_toBeRemoved)
}
//update my indexes
product.vars.eachWithIndex(){phn, i ->
if(phn)
phn.index = i
}
//If the the save is not successful do this
if (!product.save(flush: true)) {
render(view: "create", model: [productsInstance: product, dept: userObjects.dept])
return
}
redirect(action: "show", id: product.id)
}
createDynProduct.gsp
<%# page import="com.tool.Products" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name='layout' content='springSecurityUI'/>
<g:set var="entityName" value="${message(code: 'messages.label', default: 'Products')}" />
<title><g:message code="default.create.label" args="[entityName]" /></title>
</head>
<body>
<g:renderErrors bean="${productsInstance}" />
<g:form action='save' name='ProductForm' >
<br/>
<!-- Render the product template (_dynam.gsp) here -->
<g:render template="dynam" model="['productsInstance':productsInstance]"/>
<!-- Render the product template (_dynam.gsp) here -->
<div class="buttons">
<g:submitButton name="create" class="save" value="${message(code: 'default.button.create.label', default: 'Create')}" />
</div>
</g:form>
<!-- Render the var template (_var.gsp) hidden so we can clone it -->
<g:render template='var' model="['var':null,'i':'_clone','hidden':true]"/>
<!-- Render the var template (_var.gsp) hidden so we can clone it -->
</body>
</html>
_dynam.gsp
<div class="dialog">
<table>
<tbody>
<tr class="prop">
<td valign="top" class="name">
<label for="productType">Product Type</label>
</td>
<td>
<g:textField name='productType' bean="${productsInstance}" value="${productsInstance.productType}"
size='40'/>
</td>
</tr>
<tr class="prop">
<td valign="top" class="name">
<label for="Vars">Vars</label>
</td>
<!-- Render the vars template (_vars.gsp) here -->
<g:render template="vars" model="['productsInstance':productsInstance]" />
<!-- Render the vars template (_vars.gsp) here -->
</tr>
<tr class="prop">
<td valign="top" class="name">
<label for="Department">Department</label>
</td>
<td>
<g:textField name='dept.name' readonly="yes" value="${dept.name}" size='40'/>
</td>
</tr>
</tbody>
</table>
</div>
_vars.gsp
<script type="text/javascript">
var childCount = ${productsInstance?.vars.size()} + 0;
function addVar(){
var clone = $("#var_clone").clone()
var htmlId = 'varsList['+childCount+'].';
var varInput = clone.find("input[id$=number]");
clone.find("input[id$=id]")
.attr('id',htmlId + 'id')
.attr('name',htmlId + 'id');
clone.find("input[id$=deleted]")
.attr('id',htmlId + 'deleted')
.attr('name',htmlId + 'deleted');
clone.find("input[id$=new]")
.attr('id',htmlId + 'new')
.attr('name',htmlId + 'new')
.attr('value', 'true');
varInput.attr('id',htmlId + 'data')
.attr('name',htmlId + 'data');
clone.find("select[id$=type]")
.attr('id',htmlId + 'type')
.attr('name',htmlId + 'type');
clone.attr('id', 'var'+childCount);
$("#childList").append(clone);
clone.show();
varInput.focus();
childCount++;
}
//bind click event on delete buttons using jquery live
$('.del-var').live('click', function() {
//find the parent div
var prnt = $(this).parents(".var-div");
//find the deleted hidden input
var delInput = prnt.find("input[id$=deleted]");
//check if this is still not persisted
var newValue = prnt.find("input[id$=new]").attr('value');
//if it is new then i can safely remove from dom
if(newValue == 'true'){
prnt.remove();
}else{
//set the deletedFlag to true
delInput.attr('value','true');
//hide the div
prnt.hide();
}
});
</script>
<div id="childList">
<g:each var="var" in="${productsInstance.vars}" status="i">
<!-- Render the var template (_var.gsp) here -->
<g:render template='var' model="['var':var,'i':i,'hidden':false]"/>
<!-- Render the var template (_var.gsp) here -->
</g:each>
</div>
<input type="button" value="Add Var" onclick="addVar();" />
_var.gsp
<div id="var${i}" class="var-div" <g:if test="${hidden}">style="display:none;"</g:if>>
<g:hiddenField name='varsList[${i}].id' value='${var?.id}'/>
<g:hiddenField name='varsList[${i}].deleted' value='false'/>
<g:hiddenField name='varsList[${i}].new' value="${var?.id == null?'true':'false'}"/>
<g:textField name='varsList[${i}].number' value='${var?.data}' />
<g:select name="varsList[${i}].type"
from="${com.tool.Dynam.VarType.values()}"
optionKey="key"
optionValue="value"
value = "${var?.type?.key}"/>
<span class="del-var">
<img src="${resource(dir:'images/skin', file:'icon_delete.png')}"
style="vertical-align:middle;"/>
</span>
</div>
The solution works in part so you can go to the products page and it loads with the fields and the dynamic fields are added to the view fine and I can enter the data. However when I click save the data for the static fields is persisted but the dynamic vars are not saved to the domain.
I don’t get any errors but I believe it has something to do with the save function line below and the vars:params.varsList in particular.
def product = new Products(product:productInfo, productType:params.productType, dept: dept, vars:params.varsList)
I have checked the varsList data using println and it returns null, can someone please help with this?
Thanks in advance