WebDriver.IO + Jasmine + PhantomJS Spec Example

nav-menu.spec.js

describe('adamjohnston.co.uk', function() {
  //  since I am testing all features found on the same page
  //  I set url before all the specs.
  beforeAll(function (done) {
    //  elusive browser object, I will find where you're defined!
    browser
      .url('/')  //  in the wdio.config.js I have the base url set to my website.
      .call(done);
  });

  afterAll(function (done) {
    //  closes the browser session
    browser.end(done);  //  not calling jasmine's done function will cause a timeout exception.
  });

  describe('when a user visits index', function () {
    it('should not have navigation visible', function (done) {
      browser
        .getCssProperty('nav[role="navigation"]', 'opacity').then(function (opacity) {
          //  we use a promise to return the css property, in this case opacity
          //  but be aware that this is an object so you will likely want to get it's value.
          expect(opacity.value).toBe(0);
        }).call(done);
    });
  });

  describe('when a user clicks the nav menu button', function () {
    it('should show the navigation', function(done) {
      browser
        .click('#jsNavBtn')  //  webdriver.io uses sizzle so if you've used jQuery you'll be fine.
        .getCssProperty('nav[role="navigation"]', 'opacity').then(function (opacity) {
          expect(opacity.value).toBe(1);
        }).call(done);
    });

    //  because in the last spec we clicked an opened the navigation
    //  in this spec we simply click it again to get the opposite behaviour
    it('should hide navigation if nav menu button is clicked again', function (done) {
      browser
        .click('#jsNavBtn')
        .getCssProperty('nav[role="navigation"]', 'opacity').then(function (opacity) {
          expect(opacity.value).toBe(0);
        }).call(done);
    });
  });
});