如何使用Protractor点击Angular路由链接？解决超时报错问题

我来帮你分析下这个Protractor点击路由链接超时的问题，结合你的代码、HTML结构和错误栈信息，给你几个可行的解决方案：

一、替换硬编码的browser.sleep()为显式等待 #

你现在用了很多固定时长的browser.sleep()，这种方式非常不可靠——网络延迟、页面加载速度波动都会导致元素还没准备好就执行点击/输入操作，进而触发超时。应该用Protractor内置的ExpectedConditions来等待元素达到可交互状态（比如可见、可点击）。

修改后的测试代码如下：

const EC = protractor.ExpectedConditions;

describe('Enter username and password', function () {
  it('should login and navigate to notifications', function () {
    browser.get('http://dev.policytracker.io');
    
    // 等待Login按钮可点击后再点击
    const loginBtn = element(by.buttonText('Login'));
    browser.wait(EC.elementToBeClickable(loginBtn), 10000); // 最多等10秒
    loginBtn.click();
    
    // 等待用户名输入框可见并输入内容
    const usernameInput = element(by.name('username'));
    browser.wait(EC.visibilityOf(usernameInput), 10000);
    usernameInput.sendKeys('Harish.abc');
    
    // 等待密码输入框可见并输入内容
    const passwordInput = element(by.name('Password'));
    browser.wait(EC.visibilityOf(passwordInput), 10000);
    passwordInput.sendKeys('rupesh');
    
    // 等待登录提交按钮可点击并点击
    const submitBtn = element(by.className('mat-raised-button'));
    browser.wait(EC.elementToBeClickable(submitBtn), 10000);
    submitBtn.click();
    
    // 等待Notifications路由链接可点击后点击
    const notificationsLink = element(by.css('[routerlink="/notifications/notification"]'));
    browser.wait(EC.elementToBeClickable(notificationsLink), 10000);
    notificationsLink.click();
  });
});

二、优化元素定位器 #

从你的HTML代码来看，目标元素上有ng-reflect-router-link="/notifications/notification"这个Angular反射属性，有时候用这个属性定位会比直接用routerlink更可靠（避免模板属性大小写或渲染差异的问题）。你可以尝试替换定位器：

// 改用ng-reflect-router-link定位
const notificationsLink = element(by.css('[ng-reflect-router-link="/notifications/notification"]'));

另外，也可以尝试用链接文本定位（如果元素的可见文本是"Notifications"）：

const notificationsLink = element(by.linkText('Notifications'));

三、处理Angular等待超时问题 #

错误栈里提到Protractor.waitForAngular()超时，说明点击链接后Protractor一直在等待Angular应用稳定，但页面可能存在未完成的异步任务（比如轮询请求、未结束的Observable）。你可以尝试以下两种方式：

1. 临时禁用Angular等待（仅在确认跳转后的页面是Angular页面时，点击后再重新启用）：

// 点击前禁用Angular等待
browser.waitForAngularEnabled(false);
notificationsLink.click().then(() => {
  // 点击后重新启用
  browser.waitForAngularEnabled(true);
});

2. 调整超时时间：
   在你的Protractor配置文件（protractor.conf.js）中增加超时配置，延长Jasmine和脚本的超时时间：

exports.config = {
  // ...其他配置项
  jasmineNodeOpts: {
    defaultTimeoutInterval: 60000 // 把Jasmine默认超时改为60秒
  },
  allScriptsTimeout: 20000 // 脚本超时改为20秒
};

四、确认路由跳转完成 #

点击链接后，可以等待目标页面的特征元素出现，确保路由跳转已经完成，避免后续操作提前执行：

notificationsLink.click();
// 等待通知页面的某个唯一元素可见，比如页面标题
const notificationPageTitle = element(by.css('h1:contains("Notifications")'));
browser.wait(EC.visibilityOf(notificationPageTitle), 10000);

错误原因总结 #

你遇到的超时问题主要来自两个方面：

• 硬编码的sleep()无法适配页面加载的波动，导致元素未就绪就执行操作；
• Protractor等待Angular应用稳定时，页面存在未完成的异步任务，触发了脚本超时。

用显式等待替代固定sleep，优化定位器，再配合超时调整，应该能解决这个问题。

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