I've created a pure HTML Table, what I would like to do is allow the User to query the table via JavaScript. The structure is as follows:
A simple table (depicted here: https://codepen.io/chriscoyier/pen/tIuBL)
Provide a textarea or use a Library like Monaco editor to allow the user to write up JS QuerySelector queries.
Return the modified results to the User.
I am aware of security concerns, but this is a local static generated list of HTML files.
What I am unclear is;
Are there libraries that can do this already? I've found some "live-editors" that allow JavaScript to be executed, but I haven't been successful in replicating the results to modify the Table contents only. What ends up happening is that the whole page seems to get malformed when a user executes JS.
Is there another way to let users write-up JavaScript QuerySelector script to "play" with the exported tables?
Table structure:
<table class="order-table table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe#gmail.com</td>
<td>0123456789</td>
<td>99</td>
</tr>
<tr>
<td>Jane Vanda</td>
<td>jane#vanda.org</td>
<td>9876543210</td>
<td>349</td>
</tr>
<tr>
<td>Alferd Penyworth</td>
<td>alfred#batman.com</td>
<td>6754328901</td>
<td>199</td>
</tr>
</tbody>
</table>
You can just offer a normal textarea for users to type in the queries.
Use .value to get the typed in text as a String.
The use the string as an argument for document.querySelectorAll.
[edited to incorporate nilsf comment]
Related
I'm trying to create a selenium script to log into a site with a username and password complete a task, log out then start over but with a multiple different username/passwords. Is it possible to get the script to use values from a text file or something?
<title>New Test</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">New Test</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>/common/oauth2/authorize?client_id/td>
<td></td>
</tr>
<tr>
<td>assertTitle</td>
<td>Sign in to your account</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>id=cred_userid_inputtext</td>
<td>example#example.com</td>
</tr>
<tr>
<td>click</td>
<td>id=cred_password_inputtext</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>id=cred_password_inputtext</td>
<td>password1</td>
</tr>
<tr>
<td>clickAndWait</td>
<td>id=cred_sign_in_button</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>css=span.ms-Icon--outlook</td>
<td></td>
</tr>
<tr>
<td>select</td>
<td>id=selTz</td>
<td>label=(UTC-08:00) Pacific Time (US & Canada)</td>
</tr>
<tr>
<td>clickAndWait</td>
<td>css=span.signinTxt</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>xpath=(//button[#type='button'])[12]</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>xpath=(//button[#type='button'])[51]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//table[#id='use_another_account']/tbody/tr/td/table/tbody/tr[2]/td[2]/div</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
Sure it is possible to read from an external source and run your automation test.
If you have a lot of credentials, I would recommend that you directly talk to the test database to retreive that data and then use it for your automation test. I don't know javascript or python but I'm sure that if you Google, you can find a solution on how to do this.
If this is too complex, then you might just prefer to read from a file like a .csv. Python or javascript will probably have some frameworks that you can use to read .csv files. Worst case scenario is you will have to write your own logic to read the file, which I'm sure already exists on the web.
Whatever method you choose, just use your code to read that entity, store the values in variables, and then apply those variables in your tests. Here is a sample of my test using C#. It runs through many 'accessionNumbers' that it reads from an external source.
[Test, TestCaseSource("GetDataList")]
[Property("PBI#", "35656")]
public void GivenPopupItemIsOpen_WhenTogglingPopup_ThenPopupOpensAndCloses(string accessionNumber)
{
var studentAssesmentPage = OpenAdminResetPageAndGoToBookletLocation(accessionNumber);
studentAssesmentPage.ShortTextPopup.OpenPopUp();
studentAssesmentPage.ShortTextPopup.ClosePopUp();
Assert.IsFalse(studentAssesmentPage.ShortTextPopup.IsPopUpOpen(), "The pop up did not close after trying to close the pop up");
}
I'm trying to get better at JavaScript/jQuery, so I guess some basic table manipulation would nice to try out. However I can't seem to find a way to get started doing what I want to achieve.
Lets say e.g. I have two tables, and I want to compare data and generate a third table based on the data in the two first ones. Lets say it's about movies, and I have this list of users, and list of movies with a column of whom likes the movie. In the third on the fly generated table I want to collect these data and write out the movie with whom likes it.
users
<table id="table_1">
<tr>
<th>user ID</th>
<th>name</th>
<th>country</th>
</tr>
<tr><td>1</td>
<td>martin</td>a
<td>usa</td>
</tr>
<tr><td>2</td>
<td>james</td>
<td>france</td>
</tr>
</table>
movies
<table id="table_2">
<tr>
<th>movie id</th>
<th>name</th>
<th>users favorite (id)</th>
</tr>
<tr><td>2</td>
<td>the expendables</td>
<td>1</td>
</tr>
<tr><td>2</td>
<td>titanic</td>
<td>2, 1</td>
</tr>
</table>
results
<div id="table">
</div>
I have this fiddle: https://jsfiddle.net/fpeh6fna/
You could use jQuery each commands here, for example (just a section of the code you would want):
$('#table_1').children('tr').each(function() {
var row = [];
$(this).children('td').each(function() {
row.push($(this).text());
});
rows.push(row);
});
I want to create a JavaScript date using text I stored from my site.
This is what I tried:
<tr>
<td>storeValue</td>
<td>name=contract_additional_fields[agreement_created_date]</td>
<td>seleniumContractDateValue</td>
</tr>
<tr>
<td>echo</td>
<td>javascript{Date.parse('${seleniumContractDateValue}')}</td>
<td></td>
</tr>
I also tried using nothing or "" in the parse but neither one worked.
Can anyone help me figure out how I use a stored variable as a parameter of a JavaScript command?
1.you access variables with "storedVars['seleniumContractDateValue']" in JavaScript.
2.Selenium won't store a JavaScript date object, so you will need to parse it into a string as well.
<tr>
<td>storeValue</td>
<td>name=contract_additional_fields[agreement_created_date]</td>
<td>seleniumContractDateValue</td>
</tr>
<tr>
<td>store</td>
<td>javascript{Date.parse(storedVars['seleniumContractDateValue'])}</td>
<td>seleniumContractDateValue</td>
</tr>
<tr>
<td>echo</td>
<td>${seleniumContractDateValue}</td>
<td></td>
</tr>
I want to add a column to a jQuery Datatable. It will be used to contain a delete button for each row, like I have for another table. The button picture and class are specific in the php file that retrieves the table data from a database.
Simply adding a column to the html as the following breaks the javascript on the page:
<th>New Column</th>
I do not see anything in the aoColumnDefs settings that does anything to the added column. What code and where do I need to add or edit to accommodate the new column?
I am not the original developer behind the existing tables.
You can add one or more th from here like Revenue2
<table class="mws-table">
<thead>
<tr>
<th>Date</th>
<th>Transaction ID</th>
<th>Segment</th>
<th>Revenue</th>
</tr>
</thead>
<tbody id="transactions">
<tr>
<td class="trDate"></td>
<td class="transactionId"></td>
<td class="segment"></td>
<td class="revenue"></td>
</tr>
</tbody>
<tfoot>
<tr class="customFooterRow">
<th>Total</th>
<th></th>
<th></th>
<th align ="left" class="revenueTotal"></th>
</tr>
</tfoot>
</table>
You might have forgotten to add the column for the body as well and in cases where you have a "tfoot" you will need to add another column to it as well.
I'm trying set item in select using javascript (in variable I have date)
Here is how I'm trying set this item
<tr>
<td>select</td>
<td>Recent-Year</td>
<td>value=javascript{d=new Date();d.getYear()}</td>
</tr>
I get:
[error] Option with value 'javascript{d=new Date();d.getYear()}' not found
of cource when I'm trying by this:
<tr>
<td>select</td>
<td>Recent-Year</td>
<td>value=2011</td>
</tr>
it works.
What I must to change in this code to set this item?
EDIT
I don't want to split this command into few commands, because in another testcase I have stored variable birthday
<tr>
<td>storeEval</td>
<td>new Date('1966,09,16')</td>
<td>dateOfBirth</td>
</tr>
and I have 3 selects : Birth-Day, Birth-Month and Birth-Yearand I don't want to create 3 variables.
I want to set items in select like this:
<tr>
<td>select</td>
<td>Birth-Year</td>
<td>value =${dateOfBirth.getFullYear()}</td>
</tr>
Store the JavaScript evaluation first (using storeEval) and then use this variable as your option value:
<tr>
<td>storeEval</td>
<td>new Date().getYear()</td>
<td>varYear</td>
</tr>
<tr>
<td>select</td>
<td>Recent-Year</td>
<td>value=${varYear}</td>
</tr>
That should work
Update: In response to your edit: you can't use the value= with JavaScript but you can use the storedVars variable available in the JavaScript environment to create all the variables you need. For example, storedVars['myVar'] can be accessed directly through Selenium as ${myVar}. Below, I use verifyEval to run some JavaScript that will create all the variables I need.
<tr>
<td>storeEval</td>
<td>new Date()</td>
<td>myDate</td>
</tr>
<tr>
<td>verifyEval</td>
<td>var date=storedVars['myDate']; storedVars['day']=date.getDate(); storedVars['month']=date.getMonth(); storedVars['year']=date.getFullYear();</td>
<td></td>
</tr>
Then you can select the options based on:
<tr>
<td>select</td>
<td>Birth-Day</td>
<td>value=${day}</td>
</tr>
<tr>
<td>select</td>
<td>Birth-Month</td>
<td>value=${month}</td>
</tr>
<tr>
<td>select</td>
<td>Birth-Year</td>
<td>value=${year}</td>
</tr>
I know it's not the ideal solution, but it does help a bit since you can't do value=javascript{...} (not that I know of anyway but if anyone else knows otherwise then please say).