Selenium测试Angular应用报angular is not defined异常咨询

核心报错原因 #

从报错堆栈里执行的JS脚本、你贴出的组件代码可以定位两个直接问题：

1. 你使用的paulhammant ngwebdriver默认运行在AngularJS（Angular 1.x）兼容模式，执行的逻辑全是查找全局window.angular对象、ng-app/ng-controller等Angular1专属标记，但你的项目是Angular 2+版本（使用@Component装饰器、[(ngModel)]双向绑定语法），Angular2+默认不会在全局挂载angular变量，直接调用Angular1的API必然报未定义错误。
2. 你配置根选择器时多嵌套了一层转义引号，实际传入的选择器是带双引号的"app-create-customers"，无法匹配DOM上的<app-create-customers>节点。

// 错误写法，多余的转义引号导致选择器无效
ByAngular.withRootSelector("\"app-create-customers\"")

修复步骤 #

• 第一步：修正根选择器配置
  去掉多余的引号，直接传入选择器字符串即可：

  ByAngular.withRootSelector("app-create-customers")
  

• 第二步：开启Angular 2+兼容模式
  如果你使用的是支持Angular2+的ngwebdriver版本，初始化后手动开启NG2模式，驱动就会改用Angular2+的测试ability接口查找元素，不再依赖全局angular对象：

  ByAngular ng = new ByAngular(driver);
  // 开启Angular2+兼容
  ng.setUseAngular2(true);
  // 等待Angular请求处理完成、页面稳定后再查找元素
  ng.waitForAngularRequestsToFinish();
  WebElement stateSelect = driver.findElement(ng.model("state"));
  

• 第三步：备选方案（无需依赖ngwebdriver）
  如果不想调试ngwebdriver兼容问题，直接用Selenium原生CSS选择器定位即可，Angular2+渲染后的ng-select是普通DOM节点，不需要依赖Angular测试钩子就能定位：

  // 通过标签+ng-reflect-model属性定位绑定了state的下拉框
  WebElement stateSelect = driver.findElement(By.cssSelector("ng-select[ng-reflect-model='state']"));
  

验证点 #

• 打开Chrome控制台输入window.angular，如果返回undefined即可确认是Angular2+项目，必须开启NG2兼容模式才能用ngwebdriver的model等定位方法
• 元素查找逻辑必须在Angular应用启动完成、页面路由跳转结束后执行，不要在页面刚打开还在加载资源时就触发定位
• 生产环境构建的Angular应用默认会关闭testability接口，如果是测试生产环境包，需要在构建配置里开启testability支持。

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