innerHTML is adding tbody, why? - innerhtml

I'm creating a table with Javascript so in a loop there's
if (formFieldData == 'cleanSlate')
{
document.getElementById('productsTable').innerHTML = '';
// clears what was there before, so we're left with an empty <table>
} else
{
document.getElementById('productsTable').innerHTML += '<tr></tr>';
}
After a couple of iterations what I'm left with is this .. not sure how to display HTML for you so without the angle brackets:
tbody tr /tr /tbody tbody tr /tr /tbody
Why is it inserting those tbodys and how can I stop it doing that?

What browser is this?
You shouldn't really be building up a table with innerHTML operations anyways. It's just a string operation, and the browser will have NO CLUE that you're adding multiple rows in sequence. So it's going to attempt to "clean up" your "broken" html.
If nothing else, at least build up the table rows in a separate string and then stuff that varaible into innerHTML after the loop completes:
var rows;
for(...) {
if (...) {
rows += '<tr></tr>\n';
}
}
document.getElementById('productsTable').innerHTML = rows;
Of course, this exact code won't work - it's just an example.

Related

Selenium - How to Wait?

I need to be able to wait for one of multiple things that could happen to a page after a certain action is taken. Examples of these things are: URL changes, a certain title is set, certain content on the page appears, etc.
This explains how to wait - https://github.com/facebook/php-webdriver/wiki/HowTo-Wait. However, I need to be able to wait for multiple things at the same time. I want the waiting to stop once one of the conditions occur.
Is there a way to "or" during a wait (e.g. wait for URL to change OR title contains "foo" OR "bar" appears on the page, etc.)?
In the same link you posted, look for the "Custom conditions" section, i.e.:
$driver->wait()->until(
function () use ($driver) {
$elements = $driver->findElements(WebDriverBy::cssSelector('li.foo'));
return count($elements) > 5;
},
'Error locating more than five elements'
);
Note the use of findElements in the code example. When nothing is found, an empty array will be returned. If only one of three elements must be visible, you do something like:
$driver->wait()->until(
function () use ($driver) {
$elements1 = $driver->findElements(WebDriverBy::cssSelector('li.foo1'));
$elements2 = $driver->findElements(WebDriverBy::cssSelector('li.foo2'));
$elements3 = $driver->findElements(WebDriverBy::cssSelector('li.foo3'));
return count($elements1) + count($elements2) + count($elements3) > 0;
},
'Error locating at least one of the elements'
);

Get input type in Geb

I am using Geb to write a script that will test a survey many times with random input to make sure nothing breaks. I would like to iterate through every input on a form and do different things depending on the input type.
For example:
while ($("form").find("input", j)) {
if($("form").find("input", j) == "checkbox"){
//check it sometimes
}
else if($("form").find("input", j) == "select"){
//select a random option
}
j++
}
I'm not exactly sure how the survey is going to work yet, so I would rather go down the page as a human would instead of doing all checkboxes first and then all selects etc. It is possible to check the type of input like my example?
Additionally, I notice I am repeating the $("form").find("input", j). Can I make that into a variable like in jQuery?
Simply collect all your inputs and selects in a navigator and iterate over all of them. Use is(String tagName) to detect select elements and #type attribute accessor to detect other element types:
def form = $("form")
def formElements = form.find("input") + form.find("select")
formElements.each { Navigator element ->
if (element.is("select") {
//select a random option
}
if (element.#type == "checkbox") {
//check it sometimes
}
}

MVC razor behaving unexpectedly, displaying incorrect textbox values

I have a little snippet of code here:
View:
#foreach (var lines in Model.KVpairs)
{
#Html.TextBoxFor( m => lines, new { placeholder = lines })
}
In my application, I load the view containing this code twice, the first time, it works as intended, the second time, the values for all of the textboxes are the same value, but the placeholders are all different. Or in other words, the placeholders are working as intended, but the value(the actual text inside the box) is not.
Am I missing something very obvious?
EDIT:
wanted to add some pics:
before I sumbit the form, ive entered these values
Here you can see the values of the KVpairs
And this is the result I get after form submission
And these are the placeholders after the submission
Instead of foreach loop try using for loop like this:
#for (var i = 0; i < Model.KVpairs.Count(); i++)
{
#Html.TextBoxFor( m => Model.KVpairs[i], new { placeholder = lines })
}

How to fill the drop down list dynamically in selenium

My target is to dynamically fill a drop-down list. I have the password of 10 characters and I need to fill any combination of three words. I'm able to fill it use the message shown like Please fill 2,3 and 5 character, but this is depended on the String.
How should I do this thing dynamically in selenium so that the unfilled box are automatically identified and gives me the place where to fill.
I have implemented this code using String
int identifingPlacesToField =0;
String masterPassword ="jeffhrdyrt";
try {
Thread.sleep(5000);
Matcher m = Pattern.compile("\\d+").matcher(driver.findElement(By.id("pass_Login_form")).findElement(By.tagName("div")).getText().toString());
while(m.find())
{
identifingPlacesToField++;
Select select = new Select(driver.findElement(By.id("sel"+identifingPlacesToField)));
select.selectByValue(String.valueOf(masterPassword.charAt(Integer.parseInt(m.group(0))-1)));
}
driver.findElement(By.id("passBtnSubmit")).click();
TestingHLTestCases.checkingPortfolioPage();
} catch (InterruptedException e) {
e.printStackTrace();
}
In this Matcher is getting what are the digits and I am filling accordingly. But Now I want a similar thing without using string.
Thanks in Advance.
To solve this issue u have to do java coding.
Identify place to fill and use if else loop like
if(fieldfirst == 1)
{
Enter first word
}
else if(fieldfirst == 2)
{
Enter second word
}
continue this till u need it

Dojo EnhancedGrid and programmatic selection

Here's my problem: in my application I have a Dojo EnhancedGrid, backed up by an ItemFileReadStore. The page flow looks like this:
The user selects a value from a selection list.
The item from the list is posted on a server and then the grid is updated with data from the server (don't ask why, this is how it's supposed to work)
The new item is highlighted in the grid.
Now, the first two steps work like a charm; however, the third step gave me some headaches. After the data is successfully POSTed to the server (via dojo.xhrPost() ) the following code runs:
myGrid.store.close();
myGrid._refresh();
myGrid.store.fetch({
onComplete : function(items) {
for ( var i = 0; i < items.length; i++) {
if (items[i].documentType[0].id == documentTypeId) {
var newItemIndex = myGrid.getItemIndex(items[i]);
exportMappingGrid.selection.deselectAll();
exportMappingGrid.selection.addToSelection(newItemIndex);
}
}
}
});
Now, the selection of the grid is updated (i.e. the selection object has a selectedIndex > 0), but visually there's no response, unless I hover the mouse over the "selected" row. If I remove the .deselectAll() line (which I suspected as the culprit) then I sometimes end up with two items selected at once, although the grid selectionMode attribute is set to single.
Any thoughts on this one?
Thanks a lot.
You need to use setSelected(), like so
exportMappingGrid.selection.setSelected(newItemIndex, true);
The second parameter is true to select the row, false to unselect it.
This is what works for me:
grid.selection.clear();
grid.selection.addToSelection(newItemIndex);
grid.selection.getFirstSelected();
Jon