元素必须是用户可编辑的才能清除它（Behat）

Question

我使用Behat框架自动化网站，在PHPStorm工作，最新的chromedriver和selenium jar启动并运行：

我似乎无法与网站上的标准日期字段进行互动 例如： 输入类型=＆＃34;日期＆＃34; NG-显示=＆＃34; options.editEnabled＆＃34;

功能文件 然后我选择开始日期为＆＃34; 01012014＆＃34;

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

返回错误 无效的元素状态：元素必须是用户可编辑的才能清除它。

我在使用相同代码的几十个其他网站上使用过相同的代码而没有任何问题，是否有人有任何想法可以绕过它或者它是一个已知问题？

Answer 1

我假设你使用的是PHP和Angular，它并没有使它成为一个非常标准的日期字段。执行以下操作（Behat 3）在最后一步之前不会抛出任何错误，因为它也不会改变实际值。

/**
 * @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"

看起来组件必须从javascript接收值，尤其是this。

修改

要使用JS执行此操作，您可以使用以下内容，但是如果熟悉Angular的人可能会提出更简单的方法：

/**
 * @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"

测试通过后，值会更新。