We Keep Coding

Selenium Node JS, can't click on specific element with xpath

I am trying to make a free open source script to buy shoes, exactly in this page: https://www.zalando.es/nike-sportswear-nike-waffle-one-zapatillas-summit-whitewhite-black-orange-ni112o0jj-a11.html .
I can get elements and click them as usual with driver module
driver.findElement(By.id('uc-btn-accept-banner')).click();
Error happens when I try to pick a foot size, first opening the size selector with
driver.findElement(By.id('picker-trigger')).click(); //THIS ONE WORKS.
driver.findElement(By.xpath('/html/body/div[7]/div/div[3]/div/form/div/div[1]/div/label/span')).click(); // THIS ONE DOESN'T.
I tried clicking some elements by xpath on the site and all of them are working but the foot size.
Can someone help me picking the foot size? I don't mind if it uses other method.

You are using a wrong selector there.
After opening the drop down menu you can select any size by locator like this:
//input[#name="size-picker"]/..//span[text()="39"]
It will be like this:
driver.findElement(By.id('picker-trigger')).click();
driver.findElement(By.xpath('//input[#name="size-picker"]/..//span[text()="39"]')).click();
Just update the value of desired size in the XPath expression

It it a drop down: (But we can not use Select class from Selenium since the drop down is not built using Select option tag)
Click on a drop down using this xpath :
//span[text()='Elige una talla']/..
and click like this :
driver.findElement(By.xpath("//span[text()='Elige una talla']/..")).click();
Now you would see a list of foot size :
Select them with the below xpath :
//form[#name='size-picker-form']/descendant::label[contains(#for, 'size-picker')][3]
This will select 3rd item from the shown list. You have to change [3] to other number incase you would like to select different size.
driver.findElement(By.xpath("//form[#name='size-picker-form']/descendant::label[contains(#for, 'size-picker')][3]")).click();
This should select 40 size

Preserve selection after clicking a custom button in tinyMCE issue

Here is my issue :
I have a custom button with a code onClick. This code modify the selection's parent node, and I would like that my selection stays the same after my code, but tinyMCE disable my selection and give me a caret instead.
I tried getRng() and setRng from tinyMCE API but without success, the results are pretty odd. Sometimes it works and sometimes it deactivate my selection and give me a caret instead. Plus, sometimes it works only 2 times and then my button does not respond.
Here is my code which does not work:
onclick : function() {
range_selection = tinymce.activeEditor.selection.getRng();
//Here is my own code which modify my parent node
tinymce.activeEditor.selection.setRng(range_selection);
}

Problem here is that this range is probably not applicable anymore because of a changed DOm structure. I would use a bookmark to overcome this issue:
var bookmark = ed.selection.getBookmark();
// do what you like to do here
ed.selection.`moveToBookmark`(bookmark);

preventing HTML5 drag and drop function from multiple drops of the same element

I am making a drag and drop system with HTML5. Dragging images from the left side of the screen to the right side(these are identified as window1 and window2. the images are stored in a array and appended to a hidden input element so I can send them to the next page through a submit. the problem is I only want the script to detect what's being dropped in window2 and I don't want multiple entries.
function drop(ev)
{
//append the hidden child
number.toString();
var hidden = document.createElement("input");
hidden.type = "hidden";
hidden.name = "option"+number;
hidden.value = my_images;
var f = document.getElementById("select");
f.appendChild(hidden);
number++;
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
I was considering a simple if statement but what should I look for? how do I check where I am currently dropping the image?
EDIT: would it be an idea to use an onmouseover event to somehow check what element I'm currently hover over? if so how would I accomplish this? current I've written this small snippet of code
var current = document.mouseover;
current = document.getElementById(this);

The HTML5 spec does not account for dragging multiple items. As a result (and you appear to have noticed this above) the various HTML5 events will not indicate that multiple items have been dragged.
You don't explicitly say this within your question, but my guess is that you think (or thought, this is an older question) that multiple items are being dragged due to the "ghost" image generated automatically by the browser. These images certainly can give the impression that multiple elements are being dragged.
There are a number of known problems with these "ghost" images, and the way the browser generates them. Specifically that the ghost image is generated at the time dragging starts, which means that none of your code to define an appropriate drag has even run yet. I.e. the browser doesn't know if you are dragging one big giant element, a little element, or maybe you accidentally selected a lot of text right before the drag... it generates the image of whatever it sees, and that's what you get.
In some browsers (not IE) you can replace the drag image with something more appropriate. This usually works out if you don't care about IE, but if you do care about IE then you have just found out why people are annoyed by the HTML5 API.

Div Inner Text Selection using Javascript (with keyboard?)

My goal is to create a caret browsing extension in google chrome. I have hit a wall with text selection. I've found that I can select the contents of a div:
range = document.createRange();
referenceNode = document.getElementsByTagName("div").item(0);
range.selectNode(referenceNode);
I can also select child elements using range.setStart(referenceNode,offest) and range.setEnd(referenceNode,offset) where offset is the number of child nodes to skip/include in the selection.
Unfortunately, I have no idea how to select individual characters within a div. This behavior is, ofcourse, available for textareas and input textfields. I'm hoping for a legit javascript solution that I missed, but a hack-around suggestion using DOM manipulation of one form or another is also acceptable.
It is important that the solution allow for caret-browsing like behavior. For example, given the starting position as an offset from some location, and the ending position as an offset from the same location, display the selection in position on the screen and allow for copying the selection.
Thank you for your time.
Best Regards,
Lotus

I don't know if this is hack or not but it is working.
(I just made that) Try demo: http://derek1906.site50.net/experiment/selection/
You can put a <span></span> around the individual characters that you want to select and then you just select the <span> and Wa-la, you selected the words you want!

Dynatree multi - selection implementaion ala Windows style

I would like to implement windows style multi-selection:
when user holds CTRL key and selects several nodes of the tree.
Dynatree (from here http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html) by default has checkboxes for node selection which my client doesn't seem to like.
My question is, is it possible to implement what I need using provided set of callbacks?
also, curently, when I hold CTRL key and click on the node, it opens a new window.
Is there any way to suppress this functionality? i am guess I would have to do through CSS?

Have a look at the sample and source code here
http://wwwendt.de/tech/dynatree/doc/sample-select.html
The last example on that page uses the checkbox: false tree option to hide the checkboxes.
The onClick handler calls dtnode.toggleSelection().
This could be replaced by something like
if not CTRL pressed:
deselect all nodes
toggle selection
Desecting all nodes could be done like this:
tree.visit(function(dtnode) {
dtnode.select(false);
});