Creating Controllers

To fully create a controller, you will need whatever page objects you intend to interact with. You can plan out the controller, but with out the actual page objects, nothing will work. If you are coming from the Creating a Page Object tutorial, you should be all good to go.

Basic Shell

Much like the page objects lesson, here is a basic shell of a controller we will start with.

import BaseController from './base.controller.js'

/** 
 * @extends BaseController
 */
class MyController extends BaseController {
  constructor(browser) {
    super(browser)
  }

  // Controller functions...

}

export default MyController

Adding Page Objects

Adding the page objects is easy. We first have to import the WebPageObjects module (which we should have added our new page object to!) at the top of the file, and then we can instantiate the page objects we need for the controller within the controllers constructor.

import BaseController from './base.controller.js'
import * as WebPageObjects from '~/src/page_objects/web/webPageObjects.js' // <-- Import WebPageObjects module to get all page objects

/** 
 * @extends BaseController
 */
class MyController extends BaseController {
  constructor(browser) {
    super(browser)
    this.mySweetPage = new WebPageObjects.MySweetPage(browser) // <-- adding a page!
    this.anotherPage = new WebPageObjects.AnotherPage(browser) // <-- adding a page!
    this.myNewPage = new WebPageObjects.MyNewPage(browser) // <-- adding a page!
  }

  // Controller functions...

}

export default MyController

Functions

With the page objects in place, you can now create functions that chain together various actions in to longer commands that the controller would provide. Note that much like our page objects, we need to write our functions in the async/await style. Rule of thumb is if we are going to interact with the browser, it will most likely need to be an async/await function.

import BaseController from './base.controller.js'
import * as WebPageObjects from '~/src/page_objects/web/webPageObjects.js'

/** 
 * @extends BaseController
 */
class MyController extends BaseController {
  constructor(browser) {
    super(browser)
    this.mySweetPage = new WebPageObjects.MySweetPage(browser)
    this.anotherPage = new WebPageObjects.AnotherPage(browser)
    this.myNewPage = new WebPageObjects.MyNewPage(browser)
  }

  async loginAndDoSomething(name, password) { // <-- adding a function!
    await this.mySweetPage.visit()
    await this.mySweetPage.login(name, password)
    await this.mySweetPage.verifyHeader()
    await this.myNewPage.visit()
    await this.myNewPage.doSomething()
  }

  async getTextFromWeirdDiv() { // <-- adding a function!
    await this.anotherPage.waitForAvatar()
    return await this.anotherPage.weirdDiv.getText()
  }

}

export default MyController

Adding to the Client

We now have our controller. The next step is to add it to the Client.

At the top of src/clients/web/client.js import your controller like so:

import MyController from '~/src/controllers/path/to/myController.controller.js'

Then use it in the constructior of the client:

this.myController = new MyController(browser)

And there we go! The client now has our new controller integrated with it.