Unable to execute login feature on chrome browser using Behat + Drupal 8 - selenium

Question

Just using Behat with drupal 8 and facing problem with login behat script to run. Below are the my code :
behat.yml
default:
suites:
default:
contexts:
- FeatureContext
- Drupal\DrupalExtension\Context\DrupalContext
- Drupal\DrupalExtension\Context\MinkContext
- Drupal\DrupalExtension\Context\MessageContext
- Drupal\DrupalExtension\Context\DrushContext
extensions:
Behat\MinkExtension:
goutte: ~
base_url: http://localhost:8080/drupal-dev/web
javascript_session: selenium2
browser_name: 'chrome'
selenium2: ~
Drupal\DrupalExtension:
blackbox: ~
api_driver: drupal
drupal:
drupal_root: web/
region_map:
navigation: ".navbar-header"
navigation_collapsible: "#navbar-collapse"
header: ".region-header"
highlighted: ".highlighted"
help: ".region-help"
content: ".region-content"
sidebar_first: ".region-sidebar-first"
sidebar_second: ".region-sidebar-second"
footer: ".footer"
login.feature
#javascript
Feature: login check
Scenario: user login is working
Given I am on "/user"
When I fill in "john" for "edit-name"
And I fill in "john for "edit-pass"
And I press "Log in"
Then I should see "Add content"
While i execute the vendor\bin\behat then it will open the chrome browser and redirect to user login page but failed from second step. See below error message :
#javascript
Feature: login check
Scenario: user login is working # features\bootstrap\login.feature:4
Given I am on "/user" # Drupal\DrupalExtension\Context\MinkContext::visit()
When I fill in "john" for "edit-name" # Drupal\DrupalExtension\Context\MinkContext::fillField()
Form field with id|name|label|value|placeholder "edit-name" not found. (Behat\Mink\Exception\ElementNotFoundException)
And I fill in "john" for "edit-pass" # Drupal\DrupalExtension\Context\MinkContext::fillField()
And I press "Log in" # Drupal\DrupalExtension\Context\MinkContext::pressButton()
Then I should see "Add content" # Drupal\DrupalExtension\Context\MinkContext::assertPageContainsText()
--- Failed scenarios:
features\bootstrap\login.feature:4
1 scenario (1 failed)
5 steps (1 passed, 1 failed, 3 skipped)
0m15.30s (17.82Mb)
And same feature file working fine and all steps passed if i replaced from #javasript to #api.

Answer 1

And same feature file working fine and all steps passed if i replaced from #javasript to #api.
A common problem with Selenium is that the automated browser takes more time to render the page than the headless browser (in your case #api, #goutte in Symfony), so Behat returns an error when it tries to find elements in a DOM that is not yet rendered.
The solution is to add a wait() before trying to fill the field. You can even query the driver type in your context, and trigger the wait only if the type is Selenium.
You need to create your own Context file to add your methods.
Create "MyFeatureContext" (or whatever), make it inherit the MinkContext class, add it to the contexts in your behat.yml file (instead of the MinkContext since you inherit from it anyway), and add the following methods :
public function wait(int $ms)
{
if ($this->getDriver() instanceof Selenium2Driver) {
return $this->getSession()->wait($ms);
}
}
/**
* Fills in form field with specified id|name|label|value
* Example: When I fill in "username" with: "bwayne"
* Example: And I fill in "bwayne" for "username"
*
* #When /^(?:|I )fill in "(?P<field>(?:[^"]|\\")*)" with "(?P<value>(?:[^"]|\\")*)"$/
* #When /^(?:|I )fill in "(?P<field>(?:[^"]|\\")*)" with:$/
* #When /^(?:|I )fill in "(?P<value>(?:[^"]|\\")*)" for "(?P<field>(?:[^"]|\\")*)"$/
*/
public function fillField($field, $value)
{
$this->wait(1000); # 1000ms or 1sec
parent::fillField($field, $value);
}
Note that the annotations are copied from MinkContext::fillField().

Answer 2

Thanks Olivier! Just resolved the issue via changing selenium server version from 3.1 to 2.53