Protractor编写Angular应用E2E测试报element is not interactable如何解决

出现该错误的核心原因是操作的元素虽然存在于DOM中，但当前状态不可见、不可点击，或者异步逻辑存在问题导致操作提前执行，可按照以下步骤排查修复：

1. 先修复现有代码的基础错误 #

现有测试用例存在两处明显语法问题：

• 等待cookie按钮可见时，cookieButton变量未定义，应该调用PO文件的方法获取元素
• 调用sendKeys时，getEmailField前未加page前缀，调用方法时也缺了括号

2. 修正异步逻辑和等待条件 #

你混用了async/await和then回调，且绝大多数异步方法没有加await等待执行完成，同时使用了错误的等待条件：

• presenceOf仅判断元素存在于DOM树，不代表元素可见可交互，需要使用elementToBeClickable或者visibilityOf作为等待条件
• 所有Protractor提供的异步API（browser.get、click、browser.wait等）都需要加await等待执行完成
• 测试Angular应用不要随意开启browser.waitForAngularEnabled(false)，开启后Protractor不会自动等待Angular异步任务（接口请求、组件渲染等）完成，会大幅增加元素定位失败概率

修正后测试用例代码： #

import { browser, protractor } from 'protractor';
import { LoginPage } from './login-page.po';

describe('Login tests', () => {
  let page: LoginPage; 
  const EC = protractor.ExpectedConditions;

  beforeEach(async () => {
    page = new LoginPage();
    await page.navigateTo();
    // 非必要不要开启下面这行配置
    // browser.waitForAngularEnabled(false);
  });

  it('测试邮箱输入功能', async () => {
    // 等待cookie同意按钮可点击
    const cookieBtn = page.getCookieConsentButton();
    await browser.wait(EC.elementToBeClickable(cookieBtn), 20000);
    await cookieBtn.click();

    // 等待邮箱输入框可交互
    const emailInput = page.getEmailField();
    await browser.wait(EC.elementToBeClickable(emailInput), 20000);
    await emailInput.click();
    await emailInput.sendKeys('email@email.com');

    // 可添加断言验证输入结果
    expect(await emailInput.getAttribute('value')).toBe('email@email.com');
  });
});

3. 其他排查方案 #

如果修改后问题仍存在，可按照以下路径排查：

• 打开浏览器控制台执行document.querySelectorAll('.email')，确认匹配的元素个数，是否第一个元素就是可见的输入框，若有多个匹配元素，需要优化选择器（比如限定为input元素by.css('input.email')，或使用id选择器提升稳定性）
• 确认操作输入框时页面没有遮罩层、加载动画、弹窗等元素遮挡输入框，若有可添加等待逻辑等待遮挡元素消失
• 尝试使用Action序列执行输入操作：

await browser.actions().mouseMove(emailInput).click().sendKeys('email@email.com').perform();

报错信息截图：

内容的提问来源于stack exchange，提问作者Fiehra