Accessing table TH element using WATIR - watir

I need to check if a certain column is displayed in the table.
Each column has a TH header with an unique ID.
What would the best way to check for the existence on a TH element in a table?
Here is an example of the table code.
<table id="attr-table">
<thead>
<tr>
<th id="attr-action-col"><input type="checkbox" value="" class="attr-action-box" id="attr-action-col_box"></th>
<th id="attr-name-col">Name<span class="ui-icon ui-icon-triangle-1-n"></span></th>
<th id="attr-type-col"></th>
<th id="attr-scope-col"></th>
<th id="attr-value-col">English Value</th>
<th id="attr-master-col">Master Value</th>
<th id="attr-translation-col">T</th>
<th id="attr-workflow-col">Status</th>
<th id="attr-history-col">H</th>
</tr>
</thead>
<tbody>
....
</tbody></table>
TIA

Try th, it should work in watir-webdriver, if it does not work in other Watir gems:
browser.th(:id, 'attr-translation-col').exists?

generally the .exists? method is your best bet to see if a given element exists. it returns true or false..
browser.cell(:id, 'attr-translation-col').exists?
=-=-=-= Edit to reflect stuff learned via comments and some resulting investigation =-=-=-=
the .cell method is implemented very differently in Watir vs Watir-Webdriver. This does not appear to be included in the doc about the differences between the two.
In Watir, the .cell method is defined in the Watir::Container module and returns a tablecell object. This makes the .cell method available nearly anywhere from anything that inherets from Container or includes it. For example the IE object. The tablecell object is inhereted from the Element class, and thus has access to most of the expected methods such as .exists?
In Watir-Webdriver, the .cell method is defined in Watir::CellContainer. That module is included in Watir::TableRow, which means that (presuming I am understanding this correctly) the .cell method is only available from within a TableRow object, or something that includes TableRow or inherits from it. For example if you review a Watir-Webdriver Browser object, you won't see the .cell method listed. Like Watir, the tablecell object is inhereted from the Element class, and likewise should have access to the .exists? method.
In contrast to .cell, the Watir-Webdriver methods for .tr, .td, .th are all defined in Watir::Container (as opposed to CellContainer) and thus are highly available and will usually work.
So what this analysis of the Rdoc's for the two projects is telling me is that if you can actually get your hands on a tablecell object in Watir-webdriver, you should be able to call the .exists? method, however you might find the number of places you can use .cell to get a tablecell highly restricted since few objects support this method. If you are seeing an error about a method not existing, it may well be the .cell method, NOT the .exists? method (where Watir-Webdriver is concerned)

Related

Click on Material Sortable Header with Selenium

