如何在Nightmare.js的.evaluate中实现DevTools的Angular API调用并获值

嘿，这个问题我熟！要在Nightmare.js里模拟你在DevTools中操作Angular的流程，核心就是利用Nightmare的.evaluate()函数——它能让你直接在浏览器的上下文环境里执行代码，和你在Dev控制台敲代码的环境完全一致。

具体实现步骤 #

首先，你需要确保Angular已经在页面上初始化完成，然后在.evaluate()里复刻你DevTools里的操作逻辑就行，直接上代码示例：

const Nightmare = require('nightmare');
const nightmare = Nightmare({ show: true }); // show: true可以看到浏览器窗口，方便调试

// 替换成你的目标页面URL
nightmare
  .goto('https://your-target-page.com')
  // 先等待Angular初始化完成，避免提前调用injector报错
  .wait(() => {
    // 检查Angular是否存在，并且页面的injector已经创建
    return typeof angular !== 'undefined' && angular.element(document.body).injector();
  })
  // 在浏览器上下文执行代码，传入需要的arg参数
  .evaluate((arg) => {
    // 和你在DevTools里写的代码一模一样
    const api = angular.element(document.body).injector().get('apiFactory');
    // 如果api.getData返回的是Promise（Angular的$http/$q通常会返回），Nightmare会自动等待它resolve
    return api.getData(arg);
  }, 'your-argument-value') // 这里的参数会传递给evaluate里的arg
  .then((result) => {
    // 拿到浏览器返回的数据，做后续处理
    console.log('成功获取到数据：', result);
  })
  .catch((error) => {
    console.error('执行出错：', error);
  })
  .finally(() => {
    // 结束Nightmare实例
    nightmare.end();
  });

几个关键注意事项 #

• 等待Angular就绪：一定要用.wait()确保Angular已经加载完成，否则angular.element(document.body).injector()会返回undefined导致报错。你也可以根据页面上的Angular绑定元素来等待，比如.wait('.angular-bound-element')。
• 处理异步返回值：如果api.getData()返回的是Promise（这在Angular里很常见），Nightmare的.evaluate()会自动等待Promise完成，把resolve的结果返回给Node环境，不用你手动写await。
• 参数传递：.evaluate()的第二个及以后的参数会作为回调函数的参数传入，方便你动态传递arg这类变量。
• 序列化限制：返回的结果必须是可序列化的（比如普通对象、数组、字符串、数字），不能返回函数、DOM元素或者Angular的特殊对象（比如$scope），否则会被序列化丢失信息。

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