Protractor测试登录表单抛出StaleElementReferenceError警告如何解决

StaleElementReferenceError 是UI自动化测试中的常见错误，触发原因是你之前获取的DOM元素引用，因为页面导航、重渲染、局部刷新等操作已经从当前DOM树中移除，代码还在尝试操作这个已经失效的旧元素引用就会抛出该警告。
你遇到的问题根源是第一个测试用例中大量异步操作没有加await，导致用例还没执行完所有交互逻辑，Protractor就已经开始执行下一个测试的beforeEach导航逻辑，上一个测试未完成的元素操作拿到的引用因为页面跳转变成了失效状态，所以触发警告。单独跑第二个测试没有问题，就是因为不存在上一个测试的残留异步操作干扰。

1. 补全所有异步操作的await关键字 #

Protractor中所有页面交互、元素获取、浏览器属性读取方法都是异步返回Promise，必须加await保证时序正确：

• 元素输入sendKeys方法需要加await
• 按钮点击click方法需要加await
• 浏览器地址读取getCurrentUrl方法需要加await

2. 修复后的代码示例 #

async navigateToLogin(): Promise<unknown>{
  return browser.get('http://localhost:4200/login');
}

describe('Login', () => {
  let page: AppPage;

  beforeEach(async () => {
    page = new AppPage();
    await page.navigateToLogin();
  });

  it('should not navigate from login if password is incorrect', async () => {
    const email = await element(by.id('email'));
    await email.sendKeys('l@l.com'); // 补全await
    const password = await element(by.id('password'));
    await password.sendKeys('2141212d1e'); // 补全await
    expect(await element(by.id('email')).getAttribute('value')).toBe('l@l.com');
    expect(await element(by.id('password')).getAttribute('value')).toBe('2141212d1e');
    const button = await element(by.buttonText('Login'));
    await button.click(); // 补全await
    expect(await browser.getCurrentUrl()).toContain('/login'); // 补全await
  });

  it('should be disabled with no inputs, with either input missing or email is not valid ', async () => {
    expect(true).toBeTruthy();
  });
});

3. 可选优化（进一步避免同类问题） #

可以在测试用例结束后增加清理逻辑，等待页面状态稳定：

afterEach(async () => {
  // 等待所有Angular异步任务完成
  await browser.waitForAngular();
});

如果页面有非Angular的异步逻辑，可以额外加显式等待，比如点击登录按钮后等待登录失败提示出现，再断言地址，避免时序偏差。

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