量角器失败：元素在 vue2-editor 中不可交互答案

【问题标题】：Protractor Failed: element not interactable in vue2-editor量角器失败：元素在 vue2-editor 中不可交互
【发布时间】：2019-10-05 22:39:46
【问题描述】：

我正在使用 'protractor' 来测试我的网络应用程序。我在我的项目中添加了 'vue2-editor'，我想在编辑器中写一些东西并保存数据。这是 Vue 生成的 html：

<div id="quill-container" class="ql-container ql-snow">
    <div class="ql-editor ql-blank" data-gramm="false" contenteditable="true" data-placeholder="Add Note...">
        <p>
            <br>
        </p>
    </div>
    <div class="ql-clipboard" contenteditable="true" tabindex="-1"></div>
    <div class="ql-mention-list-container" style="display: none; position: absolute;">
        <ul class="ql-mention-list"></ul>
    </div>
</div>

这是我的测试代码：

describe('When you save a note', function () {
      beforeAll(function () {
          browser.get('http://example');
          element.all(by.css(" [id='quill-container'] > div.ql-editor.ql-blank")).click();
          element.all(by.css(" [id='quill-container'] > div.ql-editor.ql-blank")).sendKeys('Some Notes add here');
          element(by.css("[id='add-note-btn']")).click();
          browser.sleep(1000);
      });
      it('You must see your note at the current page', function () {
         expect(element(by.xpath('//p[text()="Some Notes add here"]')).isPresent()).toBe(true);
       });
});

当我执行代码时，Protractor 会给出这个消息：

失败：元素不可交互

我该怎么办？

【问题讨论】：

标签： vue.js protractor e2e-testing

【解决方案1】：

基本上，元素不可交互的原因有四个。

1) 时间 - 元素加载所需的时间。为此，您需要检查如何使用隐式显式等待

2)检查元素是否在框架中

3) 定位器不正确

4) 响应性的错误实现。这仍然源于3）。有些网站只为移动版和网页版启用了一个代码。因此，当您检查 xxxxx.size 时，该元素将具有多个实例。您必须在列表中搜索显示 != none 的列表。

【讨论】：

如果元素在框架中会发生什么？