javascript - nightwatch中如何根据测试环境动态加载不同的页面对象？

Question

我想为我的应用添加一个涉及收款的测试。在我的应用程序本地环境中，它使用 stub 支付页面，您只需点击一个按钮即可失败或授权支付，在所有其他环境中，它会显示一个需要填写卡详细信息的表单。

我目前有测试设置来检查我们是否需要在每个命令中使用真实或 stub 付款。

function isRealPayment(page) {
  return !page.api.globals.stubbedPayment;
}

module.exports = {
  commands: {
    verifyLoaded: function() {
      if (isRealPayment(this)) {
        return this.waitForElementVisible('@orderSummaryContainer');
      }
      return this.waitForElementVisible('@stubbedAuthorisedForm');
    },

    fillInPaymentDetails: function() {
      if (isRealPayment(this)) {
        this
          .setValue('@cardNumber', '4444333322221111')
          .setValue('@name', 'John Doe')
          .setValue('@expiryMonth', '12')
          .setValue('@expiryYear', '25')
          .setValue('@securityCode', '123');
      }
    },

    submitPayment: function() {
      if (isRealPayment(this)) {
        return this.click('@submitButton');
      }
      return this.click('@stubbedSubmitButton');
    }
  },

  elements: {
    orderSummaryContainer: '#orderSummaryDetailsTop',
    cardNumber: '#cardNumber',
    name: '#cardholderName',
    expiryMonth: '#expiryMonth',
    expiryYear: '#expiryYear',
    securityCode: '#securityCode',
    submitButton: '#submitButton',

    stubbedAuthorisedForm: '.frm-AUTHORISED',
    stubbedSubmitButton: '.frm-AUTHORISED > input[type="submit"]'
  }
};

如果我能够定义两个不同的页面对象，并根据 stubbedPayment 全局选择要导出的对象，我会更喜欢它。例如

let realPaymentPage = {
  commands: {
    verifyLoaded: function() {
      return this.waitForElementVisible('@orderSummaryContainer');
    },

    fillInPaymentDetails: function() {
      this
        .setValue('@cardNumber', '4444333322221111')
        .setValue('@name', 'John Doe')
        .setValue('@expiryMonth', '12')
        .setValue('@expiryYear', '25')
        .setValue('@securityCode', '123');
    },

    submitPayment: function() {
      return this.click('@submitButton');
    }
  },

  elements: {
    orderSummaryContainer: '#orderSummaryDetailsTop',
    cardNumber: '#cardNumber',
    name: '#cardholderName',
    expiryMonth: '#expiryMonth',
    expiryYear: '#expiryYear',
    securityCode: '#securityCode',
    submitButton: '#submitButton'
  }
};

let stubbedPaymentPage = {
  commands: {
    verifyLoaded: function() {
      return this.waitForElementVisible('@authorisedForm');
    },

    fillInPaymentDetails: function() {
      // Do nothing
    },

    submitPayment: function() {
      return this.click('@submitButton');
    }
  },

  elements: {
    authorisedForm: '.frm-AUTHORISED',
    submitButton: '.frm-AUTHORISED > input[type="submit"]'
  }
};

if (browser.globals.stubbedPayment) {
  module.exports = stubbedPaymentPage;
} else {
  module.exports = realPaymentPage;
}

但是当不在页面命令中时，我找不到访问全局变量的方法。这可能吗？或者是否有其他方法可以根据测试环境加载不同的页面对象？

Answer 1

当然是。示例解决方案:

首先让我们创建 Global.js 文件。

在 nightwatch.json 中添加文件路径:

"globals_path": "Global.js"

在 Global.js 中定义 before 方法(它在任何测试之前执行一次):

var self = module.exports = {
    environment: undefined,
    before: function (done) {
       // parseArgumentsAndGetEnv is function you need to implement on your own to find your env param
        self.environment = parseArgumentsAndGetEnv(process.argv);
        console.log("Run against: " + self.environment);

        done();
    }
};

现在在测试中你可以使用这个变量:

if (browser.globals.environment == 'Test') {
   // do something
} else if (browser.globals.environment == 'Prod') {
  // do something else
}