Behat/Behat — Issue #68: Javascript can't get text inputed by Sahi in an <input type="text">
Author: clemherreman
Created: 2011-11-08 13:38:34+00:00
State: open

Hello,

TL;DR : In a Behat+Mink (`@javascript` w/ Sahi) scenario, Sahi enter some text in an ``, and the Javascript in the page isn't able to get what was entered by Sahi

Context
======

I'm building a little demo website, to show my team what Behat+Mink can do. There's a few pages, where one can input the size of a square and get the perimeter of this square.
One page is using plain old POST method, another page is using Javascript to calculate the perimeter

Url of the "JS page" : http://behatdemo.widop.com/js-square

To show my team that testing javascript is possible, I'm using Sahi as Mink driver, however it doesn't seems to work. I wrote a scenario where a user input `6` as the square side length, and get `24` as perimeter ([link to file on github] (https://github.com/clemherreman/behatdemo/blob/master/features/js_square.feature#L7))

```gherkin
@javascript
Scenario: Inputting a valid side size
Given I am on "/js-square"
When I fill in "side" with "6"
And I press "Calculate"
And I wait for the result to appear
And I wait a little
Then I should see "Perimeter (using js): 24 cm"
```
*Note: `And I wait a little` is a debug steps that waits 10 seconds, to be able to look at what is displayed on the Sahi firefox window*

Problem
=======
Instead of having `"Perimeter (using js): 24 cm"`, I get a `"Perimeter (using js): Error cm"`.

It seems that the snippet of javascript that calculate the perimeter isn't able to get the `6` inputed by Sahi. Here is the code ([link to file on github] (https://github.com/clemherreman/behatdemo/blob/master/features/js_square.feature#L7))

```js
(function($) {
$('form').submit(function(e) {
e.preventDefault();
// #side is a tag, where user input a square side length
var side = parseFloat(jQuery('#side').val()) || NaN;
var perimeter = side*4.0 || 'Error';
$('#sidebar').text('Perimeter (using js): '+perimeter+ ' cm');
});
})(jQuery);
```

Debug/Ideas
==========
After some investigation, it turns out that `jQuery('#side').val()`returns an empty string, which is why I get a "Error" displayed, instead of the perimeter.
**It seems that Javascript isn't able to get what was inputed by Sahi during the Scenario**.

I'm pretty stuck on this one, I feel like I'm missing something.

**Links** :
Github project (with `*.features`): https://github.com/clemherreman/behatdemo
Live website: http://behatdemo.widop.com/js-square