I am trying to select based on text, I use the following to select
$("div[class='ui-datatable-tablewrapper']").find("span:contains('Person Name')")
i get the following error:
Caused by: org.openqa.selenium.InvalidSelectorException: invalid selector: An invalid or illegal selector was specified
I believe it's because of the "contains" selector in jquery. How do I achieve the same in geb.
Html:
<div class="ui-datatable-tablewrapper">
<table role="grid">
<thead id="searchForm:singleStaffDT_head">
<tr role="row">
<th id="searchForm:singleStaffDT:j_id_7s" class="ui-state-default" role="columnheader"
aria-label="Person ID" scope="col" style="width:15%">
<span class="ui-column-title">Person ID</span>
</th>
<th id="searchForm:singleStaffDT:j_id_7u" class="ui-state-default" role="columnheader"
aria-label="Person Name" scope="col" style="width:25%">
<span class="ui-column-title">Person Name</span>
</th>
<th id="searchForm:singleStaffDT:j_id_7w" class="ui-state-default" role="columnheader"
aria-label="Organization" scope="col" style="width:25%">
<span class="ui-column-title">Organization</span>
</th>
<th id="searchForm:singleStaffDT:j_id_7y" class="ui-state-default" role="columnheader"
aria-label="Staff Role" scope="col" style="width:25%">
<span class="ui-column-title">Staff Role</span>
</th>
<th id="searchForm:singleStaffDT:j_id_80" class="ui-state-default" role="columnheader"
aria-label="" scope="col" style="width:10%">
<span class="ui-column-title">Action
<BR />[Select]</span>
</th>
</tr>
</thead>
<tbody id="searchForm:singleStaffDT_data" class="ui-datatable-data ui-widget-content">
<tr class="ui-widget-content ui-datatable-empty-message">
<td colspan="5"></td>
</tr>
</tbody>
</table>
</div>
For a "contains" search, you want to write your code in a similar pattern to this:
$("span", text: contains("Person Name"))
You could also do something like this in your page object (i think!):
personName { $('span').find(text: 'Person Name') }
Or:
personName { find('span', text: 'Person Name') }
Related
My client has asked me to make the following table sortable on all columns:
<table class="table table-striped table-condensed">
<thead>
<tr>
<th style="width: 18%">Customer/Supplier</th>
<th style="width: 7%">Title</th>
<th style="width: 10%">First Name</th>
<th style="width: 10%">Last Name</th>
<th style="width: 10%">Department</th>
<th style="width: 10%">Email Address</th>
<th style="width: 15%">Main Phone</th>
<th style="width: 10%">Catetory</th>
<th style="width: 10%">Position</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in SearchResultContactList" v-bind:key="item.ContactID" v-on:click="viewContact(item.ContactID)">
<td>{{item.CustomerName}}{{item.SupplierName}}</td>
<td>{{item.TitleName}}</td>
<td>{{item.FirstName}}</td>
<td>{{item.LastName}}</td>
<td>{{item.DepartmentName}}</td>
<td>{{item.EmailAddress}}</td>
<td>{{getContactMainPhoneNumber(item)}}</td>
<td>{{item.CategoryName}}</td>
<td>{{item.Position}}</td>
</tr>
</tbody>
I've tried this on the Last Name column
<th data-field="LastName" data-sortable="true" style="width: 10%">Last Name</th>
However, it doesn't work.
Any ideas?
Thanks
I was going to suggest what the comment suggested, so I built a scaled back sample component to demonstrate.
new Vue({
el: '#app',
data: {
contacts: [
{
firstName: 'Aaa',
lastName: 'Www'
},
{
firstName: 'Lll',
lastName: 'Mmm'
},
{
firstName: 'Zzz',
lastName: 'Bbb'
},
]
},
methods: {
sortContacts(property) {
this.contacts.sort((a, b) => (a[property] > b[property]) ? 1 : -1);
}
}
})
th {
cursor: pointer;
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div id='app'>
<div class="sort-table-by-columns">
<div class="row"><div class="col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th #click="sortContacts('firstName')">FIRST NAME</th>
<th #click="sortContacts('lastName')">LAST NAME</th>
</tr>
</thead>
<tbody>
<tr v-for="(contact, index) in contacts" :key="index">
<td>{{ contact.firstName }}</td>
<td>{{ contact.lastName }}</td>
</tr>
</tbody>
</table>
</div></div>
</div>
</div>
In Package table which is Tbl_Package I have columns PackageID,PackageName,Orderno.
For Platinum Orderno is 1,for Gold it is 2,Silver 3.
I have another table for Patients Tbl_Patientinfo in which I have columns PatientID,PatientName,
PackageID,PackageName .
According to Package patients should be displayed in platinum all platinum member patients should be displayed,In gold all gold member patients so on for silver my query is below
ALTER Proc [dbo].[Sp_Get_AppointmentRequest_Data]
as begin
select a.PatientID,a.PatientName,b.PackageID,b.PackageName,b.Orderno from Tbl_Patientinfo as a
left join Tbl_Packageinfo as b on a.PatientID=b.PackageID
order by PatientID desc
end
and in my view
<h2>Platinum</h2>
<div class="sparkline8-graph">
<div class="static-table-list">
<table class="table">
<thead>
<tr class="headings">
<th class="column-title">SNO</th>
<th class="column-title">Patient Name</th>
<th class="column-title">Package</th>
<th class="column-title">Mobile</th>
<th class="column-title">Address</th>
<th class="column-title">Date</th>
<th class="column-title">Manage</th>
</tr>
</thead>
<tbody>
#{
if (Model.PatientList == null || Model.PatientList.Count() == 0)
{
<tr>
<td style="color: #ff0000;">No results found!</td>
</tr>
}
else
{
foreach (var item in Model.PatientList)
{
<tr class="even pointer">
<td class=" ">#item.RowNumber</td>
<td class=" ">#item.PatientName</td>
<td class=" ">#item.PackageName</td>
<td class=" ">#item.Mobileno</td>
<td class=" ">#item.Address</td>
<td class=" ">#item.Date</td>
<td class=" ">
<i class="fa fa-pencil"></i>Edit
<i class="glyphicon glyphicon-remove"></i>Delete
</td>
</tr>
}
}
}
</tbody>
</table>
</div>
</div>
for gold and silver same as above
How should i Display patients separately according to package?
You are fetching all member from the table, If you want to filter only platinum member from fetched record and display in razor view, You can set the condition
#foreach(var item in Model.PatientList)
{
#if(#item.PackageID == 1)
{
<tr class="even pointer">
<td class=" ">#item.RowNumber</td>
<td class=" ">#item.PatientName</td>
<td class=" ">#item.PackageName</td>
<td class=" ">#item.Mobileno</td>
<td class=" ">#item.Address</td>
<td class=" ">#item.Date</td>
<td class=" ">
<i class="fa fa-pencil"></i>Edit
<i class="glyphicon glyphicon-remove"></i>Delete
</td>
</tr>
}
}
I don't understand the behavior of my bootstrap 3.3.7 + datatables 1.10.15 table.
Here is my initial HTML Table :
<table id="types-2" class="table-bordered table-striped table-condensed">
<thead>
<tr>
<th class="both" data-field="Type" data-sortable="true">Type</th>
<th class="both" data-field="Name" data-sortable="true">City</th>
<th class="both" data-field="City" data-sortable="true">‰ city</th>
<th class="both" data-field="Department" data-sortable="true">‰ department </th>
<th class="both" data-field="Region" data-sortable="true">‰ region</th>
</tr>
</thead>
<tbody>
<tr>
<td>Case 1</td>
<td>782 </td>
<td>13.84‰ </td>
<td>18.38‰ </td>
<td>24.25‰ </td>
</tr>
<tr>
<td>Case 2</td>
<td>267 </td>
<td>4.73‰ </td>
<td>5.37‰ </td>
<td>7.87‰ </td>
</tr>
<tr>
<td>Case 3 </td>
<td>191 </td>
<td>3.38‰ </td>
<td>4.27‰ </td>
<td>4.02‰ </td>
</tr>
<tr>
<td>Case 4</td>
<td>144 </td>
<td>0.04‰ </td>
<td>0.29‰ </td>
<td>0.24‰ </td>
</tr>
</tbody>
</table>
I'm using this script in order to hide pagination and search, to order by colomn 1 desc value, and to be responsive and to display directly all the rows.
<script>
jQuery(document).ready(function() {
jQuery('#types-2').DataTable( {
"bPaginate": false,
"bInfo" : false,
"responsive": true,
"searching": false,
"aaSorting": [[1,'desc']],
responsive: {
details: {
display: jQuery.fn.dataTable.Responsive.display.childRowImmediate,
type: ''
}
}
} );
} );
</script>
What I can't figure is why the script is adding two empty div class rows at the begining and the end of the table :
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
[...]
<div class="row">
<div class="col-sm-5"></div>
<div class="col-sm-7"></div>
</div>
The full render is :
<div id="types-2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-12">
<table id="types-2" class="table-bordered table-striped table-condensed dataTable no-footer dtr-" role="grid" style="width: 605px;">
<thead>
<tr role="row">
<th class="both sorting" data-sortable="true" data-field="Type" tabindex="0" aria-controls="types-2" rowspan="1" colspan="1" style="width: 114px;" aria-label="Délit: activate to sort column ascending">Délit</th>
<th class="both sorting_desc" data-sortable="true" data-field="Name" tabindex="0" aria-controls="types-2" rowspan="1" colspan="1" style="width: 127px;" aria-sort="descending" aria-label="Abrets en Dauphiné : activate to sort column ascending">Abrets en Dauphiné
</th>
<th class="both sorting" data-sortable="true" data-field="City" tabindex="0" aria-controls="types-2" rowspan="1" colspan="1" style="width: 140px;" aria-label="‰ Abrets en Dauphiné: activate to sort column ascending">‰ Abrets en Dauphiné
</th>
<th class="both sorting" data-sortable="true" data-field="Department" tabindex="0" aria-controls="types-2" rowspan="1" colspan="1" style="width: 48px;" aria-label="‰ Isère : activate to sort column ascending">‰ Isère
</th>
<th class="both sorting" data-sortable="true" data-field="Region" tabindex="0" aria-controls="types-2" rowspan="1" colspan="1" style="width: 101px;" aria-label="‰ Rhône-Alpes: activate to sort column ascending">‰ Rhône-Alpes
</th>
</tr>
</thead>
<tbody>
<tr class="odd" role="row">
<td tabindex="0">Case 1</td>
<td class="sorting_1">782 </td>
<td>13.84‰ </td>
<td>18.38‰ </td>
<td>24.25‰ </td>
</tr>
<tr class="even" role="row">
<td tabindex="0">Case 2</td>
<td class="sorting_1">267 </td>
<td>4.73‰ </td>
<td>5.37‰ </td>
<td>7.87‰ </td>
</tr>
<tr class="odd" role="row">
<td tabindex="0">Case 3</td>
<td class="sorting_1">191 </td>
<td>3.38‰ </td>
<td>4.27‰ </td>
<td>4.02‰ </td>
</tr>
<tr class="even" role="row">
<td tabindex="0">Case 4 </td>
<td class="sorting_1">144 </td>
<td>0.04‰ </td>
<td>0.29‰ </td>
<td>0.24‰ </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-5"></div>
<div class="col-sm-7"></div>
</div>
</div>
I can't figure where these additional 2 div class rows come from. Do you have any clue and how can I prevent them to appear (except display:none them)
Thanks.
It is added by default value for dom option when using Bootstrap styling.
If you're not using search, pagination and info controls, you can override the default layout with the following option.
dom: 'rt'
See official documentation for more information.
I'm trying to get the value qty of products shipped to display as an additional column in the invoice report. Not sure if its as simple as finding out what variable it is or what. Is there any easy way to reference what variables are available for the current views?
<table class="table table-condensed">
<thead>
<tr>
<th>Description</th>
<th class="hidden">Source Document</th>
<th class="text-right">Ordered</th>
<th class="text-right">Shipped</th>
<th class="text-right">Backorder</th>
<th class="text-right">Unit Price</th>
<th t-if="display_discount" class="text-right">Disc.(%)</th>
<th class="text-right">Extended Price</th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr t-foreach="o.invoice_line_ids" t-as="l">
<td><span t-field="l.name"/></td>
<td class="hidden"><span t-field="l.origin"/></td>
<td class="text-right">
<span t-field="l.quantity"/>
<span t-field="l.uom_id" groups="product.group_uom"/>
</td>
<td class="text-right">
<span t-field="o.delivery_count"/>
</td>
<td class="text-right">
</td>
<td class="text-right">
<span t-field="l.price_unit"/>
</td>
<td t-if="display_discount" class="text-right">
<span t-field="l.discount"/>
</td>
<td class="text-right">
<span t-field="l.price_subtotal" t-options="{"widget": "monetary", "display_currency": o.currency_id}"/>
</td>
</tr>
</tbody>
I don't exactly know what you mean with "products shipped" but you can get the quantity of the invoice lines to your report like this:
<t t-foreach="o.invoice_line_ids" t-as="l">
<span t-field="l.quantity"/>
</t>
Same for the stock picking lines quantity:
<t t-foreach="o.move_lines" t-as="l">
<span t-field="l.product_uom_qty"/>
</t>
One easy way to get the variable names is to activate the develop mode and placing the cursor over a field label.
You can also go to Settings->Database Structure->Models then just pick your needed model to see the variable names (field names).
I created a new template for printing, and i want to customize it so it prints all the lines from account.invoice.line model. Is there a way you can do that. Here is the code of the template so far.
<t t-name="account.specifikacioni_report_document">
<t t-call="report.external_layout">
<div class="page">
<table class="table table-condensed">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th class="text-right">Unit Price</th>
<th class="text-right" groups="sale.group_discount_per_so_line">Discount (%)</th>
<th class="text-right">Taxes</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr t-foreach="o.invoice_line" t-as="l">
<td>
<span t-field="l.name"/>
</td>
<td>
<span t-field="l.quantity"/>
<span t-field="l.uos_id" groups="product.group_uom"/>
</td>
<td class="text-right">
<span t-field="l.price_unit"/>
</td>
<td class="text-right" groups="sale.group_discount_per_so_line">
<span t-field="l.discount"/>
</td>
<td class="text-right">
<span t-esc="', '.join(map(lambda x: x.name, l.invoice_line_tax_id))"/>
</td>
<td class="text-right">
<span t-field="l.price_subtotal" t-field-options="{"widget": "monetary", "display_currency": "o.currency_id"}"/>
</td>
</tr>
</tbody>
</table>
</div>
</t>
</t>
This prints invoice lines for one invoice cause I copied the account.report_invoice_document and just edited it, but how can I list all invoice lines here not only the invoice lines for an invoice
You can follow the report_invoice.xml to print the lines.
<table class="table table-condensed">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th class="text-right">Unit Price</th>
<th class="text-right" groups="sale.group_discount_per_so_line">Discount (%)</th>
<th class="text-right">Taxes</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr t-foreach="o.invoice_line" t-as="l">
<td><span t-field="l.name"/></td>
<td>
<span t-field="l.quantity"/>
<span t-field="l.uos_id" groups="product.group_uom"/>
</td>
<td class="text-right">
<span t-field="l.price_unit"/>
</td>
<td class="text-right" groups="sale.group_discount_per_so_line"><span t-field="l.discount"/></td>
<td class="text-right">
<span t-esc="', '.join(map(lambda x: x.name, l.invoice_line_tax_id))"/>
</td>
<td class="text-right">
<span t-field="l.price_subtotal"
t-field-options='{"widget": "monetary", "display_currency": "o.currency_id"}'/>
</td>
</tr>
</tbody>
</table>