使用Protractor测试vue2-editor遇element not interactable错误求助

Hey there! I've run into this exact issue with Quill-based editors in Protractor before—they can be finicky because of how their DOM loads and how they handle user input. Let's break down the fixes:

First, fix the selector issue #

You're using element.all() which returns an array of elements, but there's only one editor here. Trying to call click() or sendKeys() on an array won't work correctly. Switch to element() to target the single editor element.

1. Use Expected Conditions to wait for interactability #

Flaky waits like browser.sleep() are unreliable—Protractor might try to interact with the editor before it's fully ready. Instead, use Protractor's built-in Expected Conditions to wait until the element is actually clickable:

const EC = protractor.ExpectedConditions;

describe('When you save a note', function () { 
  beforeAll(function () { 
    browser.get('http://example'); 
    
    // Target the single editor element
    const editor = element(by.css('#quill-container .ql-editor'));
    
    // Wait up to 5 seconds for the editor to be clickable
    browser.wait(EC.elementToBeClickable(editor), 5000);
    
    editor.click();
    editor.sendKeys('Some Notes add here'); 
    element(by.css('#add-note-btn')).click(); 
  }); 

  it('You must see your note at the current page', function () { 
    const savedNote = element(by.xpath('//p[text()="Some Notes add here"]'));
    // Wait for the note to appear before checking
    browser.wait(EC.presenceOf(savedNote), 5000);
    expect(savedNote.isPresent()).toBe(true); 
  }); 
});

2. Bypass DOM interactions by using Quill's API (more reliable) #

Sometimes even waiting isn't enough because Quill handles input internally. Instead, execute JavaScript directly to set the editor's content using Quill's API:

describe('When you save a note', function () { 
  beforeAll(function () { 
    browser.get('http://example'); 
    
    // Execute JS to set the editor content via Quill's API
    browser.executeScript(() => {
      // Find the Quill instance attached to your container
      const quillInstance = Quill.find('#quill-container');
      quillInstance.setText('Some Notes add here');
    });
    
    element(by.css('#add-note-btn')).click(); 
  }); 

  it('You must see your note at the current page', function () { 
    const savedNote = element(by.xpath('//p[text()="Some Notes add here"]'));
    browser.wait(protractor.ExpectedConditions.presenceOf(savedNote), 5000);
    expect(savedNote.isPresent()).toBe(true); 
  }); 
});

If Quill.find() doesn't work for your setup, you can directly update the editor's inner HTML:

browser.executeScript(() => {
  const editor = document.querySelector('#quill-container .ql-editor');
  editor.innerHTML = '<p>Some Notes add here</p>';
});

3. Check for overlapping elements #

Another common cause is an invisible overlay (like a loading spinner) covering the editor. Add a wait to ensure any overlays are gone before interacting:

const EC = protractor.ExpectedConditions;

describe('When you save a note', function () { 
  beforeAll(function () { 
    browser.get('http://example'); 
    
    // Wait for any loading overlay to disappear (adjust selector to match your app)
    browser.wait(EC.invisibilityOf(element(by.css('.loading-overlay'))), 5000);
    
    const editor = element(by.css('#quill-container .ql-editor'));
    browser.wait(EC.elementToBeClickable(editor), 5000);
    
    editor.click();
    editor.sendKeys('Some Notes add here'); 
    element(by.css('#add-note-btn')).click(); 
  }); 

  it('You must see your note at the current page', function () { 
    const savedNote = element(by.xpath('//p[text()="Some Notes add here"]'));
    browser.wait(EC.presenceOf(savedNote), 5000);
    expect(savedNote.isPresent()).toBe(true); 
  }); 
});

Start with fixing the element.all() issue and adding proper waits—those usually resolve the interactability error for Quill editors.

内容的提问来源于stack exchange，提问作者Mahsa kia-rad