Element not being located by Xpath - html

I am trying to click on a button in a table row. The relevant HTML code is given below:
<div id="catalogItems" class="col-xs-12">
...
<table class="table table-condensed table-hover">
...
<tbody id="existingItemsList">
<tr id="item_3" class="info item" item_name="vegetables" role="form" item_id="3">
...
</tr>
<tr id="item_4" class="info item" item_name="pizza" role="form" item_id="4">
...
</tr>
<tr id="item_5" class="info item" item_name="Pastries" role="form" item_id="5">
<td>
<button onclick=".." class="btn btn-sm btn-info" type="button"><i class="fa fa-times"></i></button>
</td>
</tr>
<tr id="item_6" class="info item" item_name="Burger" role="form" item_id="6">
...
I want to access the the button in the row with item_name="pastries" to run a test on it with Robot. My Xpath is given below:
xpath=//div[#id='catalogItems']//tr[#item_name=Pastries]//button[#class='btn btn-sm btn-info']
With this, however, the button in the first row (item_name="vegetables") is being selected by the Robot FW. How should I change the xpath to access the item_name="pastries" row? Please help!

I think this is because you have an issue here, please cover Pastries with '', so it looks like 'Pastries'
//tr[#item_name='Pastries']

Related

Submit not submitting form but moving cursor to input field

I'm out of options and a bit frustrated. I'm not that familiar with HTML but I have got two forms one where a button of the type="submit" sends my view model to the server side controller and this here where it does not do it. In this form, if I click the submit button the cursor gets moved to the Surcharges[i].Price input field in my table instead. The only difference between the two forms is that this form here has input fields in the table whereas the other has select fields.
<form autocomplete="off" asp-controller="PriceList" asp-action="UpdateSurchargeFixPrices" enctype="multipart/form-data">
<div class="container">
<div class="card">
<div class="card-header bg-primary text-white">
<h4 class="text-center">#localizer["PriceListEdit"]</h4>
</div>
<div class="card-body">
<input hidden value="#Model.BackTo" asp-for="BackTo" />
<table class="table">
<thead>
<tr class="table-secondary">
<th>#localizer["Bezeichnung"]</th>
<th>#localizer["Gruppe"]</th>
<th>#localizer["Code"]</th>
<th>#localizer["Maximaler Wert in"] #Model.Currency</th>
<th>#localizer["Preis in"] #Model.Currency</th>
</tr>
</thead>
<tbody>
#if (Model.Surcharges != null)
{
for (int i = 0; i < Model.Surcharges.Count; i++)
{
<tr>
<td><input hidden value="#Model.Surcharges[i].Id" asp-for="Surcharges[i].Id" /><input value="#Model.Surcharges[i].Description" asp-for="Surcharges[i].Description" /></td>
<td>
<input value="#Model.Surcharges[i].Group" asp-for="Surcharges[i].Group" />
</td>
<td>
<input value="#Model.Surcharges[i].Code" asp-for="Surcharges[i].Code" />
</td>
<td>
<input value="#Model.Surcharges[i].MaxValue" asp-for="Surcharges[i].MaxValue" />
</td>
<td>
<input value="#Model.Surcharges[i].Price" asp-for="Surcharges[i].Price" />
</td>
</tr>
}
}
</tbody>
</table>
</div>
</div>
<a class="btn btn-primary" asp-controller="PriceList" asp-action="BackTo" asp-route-backTo="#Model.BackTo">#localizer["zurück"]</a>
<a class="btn btn-primary" asp-controller="PriceList" asp-action="NewSurchargeFixPrice">#localizer["neuer Aufschlag"]</a>
<button class="btn btn-primary" type="submit">#localizer["speichern"]</button>
</div>
</form>
I change the input field to
< input formnovalidate="formnovalidate".../>
and now I can reach the breakpoint in my controller.

Angular showing json object in html table

