元素必须是用户可编辑的，以清除它（贝哈特） [英] Element must be user-editable in order to clear it (Behat)

问题描述

我使用的是贝哈特框架自动化网站，在PHPStorm工作，拥有最新的chromedriver和硒罐子和运行：

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

我似乎无法与整个网站的标准日期字段互动
例如：
INPUT TYPE =日期NG-秀=options.editEnabled

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

特性文件：
然后，我选择的01012014

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

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

返回一个错误
无效元素的状态：元素必须是用户可编辑的，以清除它

我已经使用了相同的数十个使用相同的code，没有任何问题的其他网站，没有任何人有任何想法来解决它，或者它是一个已知的问题？

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?

推荐答案

我假设你正在使用PHP和角度，这并不能使它一个非常标准的日期字段。执行以下操作（贝哈特3）不抛出任何错误，直到最后一步，因为它不会改变任何实际价值。

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"

它看起来像该组件必须从JavaScript的接收价值，尤其是在看这个。

编辑：

要与JS做到这一点，您可以使用以下，但如果熟悉角的人可能会提出一个更简单的方法：

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.

这篇关于元素必须是用户可编辑的，以清除它（贝哈特）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！