I am trying to perform some automated tests using selenium on an Angular app. One test involves clicking a mat-sort-header. I have not been able to find a way to click the header using selenium.
The table will sort correctly when I click it, but I am unable to sort the table using Selenium.
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="Header">
<th mat-header-cell *matHeaderCellDef mat-sort-header="Header">Header</th>
<td mat-cell *matCellDef="let row">{{row.title}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"</tr>
</table>
My initial approach, which didn't work.
sort_header = driver.find_element_by_xpath("//th[contains(#aria-label, 'Change Sorting for Header')]")
sort_header.click()
My second approach, which also didn't work.
js = "document.querySelector('[aria-label="Change Sorting for Header"]').click();"
driver.execute_script(js)
The first approach gives a 'Message: element not interactable' error. I am able to console log the correct button in the second approach (which prints a button element to the console) by modifying the JS code. However, the element does not sort when the JavaScript is executed.

Create Excel file from existing rendered view in Symfony

I have a controller that renders up a template file (twig) with some forms and a table response.
I need to export to an Excel file that table response.
Is there a way to do that using Symfony, jQuery or Javascript?
I want to avoid using https://github.com/liuggio/ExcelBundle for which I need to recreate the objects.
I already have them created as they are used in twigs.
You can create an HTML table using Twig (using Twig is not necessary) and then save the output as an Excel file (.xls). You can use simple CSS in a <style> tag and in inline styles. For example:
<style>
.last {
color: red;
text-align: center;
}
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th style="font-style: italic">Country</th>
</tr>
</thead>
<tbody>
{% for row in data %}
<tr>
<td>row.name</td>
<td>row.age</td>
<td>row.country</td>
</tr>
{% endfor %}
<tr class="last">
<td colspan="3">This last row is red</td>
</tr>
</tbody>
</table>
When you open the file in Excel, you probably get a message saying:
The file you are trying to open file.xls is in a different format than specified by the file extension. Verify that the file is not corrupted and is from a trusted source before opening the file. Do you want to open the file now?
There might be a workaround for this but I'm not sure.
This approach is simple and doesn't use any dependencies so it might be good enough for you if you don't need a very complex Excel file.
There are many resources with more information about this. See for example: How can I export tables to excel from a webpage.

Material Design Lite Lists - how to access selected elements?

I'm using Aurelia framework with Material Design Lite via plugin "aurelia-mdl-plugin".
I have the following markup:
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Name</th>
<th>Col2</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr repeat.for="s of items">
<td class="mdl-data-table__cell--non-numeric">${s.name}</td>
<td>${s.someothercol}</td>
<td>View</td>
</tr>
</tbody>
</table>
This markup represents a list of items that are selectable - each of them gets a checkbox with ability to select + the list gets "select all" check box in the header.
The problem is that since this additional markup with checkboxes is generated by MDL I can't really bind to it.
If I had a checkbox manually inserted I would do something like:
<input type="checkbox" checked.bind="s.IsChecked" />
Is there any way to fix this?
PS> I don't think it's necessarily Aurelia specific. Most likely I would have the same problem in Angular or other library..
The mdl team officially deprecated automatic checkbox insertion. So now you should write them down manually, which would solve your binding issue.
See this link: https://github.com/google/material-design-lite/wiki/Deprecations#automatic-selection-checkboxes

How to format a table stored inside a RichText control (ck-editor) using css?

Take an xpage containing a RichText control (this is Domino 8.5.3, so we're using ck-editor).
Quite often tables are used by the users to structure their RT content. One request is to make sure that those tables have a unique formatting esp. regarding cellspacing and cellpadding.
Through Firebug I see that those inserted tables are setting their borders and cell* parameters using html attributes. And of course, since the html inside the editor has been created using "manual" html the xsp engine can't have much influence here.
Before we start writing some client side js to try and remove or manipulate those attributes: maybe there is someone having a neat idea of how we could accomplish this?
Since the output from the RichText control is, AFAIK, always rendered within a <div> with a class called "domino-richtext" one could use CSS to get that identical appearance you're looking for (at least I think with "unique" you mean identical or uniform).
I pasted an HTML structure below, where the user added some cellspacing and cellpadding:
<div class="domino-richtext xspInputFieldRichText" id="view:_id1:inputRichText1">
<table cellspacing="1" cellpadding="2" border="1" dir="ltr">
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
...
</tbody>
</table>
<p dir="ltr">Some more content besides the table...</p>
</div>
When the following styles are applied / defined within a theme or stylesheet, all tables, created within the RT control will look the same.
.domino-richtext table {
border-collapse:collapse; /*remove spacing or padding when defined*/
}
.domino-richtext table tbody tr td,
.domino-richtext table thead tr th {
padding: 0; /*define / remove padding*/
border:1px solid #eee; /*border definition for all tables*/
}

How can the width of a SharePoint:FormField be adjusted?

Within MOSS2007, I'm building a custom form (newform2.aspx) for a list, and having a real problem trying to adjust the width of my form fields.
Here is some of the code I'm trying to adjust:
<tr>
<td colspan="3" style="padding-top:5px; padding-bottom:5px; width:100%; ">DescriptionText<br/>
<SharePoint:FormField runat="server" id="ff16{$Pos}" ControlMode="New" FieldName="Jobsite" __designer:bind="{ddwrt:DataBind('i',concat('ff16',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#Jobsite')}"/>
</td>
</tr>
I've tried setting DisplaySize within the Form:Field control, and it changes within SharePoint Designer, but when I view the actual page, the box always remains at it's default length.
Nothing like solving your own question. ;)
I found that wrapping the FormField control in <div>'s in combination with the DisplaySize attribute gave me the control I needed to format the fields properly.
I tried to insert text input into table and had same trouble.
Add
.ms-long{width:95%;}
as style into PlaceHolderAdditionalPageHead placeholder:
https://gist.githubusercontent.com/Gennady-G/91f045816068d9a38f1133135dc94bae/raw/271eb9012497b57f667b26858e0e7796625803e9/gistfile1.txt
Add this in your custom page. It works for me under SharePoint 2010.
<style type="text/css">.ms-long{width:100%;}</style>"

Resources