Javascript can't get text inputed by Sahi in an <input type="text">

Question

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

UPDATE:

Solution : downloading the last version of Sahi fixed the problem. Whatever the bug was, it has been corrected.

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))

@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

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/website/views/js-square.twig#L27))

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

(function($) {
  $('form').submit(function(e) {
    e.preventDefault();
    // #side is a <input type="text"> 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

Versions:

• Behat: 2.1.2
• Mink: 1.1.1
• Sahi: 3.5
• PHP: 5.3.6

Answer 1

I was not able to reproduce your error, everythig went fine on my Behat/Mink/Sahi setup : http://screencast.com/t/2rTHo7jj

Scenario passed

I'm using Sahi 3.5 with Behat 2.1.2 and Mink 1.1.1 on OSX With latest version of Chrome & PHP 5.3.8-ZS5.5.0

Try running your test under Chrome with :

default:
  context:
    parameters:
      base_url: YOURBASEURL
      browser: chrome