量角器 - 哪些元素是“可交互的”？

Question

我试图与之交互的元素是使用ng-sortable 并包含几个可以拖动和排序的 div。

await viewTransaction.getEl('div#dragdrop-boundary').sendKeys(protractor.Key.ARROW_DOWN);

Failed: element not interactable

在这种情况下元素是可见的。我想知道是否只有某些元素（例如dropdowns）可以通过这种方式与sendKeys“交互”？

这是只指定WebElement 的Documentation。

我的主要问题是“是否只有某些 WebElements 可以通过特定方式进行交互，例如 protractor.Key.ARROW_DOWN？

这是部分标记

已更改类和变量的名称以保护无辜

<div ng-show="sortMode.sorting" id="dragdrop-boundary" class="sortMode-high">
    <div ng-if="Transaction &amp;&amp; Transaction.TransactionId" ng-repeat="Section in Sections" class="ng-scope">
        <div ng-hide="'PICKLIST' === Section.SectionId" class="lineItem-title ng-binding">Rental</div>
            <div data-ng-model="SortableLineItems[Section.SectionId]" data-as-sortable="sortableOptions" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty">
                <div data-as-sortable-item="" data-ng-repeat="LineItem in SortableLineItems[Section.SectionId]" class="ng-scope as-sortable-item">
                    <div as-sortable-item-handle="" class="sortMode-existing-lineitems sortMode-row sortMode-outerRow sortMode-item-enable                                             sortMode-selected" ng-class="arbitrary:LineItem.TransactionType=='SALEFEE','kit-component':LineItem.IsKitComponent,'damage-waiver':LineItem.TransactionType=='DAMAGEWAIVER',discount:!LineItem.ItemId &amp;&amp; LineItem.ItemKey.includes('Discount')}">
                        <div class="sortMode-icon-container">
                            <button class="btn-default btn btn-xs action-btn-delete ng-scope" ng-if="LineItem.ItemId &amp;&amp; LineItem.LineItemId" disabled="">
                                <span class="roro-icon roro-icon-cancel"></span>
                            </button>
                        </div>
                        <div class="sortMode-cell sortMode-item-name ng-binding">Wagon</div>
                        <div class="sortMode-cell sortMode-item-key ng-binding ng-scope" ng-if="LineItem.HasItemKey">ITEM-3</div>
                        <div class="sortMode-cell sortMode-amount-per-item ng-binding">$30.00</div>
                        <div class="sortMode-cell sortMode-quantity ng-binding">1</div>
                        <div class="sortMode-cell sortMode-amount-text ng-binding">$30.00</div>
                        <div class="sortMode-cell sortMode-tax-free-text ng-binding">T</div>
                        <div class="clearfix line-item-instances ng-scope" ng-if="LineItem.ItemSerialized &amp;&amp; !RemovingItem[LineItem.LineItemId]">
                        <div ng-class="{'padding-none' : !subItemPopup[$index].active}" class="padding-none">
                            <div class="line-item-cards">
                                <div class="line-item-card tbd-card ng-scope" ng-if="LineItem.CountUnassigned"><div>
                                                        <span translate="TBD" class="ng-scope">TBD</span> x <span class="ng-binding">1</span>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div ng-if="Transaction &amp;&amp; Transaction.TransactionId" ng-repeat="Section in Sections" class="ng-scope">
                        <div ng-hide="'PICKLIST' === Section.SectionId" class="lineItem-title ng-binding">Damage Waiver</div>
                            <div data-ng-model="SortableLineItems[Section.SectionId]" data-as-sortable="sortableOptions" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty">
                                <div data-as-sortable-item="" data-ng-repeat="LineItem in SortableLineItems[Section.SectionId]" class="ng-scope as-sortable-item">
                                    <div as-sortable-item-handle="" class="sortMode-existing-lineitems sortMode-row sortMode-outerRow
                                        sortMode-item-enable
                                        sortMode-unselected" ng-class="{arbitrary:LineItem.TransactionType=='SALEFEE','kit-component':LineItem.IsKitComponent,'damage-waiver':LineItem.TransactionType=='DAMAGEWAIVER',discount:!LineItem.ItemId &amp;&amp; LineItem.ItemKey.includes('Discount')}">

                                        <div class="sortMode-icon-container">

                                            <button class="btn-default btn btn-xs action-btn-edit ng-scope" ng-if="LineItem.TransactionType == 'DAMAGEWAIVER'" disabled="">
                                                <span class="roro-icon roro-icon-edit"></span>
                                            </button>

                                        </div>
                                        <div class="sortMode-cell sortMode-item-name ng-binding">Damage Waiver (10%)</div>
                                       <div class="sortMode-cell sortMode-item-key ng-binding ng-scope" ng-if="LineItem.HasItemKey">N/A<div>

                                       <div class="sortMode-cell sortMode-amount-per-item ng-binding">$3.00</div>
                                           <div class="sortMode-cell sortMode-quantity ng-binding">1</div>
                                               <div class="sortMode-cell sortMode-amount-text ng-binding">$3.00</div>
                                                   <div class="sortMode-cell sortMode-tax-free-text ng-binding">T</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Answer 1

当您将键发送到 Web 元素时，量角器会向 DOM 中的该选择 Web 元素发送一个序列。如果是文本框，发送的序列可以是一组字符串，也可以是一个键控命令。如果您在下拉元素上发送类似 protractor.Key.ARROW_DOWN 的命令，则该元素将能够执行该命令序列。对于可排序元素（我猜是拖放之类的东西），除非它的功能是专门为 web 元素定义的，否则箭头键将不起作用，即如果我在 UI 中选择元素并单击箭头键，它应该移动下。但是像点击和拖动之类的东西可能适用于 sendKeys。我还没有尝试过，我不确定它是否会起作用。

另外，如果您发送这样的密钥：

await viewTransaction.getEl('div#dragdropboundary').sendKeys(protractor.Key.ARROW_DOWN);

该键将被连续按下。您必须在该键之后发送空键，例如：protractor.Key.NULL

await viewTransaction.getEl('div#dragdropboundary').sendKeys(protractor.Key.ARROW_DOWN, protractor.Key.NULL);