How to handle two tables with same repeater using protractor - javascript

I have two tables with same repeater : 'campaignSegmentLink in campaign.campaignSegmentLinks'.
When i use:
element.all(by.repeater('campaignSegmentLink in campaign.campaignSegmentLinks'))
Protractor always gives back contents of first table.
How can i target the second table? I want the contents of second table not the first.

element.all(by.repeater('campaignSegmentLink in campaign.campaignSegmentLinks'))
would return you all the "repeaters" - from the first and from the second table.
If you want to find rows from a second repeater occurrence, you need to find something unique about it - most likely (you haven't shown the HTML code) it is located in a different container which you can rely on, e.g.:
var container = element(by.css("div#myContainer"));
var rows = container.all(by.repeater('campaignSegmentLink in campaign.campaignSegmentLinks'))
Or, you can use filter() to filter out the rows from the second table.
See also:
Multiples ng-repeat in the same page

Related

Checking to see if an HTML table row element is empty

I am working on developing an html table using JavaScript and I am always creating three rows. However, there is a condition in which it creates two full rows and the last row is an empty row. How can I check to see if the last row is empty before adding it to my table? I do NOT want to add the row if it is empty.
const element = document.getElementById("two_weeks");
element.appendChild(tble_row);
element.appendChild(tble_row2);
element.appendChild(tble_row3);
Element is my HTML table and tble_row3 is an HTMLTableRowElement.
Shoutout to #Teemu. He came up with the correct answer. This is what I did for it to work:
if (tble_row3.cells.length) {
element.appendChild(tble_row3);
}
This correctly displays rows that have content and does not display rows that are empty.

How to select column names in webdriverio?

I am new to webdriverio. I need to select column names for a table which is defined as div tags in UI grid instead of tr, td. I am able to select the number of available column names as 6 with below xPath but when I execute the same xPath I am getting available elements as 1.
fundSearchTable(){
return $$("//ag-grid-angular//*[#class='ag-header-container']//*[#class='ag-header-cell ag-focus-managed ag-header-cell-sortable']//*[#class='ag-header-cell-text']")
}
const fundColumnList= await this.fundSearchTable;
console.log("number of childs:"+ await fundColumnList.length) //logs 1
Inspect in DOM1
Can someone help me with this as I need to interact with tables more often?
As you posted images it is difficult to write the xPath. Please use below xPath's to select the column names.
//span[text()='Fund Number'] or //div[#col-id='fundNumber']
//span[text()='Fund Name'] or //div[#col-id='fundName']
//span[text()='Fund Acronym'] or //div[#col-id='fundAcronym']
I am able to solve this. Issue was that the page is not loading by the time the command is executed to get the column names. I gave the wait time. And for the "for loop", I gave the length as row.length-1.
But still my result was inconsistent.

Can I have expanded one node only on load in Tabulator.js?

I am using nested data trees in Tabulator.js and if I use the option dataTreeStartExpanded:true all nested rows will be expanded. I want only one be expanded on load/render? Is that possible?
Here is working jsFiddle to play around.
I found that there is a div with class tabulator-data-tree-control-expand or tabulator-data-tree-control-collapse. Changing the name in dev tools does nothing.
Currently it looks like
But I want to be like that after the web page loads
Maybe I can somehow click the + to expand. Tabulator has a listener there
But I do not know how to call it for that particular +.
oh, I found it in documentation.
.. a function that will be passed in a row component and the level of that row in the table (starting at 0), it should return a boolean value to indicate the rows expansion state:
var table = new Tabulator("#example-table", {
dataTree:true,
dataTreeStartExpanded:function(row, level){
return row.getData().driver; //expand rows where the "driver" data field is true;
},
});
and then in data you have to use new property driver:true

Get HTML element by JavaScript

How can I reach the first row and the first column (using javaScript) from a table in specific URL?
for example in the following URL:
https://www.w3schools.com/jsref/dom_obj_table.asp
In 'Table Object Methods', I want to get "createCaption()" .
Thanks!
you can try this...
you get value into rows of table HTML.
var row = document.getElementById("myTable").rows[0].innerHTML;
Using css you can do
var elem = element.all(by.css('table tr:nth-child(2) td:nth-child(1)').last();
This selects the first column from the second row that is in a table.
Using element.all because there are 3 tables it could apply to, which is why you need the .last() because the table you wanted referenced was the last table. Would work better if the table has an unique ID to reference it with.

Getting the Control inside a table

I'm trying to get the control which is inside of a cell table; in my table I have different controls, labels, checkboxes, etc.
I basically need to get the control which is used in that table
var x = document.getElementById('myTable').rows[0].cells;
alert(x[0].innerText);
//alert(x[3].innerHTML);
if (x.Control == checkbox) {
x.checked = true;
}
This will be in a loop but for now I just need to be able to check the checkbox by grabbing the control and setting that control to true
Any hints/help would be great
I doesn't really understand what you exactly need is it
document.getElementById("checkbox").checked = true;
here checkbox is the id of a particular checkbox
I would put a unique id on the form element instead and use that to grab it. In this way you can change the structure in the future. Example: perhaps you no longer want to use a table grid, but a grid of divs.
When you use innerHTML you will might also grab textnodes and other things you put in the cell.
An alternative - if you really want to find a specific cell in a table - is to give each cell a unique id on the form "cell-4-5" where 4 is the row and 5 is the column.
[EDIT]
If you want to have the cell contents returned as a DOM-object then childNodes can be used:
var x = document.getElementById('myTable').childNodes[0].childNodes[0].childNodes
If you want to have the cell contents returned as a string then innerHTML can be used:
var x = document.getElementById('myTable').childNodes[0].childNodes[0].innerHTML
To check if the checkbox is checked you need to keep it as a DOM element and thus use the first version.

Categories

Resources