Behat + mink how to test jquery-ui autocomplete field?

Question

I'm using Behat to test a registration page.
This page contains a few fields with autocompletion. User fills in some value in the field, page waits 500 milliseconds, makes an ajax-request and displays some options along with a relevant message (no items found / several items found / one item found).

I'm using a predefined step "I fill in field with value" (tried to use "I fill in value for field" instead).
Next step is custom, similar to one described in documentation - I'm just waiting for message to appear and check that it has correct text.

But after filling the field Mink removes focus from it, causing blur event to be fired on the field.
Jquery-ui clears the field value in response to this blur event, so after 500 milliseconds field is empty and ajax request is aborted.

How can I fix this problem?

Behat v2.5.0
Mink v1.5.0
Mink-extension v1.3.3
Jquery-ui v1.8.21
Selenium v2.44.0

Answer 1

Solution below is specific to my markup code but should be easily adapted to yours. You might need to modify it.

Assuming that selecting auto suggested option in textbox. Autosuggestion options appear as <li> elements after user’s key strokes. <li> element presents in the page however its content is empty at the beginning so there is nothing to be selected by behat. To solve the problem, non existing content between <li> tags is wrapped with <label> tag.

User types in this auto suggestion field:

<input name="brand" type="text" />

Where autosuggestion data appears:

<ul>
<li><label>{{ suggestion }}</label></li>
</ul>

Gherkin:

When I fill in "brand" with "S"
And I wait 1 seconds
Then I select autosuggestion option "Sula"
And I wait 1 seconds
......

FeatureContext:

/**
 * @Given /^I wait (\d+) seconds$/
 */
public function iWaitSeconds($seconds)
{
    sleep($seconds);
}

/**
 * @Then /^I select autosuggestion option "([^"]*)"$/
 *
 * @param $text Option to be selected from autosuggestion
 * @throws \InvalidArgumentException
 */
public function selectAutosuggestionOption($text)
{
    $session = $this->getSession();
    $element = $session->getPage()->find(
        'xpath',
        $session->getSelectorsHandler()->selectorToXpath('xpath', '*//*[text()="'. $text .'"]')
    );

    if (null === $element) {
        throw new \InvalidArgumentException(sprintf('Cannot find text: "%s"', $text));
    }

    $element->click();
}

Answer 2

Use this to Fill in the search box: (using the ID selector)

/**
 * @Then I type :text into search box
 */
public function iTypeTextIntoSearchBox($text)
{
    $element = $this->getSession()->getPage()->findById('searchInput');
    $script  = "$('#searchInput').keypress();";
    $element->setValue($text);
    $this->getSession()->evaluateScript($script);
}

Answer 3

@Scenario: I'm stuck
  Given I use jquery-ui-autocomplete
  And I can not test it with behat
  Then I trigger keyDown event like this:
  """
   /**
    * @When I select :entry after filling :value in :field
    */
   public function iFillInSelectInputWithAndSelect($entry, $value, $field)
   {
       $page = $this->getSession()->getPage();
       $field = $this->fixStepArgument($field);
       $value = $this->fixStepArgument($value);
       $page->fillField($field, $value);

       $element = $page->findField($field);
       $this->getSession()->getDriver()->keyDown($element->getXpath(), '', null);
       $this->getSession()->wait(500);
       $chosenResults = $page->findAll('css', '.ui-autocomplete a');
       foreach ($chosenResults as $result) {
           if ($result->getText() == $entry) {
               $result->click();
               return;
           }
       }
       throw new \Exception(sprintf('Value "%s" not found', $entry));
   }
   """