Behat test fails, unable to find Username field using @javascript

Question

My Behat test fails as soon as I add @javascript

Error:

Form field with id|name|label|value|placeholder "Username" not found.

When I remove @javascript, test is passed without any error.

Given I am logged in as a user with the Administrator role

To test the Drupal 8 image_field I need @javascript

Behat.yml:

default:
  autoload:
    '': '%paths.base%/tests/behat/bootstrap'
  suites:
    default:
      paths:
        - '%paths.base%/tests/behat/default'
      contexts:
        - Drupal\DrupalExtension\Context\DrupalContext
        - Drupal\DrupalExtension\Context\DrushContext
        - Drupal\DrupalExtension\Context\MessageContext
        - Drupal\DrupalExtension\Context\MinkContext
        - MyServices\EntityContext
        - FailureContext
        - MyServices\LinkContext
        - My\MenuContext
  extensions:
    Bex\Behat\ScreenshotExtension:
      image_drivers:
        local:
          screenshot_directory: /[SHARED_FOLDER]/screenshots
    Behat\MinkExtension:
      goutte: ~
      base_url: "http://dev.mysite.com"
      files_path: '%paths.base%/tests/behat/files/'
      javascript_session: selenium2
      browser_name: chrome
      selenium2:
        wd_host: "http://localhost:4444/wd/hub"
        capabilities:
          # required by mink-extension 2.3
          marionette: null
          browserName: chrome
          browser: chrome
          version: 63
    Drupal\DrupalExtension:
      blackbox: ~
      api_driver: 'drupal'
      drupal:
        drupal_root: '%paths.base%/public'
      text:
        username_field: "Username"
        password_field: "Password"
        log_in: "Log in"
        log_out: "Log out"
      selectors:
        message_selector: '.messages'
        error_message_selector: '.messages--error'
        success_message_selector: '.messages--status'
        warning_message_selector: '.messages--warning'
        logged_in_selector: '.user-logged-in'
        login_form_selector: '#user-login-form'
      region_map:
        comments: '.comments'
        "main navigation": '#block-my-theme-main-navigation'
        "local tasks": '.block--local-tasks-block'
        "main content": '.block--system-main-block'
        "highlights": '.c-highlights__list'

ci:
  extensions:
    Bex\Behat\ScreenshotExtension:
      image_drivers:
        local:
          screenshot_directory: /tmp/artifacts/screenshots
    Behat\MinkExtension:
      base_url: http://localhost

Answer 1

I bet you are either one:

1. Testing against a non-English site.
2. Having BigPipe enabled.
3. Missed to tag that scenario with @api.
4. Misconfigured Selenium.

---

To solve 1. you need to put the non-English strings into your behat.yml like so:

Drupal\DrupalExtension:
  text:
    log_out: "Sign out"
    log_in: "Sign in"
    password_field: "Enter your password"
    username_field: "Username"

@see docs Override text strings.

---

To solve 2. which can occur when BigPipe somehow changes the markup in an undesired way, you can try out the patch at https://github.com/jhedstrom/drupalextension/pull/325.patch.

@see pull request Big pipe compatibility follow-up

---

To solve 3. simply add an @api tag to your scenario.

---

To solve 4. you must point wd_host to http://dev.mysite.com:4444/wd/hub, since your base_url is http://dev.mysite.com.

wd_host: "http://dev.mysite.com:4444/wd/hub"