javascript 元素在该点不可点击 - 量角器

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30862405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 12:49:52  来源:igfitidea点击:

Element is not clickable at point - Protractor

javascripttestingprotractorend-to-end

提问by Andurit

I'm getting an error that element I am trying to click on is not click able which I belieave is not true.

我收到一个错误,我试图点击的元素不能点击,我相信这不是真的。

My error looks:

我的错误看起来:

 1) Open VehiclePage and populate data Populate vehicle data
  Message:
    UnknownError: unknown error: Element is not clickable at point (1315, 371). Other element would receive the click: <div class="form-con
rol combo-options ng-scope ng-animate ng-leave ng-leave-active" ng-if="comboBox.visible" on-click-outside="comboBox.hide">...</div>
 (Session info: chrome=39.0.2171.71)
 (Driver info: chromedriver=2.13.307647 (5a7d0541ebc58e69994a6fb2ed930f45261f3c29),platform=Windows NT 6.1 SP1 x86_64) (WARNING: The server
did not provide any stacktrace information)
ommand duration or timeout: 30 milliseconds

Part of my code:

我的部分代码:

it('Populate vehicle data', function() {
        browser.waitForAngular();
        element(by.css('div#datepicking i.glyphicon-calendar')).click();
        element(by.css('div#datepicking button[ng-click="select(\'today\')"]')).click();
        element(by.model('case.vehicle.adminData.paintColour')).sendKeys(browser.params.paintColour);       
        element(by.xpath('(//*[@id="form-mileage"])')).sendKeys(browser.params.mileage);                        
        element(by.id('form-mileage-unit')).click().then(function() {
            element(by.cssContainingText('option', browser.params.lengthUnit)).click();         
        });;
        element(by.xpath('(//*[@id="form-residual"])')).sendKeys(browser.params.technicalValue);    
        element(by.id('form-vehicle-condition')).click().then(function() {
            element(by.cssContainingText('option', browser.params.vehicleCondition)).click();
        });;    
        element(by.xpath('(//*[@id="form-engine-type"])')).click().then(function() {
            element(by.cssContainingText('option', browser.params.motorType)).click();
        });;

HTML of that part looks like:

该部分的 HTML 如下所示:

<div class="col-md-6">
                <div>
                    <div class="form-group">
                        <label for="form-residual" ng-class="{red: !form.residual.$valid}" translate="case.vehicle.adminData.residualValuePercentage" class="ng-scope">Technická hodnota</label>
                           <span popover="Technická hodnota musí byt v rozsahu 0-100%" popover-trigger="mouseenter" class="glyphicon glyphicon-question-sign red ng-hide" ng-show="form.residual.$invalid"></span>
                        <div class="input-group">
                            <input type="number" id="form-residual" ng-model="case.vehicle.adminData.residualValuePercentage" name="residual" class="form-control ng-pristine ng-untouched ng-valid ng-valid-min ng-valid-max" max="100" min="0">
                            <span class="input-group-addon">%</span>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="form-group">
                        <label for="form-vehicle-condition" translate="case.vehicle.adminData.vehicleCondition" class="ng-scope">Stav vozu</label>
                        <select type="text" id="form-vehicle-condition" ng-model="case.vehicle.adminData.vehicleCondition" name="vehicleCondition" class="form-control ng-pristine ng-valid ng-touched" ng-options="opt.value as opt.label | translate for opt in options.vehicleCondition"><option value="" class=""></option><option value="0" label="Lep?í">Lep?í</option><option value="1" label="Odpovídající">Odpovídající</option><option value="2" label="Hor?í">Hor?í</option><option value="3" label="Není znám">Není znám</option></select>
                    </div>
                </div>
            </div>

Error comes out always when trying to click element(by.id('form-vehicle-condition'). Is there a chance someone can help me to find a way out of it?

尝试单击元素时总是出现错误(by.id('form-vehicle-condition')。有人可以帮助我找到解决方法吗?

采纳答案by Delian Mitankin

The combo-box from the error message is still open when you are trying to click on the vehicle-conditionelement - most probably due to its closing/fade-out animation. You can try to disable animations for your tests globally, locallyor waitfor the overlaying element to disappear:

当您尝试单击vehicle-condition元素时,错误消息中的组合框仍处于打开状态- 很可能是由于其关闭/淡出动画。您可以尝试全局本地禁用测试的动画或等待覆盖元素消失:

var EC = protractor.ExpectedConditions;
var element = element(by.id('form-vehicle-condition'));
var isClickable = EC.elementToBeClickable(element);
browser.wait(isClickable, 5000);
element.click();

回答by Boyka Zhu

I tried many ways, Only

我尝试了很多方法,只有

browser.executeScript('arguments[0].click();', element.getWebElement()); 

works for me.

对我来说有效。