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.
Related
I am kinda drawing a blank on this one facet, and I can't seem to quite figure it out.
So I have a simple HTML select => option element which is populated from the back-end (not really relevant tho)
My question is this:
Let's say I have a pre-made object such as this:
{
keyName1: 450,
keyName2: 800,
keyName3: 300
}
What I want to do is to check if the key name matches a name of an option value in my multi-select dropdown (the values come from an array, using 'ng-repeat' on the option), and if the option value matches the key, add the number value to some sort of increment variable, so I can display the total number of 'keyNames' found.
For example - if a user selects 'keyName1' the incrementer value will total 450. If a user selects 'keyName1' and 'keyName2' the incrementer value will total 1,250.
I am lost on how to accomplish this - right now it is reading only the very first item in the dropdown.
Here is the code doing that:
_.forEach($scope.widget.instance.settings.serviceContractTypes, function (type) {
// if item in array matches what is selected in multi-select option
if(type === $('#contractType:selected').text().trim()) {
// do stuff
}
});
Hope this all made sense, and thanks very much for any direction you might offer...
(does not have to utilize lodash, I'm just used to using it)
jQuery's :selected selector only works for HTML options:
"The :selected selector works for elements. It does not work for checkboxes or radio inputs; use :checked for them."
(https://api.jquery.com/selected-selector/)
You say "I have a simple HTML select => option element which is populated from the back-end (not really relevant tho)"
This could be relevant. By default, an HTML option tag does not support multiple selections; it has to explicitly be created as a select multiple in order to support that. Can you share the HTML code for the option to make it clear whether that's a problem or this is a red herring?
Also, can you echo $scope.widget.instance.settings.serviceContractTypes and share to make sure it's actually matching what's available in the text of the options?
ADDENDUM - Wait, I think I figured it out!
The $('#contractType:selected') selects all the selected options in #contractType and concatenates them. Then $('#contractType:selected').text().trim() trims this down to the first word, which is just the first selected option. You should do something like $('#contractType:selected').text().split(" ") and then check if each type is in the resulting list.
So I am trying to find a way to extract data from the first row where the checkbox from the first column is unchecked. I know this may sound like a true beginner question but I couldn't manage to find how to do it despite searching for quite a few hours.
Here a step-by-step of my goal to clarify :
Find the first checkbox which is unchecked;
Retrieve information from another column (inner html) but from the corresponding row and an attribute ("name") of the checkbox;
Without opening it on-screen, use the attribute of the checkbox (partial URL) to open completed URL and retrieve more information into MySQL;
Check the checkbox;
Rince and repeat
I am only looking for info concerning step one and two, the rest is there for clarification. I do not have prior experience in Javascript writing prior my last few days of Internet browsing, the only coding I've done were statistical analysis in R.
Any help would be highly appreciated.
Thank you very much!
Nikola
Well, you can use the same class for every checkbox (i.e. rowcheck):
<input type="checkbox" class="rowcheck" id="CbRow_1" name="test" value="test">
And then you loop through the checkboxes:
$(".rowcheck").each(function (index, element) {
if ($(element).prop("checked")) {
//Get the row number from ID
var rownumber = $(element).prop("id").split("_")[1];
//Now you do stuff with the other element
$("#element_" + rownumber).html("whatever")
}
});
Here's an example image before I start explaining:
Let's say I have these entries from a Form (A2 to D6). Let's also say I want to find the average of ONLY the values that were submitted with "Tier 1" and "Type 2" in the same row. How would I approach writing a script that could do that?
I can elaborate more if needed. Any help is appreciated :)
Here is some algorithm plus code in jquery
1) Get all the rows in your table. You will have an array of all the table rows.
var rows = $('#tblID > tbody > tr')
2) Now loop through your array of rows with a for loop. Lots of example are available on the web. Here is one way
for (i=0;i<rows.length;i++){
var row =rows[i];
}
3) For each row inspect the column you are interested in. If they match then get the column with the number and add it to your sum and increment how many you will be averaging on. Here is snippit of how you get a column in plain js
var column = row.cells[3];
Keep in mind that the column is node, not the text in that node yet, so you will need a jquery call to get the text likes so
var stuff = $(column).text();
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
I am facing problem in using the domquery, to get focus on the control previous to grid when the grid cell is in edit mode, What i am trying is
1.check the grid tabindex add 1 to it, gridTabIndex = grid.dom.tabindex - 1
2.do grid.up() to look out for main form ,
3.then search using domquery form.query('input[tabindex = gridTabIndex]') for the field with the tabindex = grid.tabindex - 1
using grid.up().query() gives the below output as shown in image
So the point 3 is where i am facing problem. it gives an empty array // output is []
Any kind of help is appreciated.
form.query doesn't query Dom Elements. It queries ExtJs Components. However form.getEl().query do query for Dom Elements. Give it a try. (Notice, Ext.dom.Element.query is available only since 4.1.0)