Hello guys i have json data from firestore and i want to display these data in html table.
This is my customer-list.component.html
<body>
<div class="container">
<div class="title">
<h3>Customer Table</h3>
</div>
<div class="row">
<div class="col-md-12">
</div>
<div class="col-lg-8 col-md-10 ml-auto mr-auto">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="text-center">#</th>
<th>Name</th>
<th>Age</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<div *ngFor="let customer of customers" style="width: 300px;">
<app-customer-details [customer]='customer'></app-customer-details>
</div>
<div style="margin-top:20px;">
<button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete All</button>
</div>
</tbody>
</table>
</div>
</div>
Seems like there is nothing wrong in there.
This is my customer-details.component.html
<div *ngIf="customer">
<tr>
<td>
<label>First Name: </label> {{customer.name}}
</td>
<td>
<label>Age: </label> {{customer.age}}
</td>
<td>
<label>Active: </label> {{customer.active}}
</td>
<span class="button is-small btn-primary" *ngIf='customer.active' (click)='updateActive(false)'>Inactive</span>
<span class="button is-small btn-primary" *ngIf='!customer.active' (click)='updateActive(true)'>Active</span>
<span class="button is-small btn-danger" (click)='deleteCustomer()'>Delete</span>
</tr>
</div>
But my table output is :
Thanks for answers.
When you look at the DOM tree you will find out that
<tr><app-customer-details>...</app-customer-details</td>
This will not result in the component rendering inside the table as a but will cram the entire component HTML template inside one column.
By adding an attribute selector to the component i.e. selector: 'app-customer-details, [app-customer-details]', you can add the selector directly to the element like so and now the elements inside the component HTML template will render correctly inside the table.
Look at this link;
The correct code is as follows:
Customer-list.component.html
<div class="container">
<div class="title">
<h3>Customer Table</h3>
</div>
<div class="row">
<div class="col-md-12">
</div>
<div class="col-lg-8 col-md-10 ml-auto mr-auto">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<!-- <th class="text-center">#</th> -->
<th>Name</th>
<th>Age</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let customer of customers" [customerDetails]="customer">
</tr>
<div style="margin-top:20px;">
<button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete All</button>
</div>
</tbody>
</table>
</div>
</div>
</div>
</div>
Customer-details.component.html
<td>
{{customerDetails.name}}
</td>
<td>
{{customerDetails.age}}
</td>
<td>
{{customerDetails.active}}
</td>
Customer-details.component.ts
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'customerDetails, [customerDetails]',
templateUrl: './customer-details.component.html',
styleUrls: ['./customer-details.component.css']
})
export class CustomerDetailsComponent implements OnInit {
#Input() customerDetails: object = {};
constructor() { }
ngOnInit() {
}
}
Don´t limit the width of a customer´s component to 300px, like you did here:
<div *ngFor="let customer of customers" style="width: 300px;">
You have many things which will not render your table properly:
<tbody>
<div *ngFor="let customer of customers" style="width: 300px;">
<app-customer-details [customer]='customer'>
</app-customer-details>
</div>
....
</tbody>
This will render like this:
<tbody>
<div ...>
<app-customer-details>
<div> <tr>.....</tr></div>
</app-customer-details>
</div>
....
</tbody>
Which is not correct HTML.
Change you detail component to use ng-template:
<ng-template >
<tr *ngIf="customer">
<td><label>First Name: </label> {{customer.name}}</td>
<td><label>Age: </label> {{customer.age}}</td>
<td><label>Active: </label> {{customer.active}}</td>
<td>
Note: All spans should also be inside a TD tag
</td>
</tr>
</ng-template>

table rows are not properly aligned with table header in IE

I am facing issue when working with NgTableParams to show table in IE.
It is showing correctly in chrome but the table row alignment is not proper in IE.
Please find the demo https://plnkr.co/edit/NAi4ZIleQ2LWDWHQbjS5?p=preview
In IE when you open the above link and Launch the preview window in separate page, you can notice the table rows are not properly matching with the table header.Any inputs?
html:
<div ng-controller="BaseController">
<div class="col-xs-5 container-paragraph">
<table ng-table="tableParams" class="table table-striped table-scroll" show-filter="true">
<tr ng-repeat="user in $data">
<td title="'Name'" filter="{ firstname: 'text'}" sortable="'firstname'">
{{user.firstname}}</td>
</tr>
</table>
</div>
<div class="col-xs-7 container-paragraph">
<table ng-table="tableParams" class="table table-striped table-scroll" show-filter="true">
<tr ng-repeat="user in $data">
<td title="'Name'" filter="{ firstname: 'text'}" sortable="'firstname'">
{{user.firstname}}</td>
</tr>
</table>
</div>
</div>
Pls find the image which shows the alignment of rows with the header issue in IE below:
Put both tables inside a single table and try
may this code help you
<td data-title="'#'" sortable="'id'">
{{$index + 1}} </td>
you can name your fields using data-title in ng-table
<input type="text" class="form-control input-sm pull-right ng-pristine ng-valid ng-touched"
ng-model="" placeholder="">
and search button seperatelly

How to show and hide buttons with bootstrap and angularjs?

