Advanced Techniques

Tricky element selection

Elements that take parameters

Using collections of elements

When you return a collection of elements like this.elements("li#myItems") the resulting "elements" object has some hand methods attached to it: first, last, and all. When you call those methods, the driver will finally query the page for the elements and return what you wanted.

Dropping down to the browser

While in a controller or page object you can drop directly to the browser using this.browser. You have any method available to the browser (found here http://webdriver.io/api.html)

Page Object Inheritance (via extends)

You may have a situation where you have a base page of some kind that will extend to other pages. Let's say we have to create pages for adopting some cute animals. Let's start with our base page.

import BasePage from "path/to/base.page.js"

class BaseAdoptionPage extends BasePage {
  constructor(browser) {
    super(browser)
  }

  availablePets() {
    return this.elements("li.availablePets")
  }

  adoptPetButton() {
    return this.element("button#adoptPet")
  }
}

In the above code you see that our BaseAdoptionPage extends BasePage. Our next page objects will extend BaseAdoptionPage as such:

class KittenAdoptionPage extends BaseAdoptionPage {
  constructor(browser) {
    super(browser)
  }

  addLitterBox() {
    return this.element("button#addLitterBox")
  }

  addCatnip() {
    return this.element("button#addCatnip")
  }
}

class DoggyAdoptionPage extends BaseAdoptionPage {
  constructor(browser) {
    super(browser)
  }

  addBone() {
    return this.element("button#addBone")
  }

  addLeash() {
    return this.element("button#addLeash")
  }
}

The doggy and kitten pages have access to the elements and actions on their inherited pages, in this example that means they'd have access to the availablePets and adoptPetButton elements.3

Skip, only, and other Jest things

If you want to skip a test with Jest, append .skip to the test like so:

test.skip(...)

Additionally, there are a few other handy things you can do with tests. If you want to run only a single test in a particular file you can append .only exactly like above.

Another one is .failing. This will "pass" the test if it is failing, but fail it if it were to start passing. This is a way for us to identify tests that may have a bug associated with them but still keep our builds green. If the bug were to get fixed without our knowledge, the test would then "pass" thereby failing it because we used .failing.

If you want to run only a single file that you are working on you can use npm test path/to/test/file. Combined with .only you can narrow into a single test if you are debugging something.