Hello I'm new to Robot Framework and I want to know if there is a way to check an icon which is embedded in a table row.
I use the Selenium2Library and RIDE.
I want to check that the used icon for the status of a table entry correspond to the status: a pencil icon for draft and a lock icon for approved.
I have two tables in my page, one in status draft another in status approved
When I do a check with Page Should Contain Element css=.fa.fa-pencil.fa-2x the result is always true but it is not checked that the icon is with the right status.
I didn't find any keyword like Table should contain element.
Is there a way to do my check?
Here is the content of the table:
<td class="heading"><i class="fa fa-bolt fa-2x-tom"></i></td>
<td class="heading">ID</td>
<td style="width: 80px;" class="heading">Name</td>
<td class="heading">Type</td>
<td class="heading">RC</td>
<td class="heading">Status</td>
<td onclick="toggle('bom_info_1-3-4581-null-0', false)" class="heading"><i style="color: white;" class="fa fa-info-circle fa-2x-tom"></i></td>
</tr>
<tr>
<td class="padding-3 addBomSupplementalButton"><i style="color: green;" class="fa fa-plus fa-2x "></i></td>
<td class="padding-3">1/3/4581/null/0</td>
<td class="padding-3">3PP - Line & Antenna</td>
<td class="padding-3">0</td>
<td class="padding-3"></td>
<td id="bomStatusOrigin" class="padding-3 bomStatus" style="color: green;"><i class="fa fa-2x fa-lock "></i> approved</td>
<td onclick="toggle('bom_product_1-3-4581-null-0', true)" class="padding-3"><i style="color: black; display: inline-block;" class="fa fa-chevron-right fa-2x" id="bom_product_1-3-4581-null-0_up"></i>
<i style="color: black; display: none;" class="fa fa-chevron-down fa-2x" id="bom_product_1-3-4581-null-0_down"></i></td>
</tr>
</thead>
What I need is a possibility to check that the class .fa.fa-lock.fa-2x is in the same table then the text approved.
I think that this elements is always contained within the webpage but it doesn't have to be visible. Try something like:
Wait Until Page Contains Element ${locator}
or
Page Should Contain Element ${locator}
Related
I'm working with primeng. I have this code to display my data.
My Html:
<p-table #table [columns]="cols" [value]="list" [paginator]="true" responsive="false">
<!---------------- Header of datatable event ------------------>
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" [ngStyle]="{'width' : col.width}">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{ col.header | translate}}
</th>
</tr>
</ng-template>
<!---------------- Body of datatable event ------------------>
<ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
<tr [pSelectableRow]="rowData">
<td *ngFor="let col of columns" [ngStyle]="{'width': col.width }">
<div *ngIf="col.field !== 'idOption'">
{{rowData[col.field]}}
</div>
<div *ngIf="col.field === 'idOption'">
{{rowData[col.field]}}
<span *ngIf="rowData.activeOpt">
<em class="fa fa-lg fa-check-circle" style="color: green; padding-left: 50%"></em>
</span>
<span *ngIf="!rowData.activeOpt">
<em class="fa fa-lg fa-check-circle" style="color: red; padding-left: 40%"></em>
</span>
</div>
</td>
</tr>
</ng-template>
</p-table>
I get this result:
I want that the green fa-check-circle will be in the same line, really i spent many time without any solution. Thanks for any help.
The reason why icons are not aligned is because icon is placed just after the text & the length of text will vary based on the Garantie values.
So in order to keep our icons aligned irrespective of the text length, we can fix the alignment to always right [float:right] (not after the text ends).
Please change your active & inactive icon code line with below.
Active icon (green):
<em class="fa fa-lg fa-check-circle" style="color: green; float:right"></em>
Inactive icon (red):
<em class="fa fa-lg fa-check-circle" style="color: red; float:right"></em>
Good Afternoon,
I'm having a problem trying to get my font awesome icons to work as expected, I have a shopping cart where hardware can be ordered, an address field is provided for each item so the user can send hardware to different locations, as each location is provided I want the icon to change from a cross to a tick, I'm using AngluarJS form validation:
Problem I have is the icon only changes when the last address is entered, I'm sure I need to use an $index or something like it but can't figure it out:
Here is my code...
<table id="cart" class="table table-hover table-condensed">
<thead>
<tr>
<th style="width:55%;">${Product} </th>
<th style="width: 1%;">${Quantity}</th>
<th style="width: 24%;">${Delivery Address:}</th>
<th style="width: 1%;"></th>
<th style="width: 19%;"><span style="visibility: hidden;">${Item Controls}</span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in c.data.cartItems track by item.sys_id | orderBy: 'order'">
<td data-th="Product">
<div class="row">
<div class="col-sm-2 visible-lg"><img ng-show="item.picture" ng-src="{{item.picture}}" alt="{{item.name}}" class="img-responsive item-image"/></div>
<div class="col-sm-10">
<h2 class="nomargin h4">{{item.name}}</h2>
<p class="hidden-xs">{{item.short_description}}</p>
{{item.sys_id}}
</div>
</div>
</td>
<td data-th="Quantity">
<input type="number"
title="${Quantity}"
ng-if="item.show_quantity"
class="form-control text-center"
ng-model="item.quantity"
min="1"
max="20"
ng-model-options="{ updateOn: 'blur' }"
ng-change="c.updateQuantity(item)">
<span ng-if="!item.show_quantity">-</span>
</td>
<td>
<select ng-model="address" name="address" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index, item)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
</td>
<td>
<i ng-show="myForm.address.$dirty" class="fa fa-check-circle" style="color:#008000;">{{myForm.address.$dirty}}</i>
<i ng-show="myForm.address.$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;">{{myForm.address.$pristine}}</i>
</td>
<td class="col-md-12 text-right">
<button title="Edit" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" aria-label="${Edit Item} {{item.name}}" ng-show="item.has_options" ng-click="c.editItem(item.sys_id)"><i class="fa fa-edit"></i></button>
<button title="Remove" class="btn btn-danger btn-sm" aria-label="${Remove Item From Cart} {{item.name}}" ng-click="c.removeItem($event, item)"><i class="fa fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
Lines of interest:
<select ng-model="address" name="address" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index, item)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
<td>
<i ng-show="myForm.address.$dirty" class="fa fa-check-circle" style="color:#008000;">{{myForm.address.$dirty}}</i>
<i ng-show="myForm.address.$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;">{{myForm.address.$pristine}}</i>
</td>
Images Attached:
Cart OnLoad
Last Address Changed
Any help and I would be grateful
Found the solution here:
How to validate inputs dynamically created using ng-repeat, ng-show (angular)
Updated Code:
<td>
<select ng-model="address" name="address{{$index}}" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
</td>
<td>
<i ng-show="myForm['address' + $index].$dirty" class="fa fa-check-circle" style="color:#008000;"> {{myForm.address.$dirty}}{{fieldUpdated}}</i>
<i ng-show="myForm['address' + $index].$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;"> {{myForm.address.$pristine}}</i>
</td>
When I go to the last row (no. 25) and click edit you will see that the dropdown it's cropped out. Can you figure out how to solve this issue?
https://plnkr.co/edit/22e9bo?p=preview
<div ui-scroll-viewport class="col-md-12" style="height: 500px; border: dashed 1px #ddd;">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>id</th>
<th>source</th>
<th>destination</th>
</tr>
</thead>
<tbody>
<tr ui-scroll="item in datasource">
<td>{{item.id}} <a ng-click="showDropdown(item.id)">edit</a></td>
<td>{{item.source}}</td>
<td ng-if="dropdowns.active !== item.id">{{item.destination}}</td>
<td ng-if="dropdowns.active === item.id">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{item.destination}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>10.0.0.0</li>
<li>10.255.255.255</li>
<li>172.16.0.0</li>
<li>172.31.255.255</li>
<li>192.168.255.255</li>
<li role="separator" class="divider"></li>
<li>192.168.0.0</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Generally, this is not the ui-scroll issue, this is how the Bootstrap hosts it's dropdown menu in DOM. If the hoster element has overflow-y: scroll, then you'll get the situation you described in your question. As an angular-way solution I would suggest to use angular-ui wrapper for the Bootstrap: https://angular-ui.github.io/bootstrap/.
They have Dropdown directive which has dropdown-append-to and dropdown-append-to-body settings which allow you to append your Bootstrap dropdown to any element. This will solve the issue.
How to do not allow the arrow to go to another line? This will happens if the screen did not have enough space, see the image:
JSFIDDLE
CODE:
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th class="shrink">COLUMN 1</th>
<th class="shrink">COLUMN 2</th>
<th class="expand">COLUMN 3</th>
<th class="expand">COLUMN 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group btn-block">
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">Descrition of the item <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
<ul class="dropdown-menu">
<li><i class="fa fa-caret-right"></i>Option 1</li>
</ul>
</div>
</td>
<td>Some info here</td>
<td>Some more here</td>
<td>And here too</td>
</tr>
<tr>
<td>
<div class="btn-group btn-block">
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">Descrition of the i asd adasdasdasdasdtem <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
<ul class="dropdown-menu">
<li><i class="fa fa-caret-right"></i>Option 1</li>
</ul>
</div>
</td>
<td>Some info here</td>
<td>Some more here</td>
<td>And here too</td>
</tr>
<tr>
<td>
<div class="btn-group btn-block">
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">No item <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
<ul class="dropdown-menu">
<li><i class="fa fa-caret-right"></i>Option 0</li>
</ul>
</div>
</td>
<td>Some info here again</td>
<td>yay more info here too</td>
<td>ok, enough info now, that is enough</td>
</tr>
</tbody>
</table>
Tried some white-space: nowrap; but could not get the desired result. Any help will be great. The arrow must be in the right side, always.
Instead of floating the carets right, float the text left.
<span class="pull-left">Description... </span> <i class="fa fa-caret-down"></i>
Demo
span.pull-right floats the i.fa-caret-down to the right after your “Description of the item”, which means it’s placed on the next line. Try putting the float before the description. For example:
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left"
data-hover="dropdown" data-toggle="dropdown">
<span class="pull-right"><i class="fa fa-caret-down"></i></span>
Description of the item
</span>
Sample, fixing the first caret.
Setting the white-space: nowrap property will not effect the dropdown icon as it's in a different flow due to the float: right; applied to it by the class .pull-right.
What you're describing sounds as though you want to set a position: absolute against the icon. This does fix the issue of the icon not being effected by the text, but it raises a further question of, how do you want to resolve too much text in a button which isn't sufficiently big?
As far as I can see, the only way to resolve this would be to also apply an overflow: hidden property to the buttons, to force the spacing to the right where the icon sits to be empty, and to apply an ellipsis on the text if any overflow does occur. You can see the combination of these selectors in this JSFiddle, I have forced the buttons to be smaller purely to demonstrate how this would work when they are forced to consume a space smaller that you would otherwise like:
.btn {
white-space: no-wrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px;
}
.fixed-right {
position: absolute;
right: 5px;
}
For one of my projects I need to make one button full width/height of the TD. I tried setting the normal .btn-warning with -Xpx!important but didn't work.
Currently I have this:
But want to achieve to this:
I'm using the following code:
<tbody>
<tr>
<td class="td-btn"><span class="glyphicon glyphicon-ok"></span></td>
<td>Projectnaam</td>
</tr>
</tbody>
Does anyone know how to get this button full with/height with the TD without spacing?
Friend of mine helped out:
<td style="padding: 0px;">
<a href="#" class="btn-sm btn btn-success" style="height: 44px;padding: 12px 10px;">
<span class="glyphicon glyphicon-ok"></span>
</a>
</td>
It's almost what I want =). Thanks all.
.table-condensed>thead>tr>th,
.table-condensed>tbody>tr>th,
.table-condensed>tfoot>tr>th,
.table-condensed>thead>tr>td,
.table-condensed>tbody>tr>td,
.table-condensed>tfoot>tr>td {
padding: 5px;
}