I have a table which contains some data and some buttons which changes according to response and user.
Here's the table.
<div class="form-group">
<div class="col-lg-12 col-md-9">
<table id="basic-datatables" class="table table-bordered" cellspacing="0" width="100">
<thead style="text-align:center">
<tr>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Employee ID</th>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Employe Name</th>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Email</th>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Department</th>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Date Created / Joined</th>
<th rowspan="1" colspan="1" style="width:110px; text-align:center">Actions</th>
</tr>
</thead>
<tbody style="text-align:match-parent">
<tr ng-repeat="data in details = (FilterDetails | limitTo:itemsPerPage:(currentPage-1)*itemsPerPage)">
<td style="text-align:center">{{data.Employee.Empid}}</td>
<td style="text-align:center">{{data.Employee.Fname}} {{data.Employee.Lname}}</td>
<td style="text-align:center">{{data.Employee.Email}}</td>
<td style="text-align:center">{{data.Department.DeptName}}</td>
<td style="text-align:center">{{data.Employee.Date_of_join | dateFormat}}</td>
<td style="text-align:center; width:100px">
<div>
<button type="submit" class="btn btn-success pad btn-sm" ng-click="Generate(data)">Generate</button>
<!--<button type="submit" class="btn btn-success pad btn-sm" ng-click="state = true" ng-hide="state">Generate</button>-->
<button type="submit" class="btn btn-warning btn-sm" ng-show="data.UserLogin.Status=='pending'">Pending</button>
<button type="submit" class="btn btn-default btn-sm" ng-show="data.UserLogin.Statuss=='pending'">Retry</button>
</div>
</td>
</tr>
</tbody>
</table>
<p ng-show="details.length == 0">No Users found.</p>
<div class="col-md-8 col-xs-12">
<uib-pagination total-items="totalEmployees" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" boundary-links="true" class="pagination" items-per-page="itemsPerPage"></uib-pagination>
</div>
</div>
</div>
What I need to get done is that when the response comes from the JSON data the buttons have to change. Now according to this;
Generate button should show whendata.UserLogin.Status == ''(empty)
Pending button should show when data.UserLogin.Status == 'pending'
Retry button should show when data.UserLogin.Status == 'pending'
How do I achieve this. Help woud be appreciated.
You can use ng-show ng-hide or ng-if like below,
<button class="btn btn-default" ng-show="data.UserLogin.Status == ''">Generate </button>
or
<button class="btn btn-default" ng-hide="data.UserLogin.Status != ''">Generate </button>
or
<button class="btn btn-default" ng-if="data.UserLogin.Status == ''">Generate </button>
You should go for ng-if instead of ng-show or ng-hide. Because in case of ng-show or ng-hide based on the flag the content is loaded in the DOM. so if u try to change the value of flag by using web developer of browser u can be able to see the actual content. But if u go for ng-if, the content is loaded at runtime only when the condition is true. so whenever u want a quicker performance you can go for ng-show or ng-hide but if we want runtime behavior u should use ng-if.
You can write code as below..
<button class="btn btn-default" ng-show="data.UserLogin.Status == ''">Generate </button>
<button class="btn btn-default" ng-show="data.UserLogin.Status == 'pending'">Pending </button>
<button class="btn btn-default" ng-show="data.UserLogin.Status == 'pending'">Retry</button>
We can use ng-if,ng-show,ng-hide like
<button type="submit" class="btn btn-success pad btn-sm" ng-click="Generate(data)" ng-if="!data.UserLogin.Status">Generate</button> <button type="submit" class="btn btn-success pad btn-sm" ng-click="Pending (data)" ng-if="!data.UserLogin.Status">Pending </button>
use ng-if ,it is efficient
Use below code in the success function of the API. This code will run after you get the response and the DOM is created.
$scope.$evalAsync(function(){
$timeout(function() {
// Here set the scope variable and it will work in ng-show
}, 0); // wait...
});
Note: Do not forget to add $timeout in the controller.

is there a special way to put an input field of type checkbox inside a tabledata tag of a table that is present inside an angularjs modal?

here is my modal:
<!-- modal for viewing permissions -->
<div id="modal-user-permissions" class="modal">
<div class="modal-content">
<h4 id="modal-user-title">User Access permissions</h4>
<div class="row">
<table class="hoverable bordered">
<thead>
<tr>
<th class="text-align-center">Allow?</th>
<th class="text-align-center">Page Id</th>
<th class="width-30-pct">page Name</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="d in pages| filter:search">
<td><input type="checkbox" ng-model="d.selected"/></td>
<td class="text-align-center">{{ d.page_id}}</td>
<td>{{d.page_name }}</td>
</tr>
</tbody>
</table>
<div class="input-field col s12">
<a id="btn-update-user" class="waves-effect waves-light btn margin-bottom-1em" ng-click="updateUser()"><i class="material-icons left">edit</i>Save Changes</a>
<a class="modal-action modal-close waves-effect waves-light btn margin-bottom-1em "><i class="material-icons left">close</i>Close</a>
</div>
for testing i'm passing true in every d.selected . i'm not getting the checkbox
here is the output:
Output
i would like to know if i'm not doing something correctly. Any best practices would be appreciated. and finally please tell me a way to get that check box bellow the allow heading in the output table included as picture.
You should use ngChecked instead on ngModel.
Sets the checked attribute on the element, if the expression inside
ngChecked is truthy.
<input type="checkbox" ng-checked="d.selected"/>