Element must be user-editable in order to clear it (Behat)

Question

I am automating a website using the Behat framework, working in PHPStorm, have the latest chromedriver and selenium jar up and running:

I cant seem to interact with standard Date fields across the site e.g: input type="date" ng-show="options.editEnabled"

Feature file: Then I select a start date of "01012014"

public function startDate ($date)
{
    $this->getElement('startDate')->setValue($date);
}

Returns an error of invalid element state: Element must be user-editable in order to clear it.

I have used the same across dozens of other websites using the same code with no problems, does anyone have any ideas to get around it or is it a known problem?

Jeopardize

Could you provide the specific html structure surrounding this element? Various date controls have different behaviors and some of them are not standard html which does cause some difficulties. – Crazyweed

Answer 1

I assume you are using PHP and Angular, which doesn't make it a very standard date field. Doing the following (Behat 3) doesn't throw any errors up until the last step, because it doesn't change the actual value either.

/**
 * @When /^I select a "(?P<id>.+)" date of "(?P<date>.+)"$/
 *
 * @param $id
 * @param $date
 */
public function startDate($id, $date)
{
    $this->getSession()->getPage()->find('css', '#' . $id)->setValue($date);
}

@javascript
Scenario: Test
    When I go to "https://docs.angularjs.org/examples/example-date-input-directive/index.html"
    And I select a "exampleInput" date of "2013-11-11"
    Then I should see "2013-11-11"

It looks like that the component must receive a value from the javascript, especially looking at this.

Edit:

To do this with JS you can use the following, though if a person familiar with Angular might suggest a simpler approach:

/**
 * @When /^I select date of "(?P<date>.+)"$/
 *
 * @param $date
 */
public function startDate($date)
{
    $element = $this->findElement('//*[@id="exampleInput"]');

    $script = '
        (function(){
            var element = document.evaluate(\'' . $element->getXpath() . '\', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
            var $scope = angular.element(element).scope();
            $scope.$apply(function() {
                $scope.value = new Date(\'' . $date . '\');
            });
        })();
        ';

    $this->getSession()->executeScript($script);
}

@javascript
Scenario: Test
    When I go to "https://docs.angularjs.org/examples/example-date-input-directive/index.html"
    And I select date of "2013-11-11"
    Then I should see "2013-11-11"

The test passes, the value gets updated.

Clarettaclarette