javascript - 元素显示在 chromedriver DOM 中，但 Protractor 显示失败 : element not interactable

Question

我收到错误 Failed: element not interactable在我的 Protractor 测试套件中。

本质上，我试图单击一个复选框，但它告诉我不能这样做，因为该元素未显示在 DOM 上。但是，当我运行测试套件并且 Chromedriver 浏览器弹出并运行模拟测试时，我可以在屏幕上看到我尝试单击的元素!

这是浏览器运行测试时的屏幕截图。

我已经验证该元素确实存在于 DOM 上，其效果为 expect(elementToTest.isPresent()).toBe(true)一切都很好。当我这样做时expect(elementToTest.isDisplayed()).toBe(true) ，它返回 false 。

现在，我尝试通过使用browser.driver.manage().window().maximize();最大化浏览器窗口来解决这个问题。 ，但这没有任何作用。

我尝试过将鼠标悬停并滚动到该元素，等待它可点击，等待它显示，使浏览器休眠，但随后返回 Timeout错误。

所以，我不知道该怎么办。任何帮助都会非常有帮助。

describe('purposes page', () => {
  beforeEach(() => {
    utils.clearCookies();
    browser.driver.manage().window().maximize();
    browser.waitForAngularEnabled(false);
    browser.get("/");
    browser.sleep(800);
    element(by.css('[class*=introV2_rejectAll]')).click();
  });

  describe('purpose controls', () => {
    it('clicking a toggle works', () => {
      const switchEl = element(by.css('[class*=switch_switch]'));
      const parentEl = element(by.css('[class*=purposes_active]'));
      expect(switchEl.getAttribute('class')).toContain('switch_isSelected');
      expect(parentEl.getText()).not.toContain('Inactive');

      switchEl.click();
      browser.sleep(800);
      expect(switchEl.getAttribute('class')).not.toContain('switch_isSelected');
      expect(parentEl.getText()).toContain('Inactive');
    });
  }

switchEl.click();声明是失败的测试。返回的错误消息如下所示:

Failures:
1) purposes page purpose controls clicking a toggle works
  Message:
    Failed: element not interactable
      (Session info: chrome=77.0.3865.120)
    Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:25:53'
    System info: host: 'IAB-MAC-00012.local', ip: '2601:600:8180:1d50:c88e:3c0c:171c:663e%en0', os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.14.6', java.version: '13'
    Driver info: driver.version: unknown
  Stack:
    WebDriverError: element not interactable
      (Session info: chrome=77.0.3865.120)
    Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:25:53'
    System info: host: 'IAB-MAC-00012.local', ip: '2601:600:8180:1d50:c88e:3c0c:171c:663e%en0', os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.14.6', java.version: '13'
    Driver info: driver.version: unknown
        at Object.checkLegacyResponse (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/error.js:546:15)
        at parseHttpResponse (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/http.js:509:13)
        at /Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/http.js:441:30
        at processTicksAndRejections (internal/process/task_queues.js:85:5)
    From: Task: WebElement.click()
        at thenableWebDriverProxy.schedule (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/webdriver.js:807:17)
        at WebElement.schedule_ (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/webdriver.js:2010:25)
        at WebElement.click (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/webdriver.js:2092:17)
        at actionFn (/Users/zackcarlson/Desktop/Git/cmp/node_modules/protractor/built/element.js:89:44)
        at Array.map (<anonymous>)
        at /Users/zackcarlson/Desktop/Git/cmp/node_modules/protractor/built/element.js:461:65
        at ManagedPromise.invokeCallback_ (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:1376:14)
        at TaskQueue.execute_ (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:3084:14)
        at TaskQueue.executeNext_ (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:3067:27)
        at /Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:2927:27Error
        at ElementArrayFinder.applyAction_ (/Users/zackcarlson/Desktop/Git/cmp/node_modules/protractor/built/element.js:459:27)
        at ElementArrayFinder.<computed> [as click] (/Users/zackcarlson/Desktop/Git/cmp/node_modules/protractor/built/element.js:91:29)
        at ElementFinder.<computed> [as click] (/Users/zackcarlson/Desktop/Git/cmp/node_modules/protractor/built/element.js:831:22)
        at UserContext.<anonymous> (/Users/zackcarlson/Desktop/Git/cmp/spec/purposes.spec.js:103:15)
        at /Users/zackcarlson/Desktop/Git/cmp/node_modules/jasminewd2/index.js:112:25
        at new ManagedPromise (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:1077:7)
        at ControlFlow.promise (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:2505:12)
        at schedulerExecute (/Users/zackcarlson/Desktop/Git/cmp/node_modules/jasminewd2/index.js:95:18)
        at TaskQueue.execute_ (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:3084:14)
        at TaskQueue.executeNext_ (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:3067:27)
    From: Task: Run it("clicking a toggle works") in control flow
        at UserContext.<anonymous> (/Users/zackcarlson/Desktop/Git/cmp/node_modules/jasminewd2/index.js:94:19)
        at /Users/zackcarlson/Desktop/Git/cmp/node_modules/jasminewd2/index.js:64:48
        at ControlFlow.emit (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/events.js:62:21)
        at ControlFlow.shutdown_ (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:2674:10)
        at /Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:2599:53
    From asynchronous test: 
    Error
        at Suite.<anonymous> (/Users/zackcarlson/Desktop/Git/cmp/spec/purposes.spec.js:96:5)
        at Suite.<anonymous> (/Users/zackcarlson/Desktop/Git/cmp/spec/purposes.spec.js:95:3)
        at Object.<anonymous> (/Users/zackcarlson/Desktop/Git/cmp/spec/purposes.spec.js:3:1)

Answer 1

问题是因为元素位于 DOM 中，但在 UI 中渲染需要一些时间。因此，您应该在访问元素之前添加一些等待。

如果等待没有帮助，请尝试下面的 JavaScript 执行器

ele = element(by.css('[class*=switch_switch]'));
await browser.executeScript('arguments[0].click()', ele);

希望对你有帮助