I am working on an AngularJS app that has a Slickgrid on it. I am trying to write a test and im running into a problem. When I use Selenium I can get it to click in one of the cells but the sendkeys function doesn't seem to do anything, no text is entered even though I can see the cursor flashing in the cell.
Even if I record my actions in Selenium IDE, no actions are recorded for entering text in the cell.
I've tried opening the JavaScript console in chrome and writing some JavaScript to enter some text in one of the cells and made zero progress (I don't know JavaScript).
What JavaScript can I use in the chrome console to enter text in one of the cells? Does selenium not work well with SlickGrid?
I'm not sure what the best approach is here.
Thanks
It seems that you are asking about two things at once. I will try to emphasize that I have no experience in Selenium, but I can try answering the JavaScript part.
You didn't share too much information about your actual SlickGrid setup, so my solutions for your question are based on the official SlickGrid: Making it editable example, which you could try these methods on, for instance using the JavaScript ScratchPad.
I will share the two methods I have found, since I don't know which one could you integrate to your Selenium setup.
Method 1 - via the SlickGrid API:
var row = 0;
var cell = 0;
var test_input = 'Your input';
if(grid.canCellBeActive(row, cell)) {
grid.setActiveCell(row, cell);
grid.editActiveCell();
var activeCell = $(grid.getActiveCellNode());
if(typeof activeCell !== 'undefined') {
activeCell.children(0).val(test_input);
grid.gotoCell(row, cell);
}
}
Method 2 - via setting the data source of your grid.
In this case it's a JavaScript array of objects:
var row = 0;
var test_input = 'Your input';
data[row].title = test_input;
grid.invalidateRow(row);
grid.render();
These two methods both change the given cell data, the main difference is that using the second method you need to rely on the field name property you want to set.
Related
I have a weird problem that I can't seem to solve: I have built a live search with jQuery for a WordPress site. The search uses ".val" to get the input of the search field and pass it on but it always turns up empty even if it isn't.
The thing is, it works everywhere else on the site (always gets the value with
var searchField = $('.gd-search-field-search .search_text'),
var query = searchField.val();
)
but on the landing page and an archive it doesn't. It's always identical - the search is integrated via widget and I've checked many times: all IDs, classes etc. are the same. Does anybody have an idea what could cause the conflict?
it doesn't need to all classes for getting a value you can simply use
var searchField = $('.search_text');
var query = searchField.val();
Very new to Javascript and have been searching the webs for assistance, but haven't quite found a solution.
I am attempting to use javascript to split/remove the output of a particular field. The data in the survey is being pulled from our school's database after a user logs in to the survey via shibboleth. All the information is being displayed, so that part works, but one particular field is appending an email address (#email.com) to a field.
I want to omit this part from being displayed. Either my javascript is incorrect or the javascript is not being loaded/read. The javascript code was borrowed from a colleague and it works on his surveys, but he has a lot of other things going on in his survey and this works for him.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
var iid = "${e://Field/theUTIID}";
var split_array = iid.split("#",1);
var eid = split_array[0];
Qualtrics.SurveyEngine.setEmbeddedData('theUTIID', eid);
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var iid = "${e://Field/theUTIID}";
var split_array = iid.split("#",1);
var eid = split_array[0];
Qualtrics.SurveyEngine.setEmbeddedData('theUTIID', eid);
});
I have this in both the Onload and OnReady for testing. Doesn't matter if I have this is one location or the other, I am not getting the desired results.
I only have one question on the survey (it's just a test survey) and so the javascript code is with the first and only question.
Survey Question has the following in a text entry. Again, output is displayed, but need the #email.com to removed from the EID field.
The code looks correct (other than it only needs to be in one or the other function). I'm guessing it isn't a problem with the code, but where you are trying to pipe the embedded variable. The JavaScript above has to be attached to a question on a separate page before the place where you want to pipe it.
Add a page break, then pipe theUTIID into a question on the next page.
I stored an table's html as a text, using this code.
var Data = document.getElementsByClassName("result")[0].innerHTML;
I am able to observe the selected part using console.log, however, I wish to extract this data to be copied and used outside.
So I tried alert(Data), but it does not offer a good surface to copy the data (it does work though, however I cannot use right click on the pop-up window)
I also tried to programmatically copy the data to the clipboard, but it seems, it only works on selected text data.
Is there a better way to extract such data to be used outside ?
Note: I am using a firefox bookmark to execute javascript. But I expect the code to work also in the other browsers.
Edit: I tried the method suggested in the comments, however in firefox, I got an error.
document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.
So rather than copying with that command, printing to a surface seems a better choice, if possible. The linked question does not solve my issue.
Edit2: window.prompt did a much better job, however it rocked my world by pressing the text to a single line. I still should be able to parse it programmatically, but if there is a better answer, I wish to learn it.
Below is my solution to keep multiple lines.
It creates one temp 'textarea', then remove it after select()->copy.
function triggercopy() {
var target_obj = document.getElementById('test1');
var copy_text = target_obj.innerHTML; //replace with your actual data.
var hidden_obj = document.createElement("textarea");
hidden_obj.value = copy_text;
document.body.insertBefore(hidden_obj,target_obj);
console.log('prepare:' + copy_text);
hidden_obj.select();
document.execCommand("copy");
document.body.removeChild(hidden_obj);
console.log('already copied:' + copy_text);
}
Text3as
dfsadf
<a id="test1" onclick="triggercopy();">Text3as
dfsadf</a>
I found two methods best suit my interests.
First, window.prompt:
var Data = document.getElementsByClassName("result")[0].innerHTML;
function copyToClipboard(text) {
window.prompt("Copy data.", text);
}
copyToClipboard(Data)
This is a good method, taken from a suggested answer. This puts the data into a single-line text field. And in an interesting manner, when written without a function, executes document.write(Data) when clicked OK, this does not happen when written in a function as above.
Second, document.write:
var target = document.getElementsByClassName("resultTable striped")[0].outerHTML;
document.open('text/plain');
document.write(target);
I first tried to open a new tab with the desired content, however encountered with the issue of pop-up blockers and non-plain text html data (formatted html instead of the desired table html data). This solves both issues.
I've been doing some work on Sharepoint Online/365 and have got stuck trying to set the value of a lookup or choice column in NewForm.aspx
Narrowed my problem down to not being able to set lookup/Choice Columns
I have simplified a code on my page down to
//Phase being a Choice Column & Closure a case sensitive valid option
$("select[title='Phase']").val("Closure");
//ProjectName being a Lookup Column & Test2 a case sensitive valid entry in the list
$("select[title='ProjectName']").val("Test2");
I have no problem setting text fields as the following code works fine on a text field I created
$("input[title='TextField']").val("Test2");
I have used the following Jquery libraries 1.7.2/min.js and 1.11.3
Not sure whether you used _spBodyOnLoadFunctionNames.push() method for your logics. Usually you have to wait all SharePoint DOM objects are loaded and then to execute your jQuery code. If you used SharePoint JavaScript library, you probably needs to call ExecuteOrDelayUntilScriptLoaded() to make sure your call is called after curtain SharePoint .js files are loaded.
First Thanks "Verona Chen" and " DIEGO CARRASCAL" because of who i've learnt a few other tricks in SharePoint which will help with other projects.
My original script before the question was trying to use a query string to populate a field in newform.aspx (which i have done on sharepoint 2013 with code i have found here on)
Unforuntaly with sharepoint online/365 This code was no longer working.
This code has fixed my issue (though it does change how a few previous pages are constructed)
Appologies if this doesn't directly answer the above question (as this was me trying to breakdown the overall issue i was having into something simpler and easier to address based on me narrowing down the issue in my original code) however as I am now up and running, it seems only polite to post the outcome.
Prior to code, i have a projects list with a "ProjectName" field. I was sending the field name into a URL and querystring to get mylist/newform.aspx?ProjectName=Test2
I was then trying to pull that Test2 into the lookup field (liked to the project list) "ProjectName" in the list "MyList"
But even when loading the function for my old script with _spBodyOnLoadFunctionNames.push() it wasn't working.
After playing with this for a while and after some looking around i found this peice of code
<script type="text/javascript">
(function () {
var ctx = {};
ctx.Templates = {};
ctx.Templates.Fields = {
'ProjectName': {
'NewForm': renderTaskCategory
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
})();
function renderTaskCategory(ctx) {
//extract cat parameter from a query string
var GetProjID = GetUrlKeyValue('ProjID');
//set lookup field value
ctx.CurrentFieldValue = GetProjID;
//default template for rendering Lookup field control
return SPFieldLookup_Edit(ctx);
}
</script>
This means that i have to change my previous url builds to create mylist/newform.aspx?ProjID=2
This script then finds item ID 2 (which happens to be test2 in this case) and puts the title of item 2 in my lookup field ProjectName
Thanks again to those that helped earlier.
And apologies again if this doesn't directly answer the question i originally asked.
So, I'm running casperjs through Windows' command line and I'm trying to search for a name in a table and get the row to which it belongs.
For example: If I'm searching for the name "Pete" and it's on the 4th line, it should return 4.
As the name is the fist element of each row in the table I was thinking about getting the page's source code and parsing everything beetween and so I could get the name and compare it to what I have, if it's not equal I would just do a i++ and go on to the next row (i being the row's number).
I couldn't find any way to get the source code, if I could I would certainly be able to parse it.
Using pseudo-code it should be something like this:
function searchForName(desiredName) {
var i = 1;
while(desiredName != nameIFoundOnTheColumn(i)) {
i++;
}
return i;
}
So, how can I get the source using JavaScript on a headless browser like PhantomJS?
I just used a simple function called this.getHTML() on Casper which I haven't seen before on Casper's documentation. Then I parsed the desired tags using another function to get what's between two tags.