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

Change text selection method in Windows

Is it possible to change text selection method in Windows? If yes, then how?
For example, I'm using Mozilla Pdf.js on my website.(https://mozilla.github.io/pdf.js/web/viewer.html)
Is it possible to implement "Android" text selection like this, so the user will be able to modify the selected text:
instead of the classic text selection:

Yes, it is possible with javascript.
The main part of the selection is Range object. If we can define range we can define a selection. To define a range we need startContainer, startOffset, endContainer and endOffset properties.
The idea of "Android" selection is next: when the mouse is down - remember container and offset at which user has clicked (we can do it fast with document.caretPositionFromPoint or document.caretRangeFromPoint depending on browser). When the mouse is moving or up - remember the second container and offset. So at every moment, we have start and end container and offset so we can create a selection:
var range = document.createRange();
range.setStart(start.container, start.offset);
range.setEnd(end.container, end.offset);
var selection = document.getSelection();
selection.addRange(range);
Then, when the mouse is down again we can check if user clicked at the start or at the end of the selection and depending on this information we can 'freeze' start or end point and move the other one. By 'move the other one' I mean recreate selection range.
I've implemented this idea here https://jsfiddle.net/uvaf36gh/. Hopefully, it will help you!

javascript: create range from cursor position at time a to cursor position at time b

I get the cursor position at time a. Then I get the cursor position at time b. I want to make a range from the cursor position at time a to the cursor position at time b. Time a and b are start and end of ctr-v (paste).
I get the cursor position like so - or rather a range at the cursor position.
sel = window.getSelection();
range_time_a = sel.getRangeAt(0).collapse(true);
But, how do I use range_time_a and range_time_b to create a new range that starts at range_time_a and ends at range_time_b?
I have seen code to get the element with the cursor and to get the offset within that element. I could use that for setStart() and setEnd, but it seems like there should be an easier way since I've already got two ranges.

EDIT This actually won't give you what you're looking for... This is really complicated. My initial suggestion of commonAnscestorContainer.innerHTML will give you too much back (all the HTML of the closest parent container to your selection).
First, you're probably going to want to trigger this code on an eventHandler that fires when the user presses ctrl+c (discussion here: How to detect Ctrl+V, Ctrl+C using JavaScript?).
If you only want to get the text selected, that's easily done:
range = window.getSelection().toString();
You don't need to check the selection at various times - you only need to capture it at the point the user hits ctrl-c.
getSelection is not meant for capturing the HTML of a selection. You can capture text & remove text, move to the start/end of the selection and a bunch of other things described here, but you can't grab HTML.
Big part of the problem is that this isn't part of any stanfard spec (see this link). Another reason its not consistent across browsers, or supported in IE7/8.
Some non-standards based examples of how to get more info out of range selections can be found here if you really need to do this - Get a range's start and end offset's relative to its parent container

Select text in textarea programatically in IE 8

I have been trying to select text in a textarea programatically based on start and end indexes, but for some reason the selection is offset by a few character locations:
My users make an initial manual selection that I store to a database.
To get the start/end positions of the initial selection I am using the approach outlined here Caret position in textarea, in characters from the start
(Answered by Tim Down)
I store the selections made by the users, and when they come back to the page I want to default in their previous selections.
My code for making the selection based on the stored positions I extracted using Tim Down's function is the following:
function SelectText(start,end) {
var textArea = document.getElementById("textArea");
var inputRange = textArea.createTextRange();
inputRange.collapse(true);
inputRange.moveStart("character", start);
inputRange.moveEnd("character", end - start);
inputRange.select();
}
It seems like the issue is caused by linebreaks/spaces. Does anyone know how to correctly make selections in IE programatically based on start and end?

I don't know exactly if it will help you but you can try to use RangyInputs js library which was developed by Tim Down and available using the following url: http://code.google.com/p/rangyinputs/
As for me I used Rangy (which is developed by Tim Down too) library for content editable div on one of my projects and it really works well and helped me a lot.
The documentation about supported methods you can find on WiKi page: http://code.google.com/p/rangyinputs/wiki/Documentation

Create editable new rows to a table

I'm trying to add details to a database by using ajax and table dynamic rows.
e.g.
----
{Customer: dropdown menu} | {Description: textarea} | delete
Add New Customer
---
When the user clicks it shows the drop down menu of all available customers. when you click away it just shows the select customer name (not the dropdown menu)
Similarly with the description i want on click to allow them to edit the description of the text area but when you click away it only shows the text you just entered. (not the text area outline)
Add new customer button creates a new empty row.
What libraries or examples can help me get started with this?
I saw this recently in an application recently. In this application it was possible to add new items/rows via ajax and dynamic HTML.

You should be able to do that easily enough using jQuery (look at the selectors, events & manipulation in their docs). For example, for the dropdown
<span id="customer-name"></span>
<select name="customer-list" id="customer-list">
<option class="name" value="cust-1">Frank Frankson</option>
<option class="name" value="cust-2">John Johnson</option>
</select>
And the jQuery :
$('.name').click(function(){
$('#customer-name').text($(this).text());
$('#customer-list').hide();
});
In that function you could do something with the option element value if needed (an ajax post or whatever).
The principal for changing the Text Area description would be the same (you could grab the text out of the textarea, add it to a div & hide the textarea; if they need to edit again, just show the textarea & hide the div)

Use jQuery.
Use the tokenizing autocomplete plugin for jQuery
For the inplace edit use Jeditable.
I'd stay away from drop downs, they are almost always bad design, whether in a menu or selecting from a long list of options. For something like a list of customers which is hopefully likely to be long it is an awful choice of a UI component.
The only time that it really makes sense to use a drop down is when the list of options is short and well known. So for it to be acceptable it probably has to be a list of options which rarely if ever changes, is less than 10 or so items long, and is used frequently (so it is well known). Drop downs are painful.

Most sites where you see such functionality accomplish it with styling - you can style a text input box to look like plain text (by removing the border and setting the background color to transparent). When the input is clicked on (focused), the style changes:
<style>
.blurredText { border: none; background-color: transparent; }
</style>
. . .
<input type="text" class="blurredText" value="Click me to edit"
onfocus="this.className=''"
onblur="this.className='blurredText'"/>
Styling a select the same way may prove difficult however, since select controls are notoriously resistant to CSS. You can still use the method Dave proposed.