如何根据测试环境在夜表中动态加载不同的页面对象?

时间:2019-04-05 08:31:12

标签: javascript nightwatch.js e2e-testing

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

我目前具有测试设置,可以检查我们是否需要在每个命令中使用真实付款或存根付款。

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;
}

但是当我不在page命令中时,我找不到访问全局变量的方法。这可能吗?还是有另一种方法可以根据测试环境加载其他页面对象?

1 个答案:

答案 0 :(得分: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
}