I want to verify the number of table rows in protractor, on a page in which tables of this type appear more than once. I've been trying to use the first-of-type selector, but it seems to be catching both tables because they do not appear side by side.
For example, given this HTML:
<div>
<table class="foo">
<tr>
<th>First row</th>
<th>Second row</th>
<th>Third row</th>
<th>Fourth row</th>
</tr>
</table>
</div>
<div>
<table class="foo">
<tr>
<th>First row</th>
<th>Second row</th>
<th>Third row</th>
<th>Fourth row</th>
</tr>
</table>
</div>
And this protractor code:
element.all(by.css('table:first-of-type tr:first-of-type th')).then(function (elements) {
expect(elements.length).toBe(4);
});
Protractor is failing on the grounds that there are 8 elements and not 4. It seems the table:first-of-type selector is catching both elements, since they're both the first children of their parent div components. My project is structured in such a way that it's better not to add individual classes to each wrapping div.
Is there a way to get the first element found in Protractor and then search its child elements?
I have not used :first-of-type as a css selector in Protractor; however, you could get the first table with all th's and then check to see if the count is 4.
expect(element.all(by.css('table')).first().all(by.css('th')).count()).toBe(4);
You can certainly do it the way #cnishina suggested (and I would actually prefer his approach over making a long CSS selector), but if you want to continue using a single CSS selector for this problem, you should also apply the first-of-type (or first-child) to the parent div:
div:first-of-type > table:first-of-type > tr:first-of-type > th
I've also added the > to enforce the direct parent-child relationships.
Related
Basically I'm creating a bootstrap table in my react project and am using an accordion toggle to contain the excess info in a dropdown. As of now when i click the dropdown all of the dropdowns open, so i'm trying to set the data-target attribute (currently set to #demo1) and the id attribute to change dynamically in order to give me better control over which drop down is open and when.
I'm using React and bootstrap and am still fairly new :S
I tried setting data-target to a unique ID {item._id} which is the same as the key, but nothing happens i presume it's because i don't have the # in front of it, but it would error out if i add it to the front of the expression.
<tr
key={item._id}
className="accordion-toggle"
data-toggle="collapse"
data-target="#demo1"
>
{...}
</tr>
<tr>
<td colSpan="6" className="hiddenRow">
<div className="accordion-body collapse" id="demo1">
<table className="table table-dark">
</table>
</div>
</td>
</tr>
I would probably do this by tracking the state of all Dropdowns (open vs closed) in the parent component in an array, and passing it to the child component as a boolean prop such as 'isOpen'.
If there is more to it, perhaps you can attach a screenshot of what you are trying to do?
I have a view that manages school's tests in a period (trimester or semester). Each semester can have many tests of type normal but only one of type examen.
I have made a script in jsFiddle that shows the behavior I am looking for https://jsfiddle.net/dfLf9zkm/.
The difference is that in the ng-repeat I have a ng-controller over each test so every time I called the ng-method it only affects the row I am on and not the rest. Something like
<div ng-app="app" ng-controller="Controller">
<table>
<tr>
<th>Type</th>
<th>Ponderation</th>
</tr>
<tr ng-repeat="test in tests track by test.id" ng-controller="TestRow">
<td><select ng-model="test.type" ng-options="type.id as type.type disable when type.id == 2 && hasExam && idExam!=test.id for type in types" ng-change="checkTests()"></select>
</td>
<td>{{test.ponderation}}%</td>
</tr>
</table>
</div>
If I change the value of $scope.hasExam with a method inside TestRow controller it only affect that row and not the rest. How can I do it?
I finally decided to leave everything in one controller and that fixed everything up
I'm having an issue where lining up a table isn't working properly and I was wondering if anyones dealt with something like this before. I looked it up, but couldn't find anything addressing it. I'm using AngularJS and nested ng-repeats which is why I'm having some trouble with this (and need to nest them inside a table). My code is below:
<table class="table table-condensed table-hover table-responsive">
<thead><tr>
<th class="col-sm-4">1</th>
<th class="col-sm-3">2</th>
<th class="col-sm-3">3</th>
</tr></thead>
<tbody ng-repeat="blah in blah">
<tr ng-repeat="blah2 in blah">
<td>......</td>
</tr>
</tbody>
<!--This is the end of "Table 1" in the diagram below-->
<tbody ng-repeat="blah3 in blah4">
<tr ng-repeat="blah5 in blah6">
<td>.........</td>
</tr>
</tbody>
<!--This is the end of "Table 2" in the diagram below-->
</table>
I'm ending up with a result like this (note, I had to draw it due to the fact that the table data I'm using is sensitive information):
How can I pull the second tbody (the smaller one) next to the first?
Thanks
If I understood you correctly, you can simply use Bootstrap's columns as containers for your tables. For instance:
div.col-md-6
Will render two columns together until the screen collapse.
https://jsfiddle.net/DTcHh/11692/
Why not use the grid system of bootstrap ?
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
I don't know what you want to put in the table but you can probably put it into the grid system. link to doc
I have a table that uses ng-repeat-start and ng-repeat-end every two table rows, like this:
<table>
<tr>... // other <tr>'s without ng-repeat
<tr ng-repeat-start="parameter in ctrl.parameters">
<td>Name</td>
<td>{{parameter.name}}</td>
</tr>
<tr ng-repeat-end>
<td>Value</td>
<td>{{parameter.value}}</td>
</tr>
</table>
This AngularJS application is deployed in Karaf as a Hawtio plugin and ng-repeat-start-end part doesn't work. Maybe because it's a plugin. Other table rows (without ng-repeat) works and shows the data binded. The odd thing is, a single entry for the label Name and Value still appears, but without the expression evaluated, whether there is or no data bound to the two element rows. What's the reason behind this?
I'm considering to use a custom directive in the js module instead of placing ng-repeat-start and ng-repeat-end in the html. Could someone show how to do this the custom directive way?
Thanks.
I have solved my own question. Karaf's Hawtio uses AngularJS version 1.1.5 (as of this writing), which do not have ng-repeat-start and ng-repeat-end yet. So, what I did is to enclose the repeating two rows in another <tbody> (multiple <tbody>s is working in HTML5) and put ng-repeat directive there. Like this:
<tbody>
.
.
.
</tbody>
<tbody ng-repeat="entry in data.entries">
<tr>
<td>Name</td>
<td>{{entry.name}}</td>
</tr>
<tr>
<td>Value</td>
<td>{{entry.value}}</td>
</tr>
</tbody>
angular-tablesort is saving me a lot of time, but i'm hitting a bug where I can't get the header to become sortable even though I am following the examples and adding the classes. My code looks like this:
<table class="table" ts-wrapper>
<thead>
<tr>
<th class="tablesort-sortable" ts-criteria="Name|lowercase" ts-default>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items" ts-repeat>
<td>{{item.data.title}}</td>
</tr>
</tbody>
</table>
Solved!
As I was working through how best to present this to you guys I realized that this was an RTFM problem. I was confused by the fact that the example matches the ts-criteria with the div contents and didn't match the ng-repeat contents fully. angular-table actually lets you pass in item.data.title or data.title to get a sortable table.
A little embarrassing, but I'm still going to post this in case someone else comes across the same issue. This has nothing to do with bootstrapped angular applications, which was my first hunch. Changed the title to be more generic (from Angular-tablesort breaks when angular is bootstrapped to Angular-tablesort breaks).