CodeceptJS Page Object Models - yelenagotraining/E2EFrameworks GitHub Wiki

Page Object Models Pattern in CodeceptJs

Create a file for example LoginPageObject.js
Inside the file you can store and reference page objects in a following format

const { I } = inject();

module.exports = {
    shipFromDropDwon: `.always-opens-down`,
    deliverToInputBox: `#input-autocomplete-0RFZQss1KVI4`,
    commercialToggle: `#commercialsType-originalSite-aE9S1lScb`,
    shipmentItemsTypeDropDown: `#dropdown-box-gkweGxEBdaFn0`,
    shipmentItemsDimLength: `input#input-element-cJi6etUNdaFn0`,
    shipmentItemsDimWidth: `#input-element-cJi6ynFgdaFn0`,
    shipmentItemsDimHeight: `#input-element-cJi6QTlpdaFn0`,
    shipmentItemsDimNMFC: `#input-element-cJi6GUJVVIwP0daFn0`,
    shipmentItemsDimSub: `#input-box-TsZmmXvSVIwP0daFn0`,
    shiptmentItemsClass: `#input-box-TsZm7jnZhXDxVIwP0daFn0`,
    shipmentItemsTotalWeight: `#input-element-cJi6R2DeVIwP0daFn0`,
    selectCarrierButton: `#qDetails-submitQuoteDetailsBtn-E960x2`

}

Inside the codecept.conf.js, in the include section, add the page object file:

  include: {
    I: './steps_file.js',
    LoginPageObjects: './pages/LoginPageObject.js'
  },

inside your script, you can just call:

I.Click(LoginPageObjects.selectCarrierButton);