Nightwatch/Selenium test vs CasperJS/PhantomJS test

README.md

This is roughly the same test run in both casper and nightwatch.

casper.js

casper.options.viewportSize = {
  width: 1280,
  height: 600
};

casper.test.begin('Sidebar - Category archive - Sticky widgets', function suite(test) {
  var pageUrl = 'http://elitedaily.com/category/humor/';

  var stickyStartPx = 0;

  casper.start(pageUrl);

  casper.waitForSelector('.ad-rectangle-unit', function () {
    test.assertExists('.trending-widget-sidebar', 'There is a trending widget sidebar that will become sticky');
    test.assertExists('.ad-rectangle', 'There is an ad-rectangle that will become sticky');
    test.assertExists('.ad-rectangle-unit', 'There is an ad unit div in the ad rectangle');

    test.assertExists('.sidebar-line-break', 'There is a line break in the sidebar to determine where to start sticky');
    stickyStartPx = casper.evaluate(function () {
      return jQuery('.sidebar-line-break').offset().top;
    }) + 100;

    test.assertEvalEquals(function () {
      return jQuery('.trending-widget-sidebar').css('position');
    }, 'static', 'The widget sidebar is pos static');

    test.assertEvalEquals(function () {
      return jQuery('.trending-widget-sidebar').css('top');
    }, 'auto', 'The widget sidebar is top auto');

    test.assertEvalEquals(function () {
      return jQuery('.ad-rectangle').css('display');
    }, 'block', 'The ad widget display is block');

    test.assertEvalEquals(function () {
      return jQuery('.ad-rectangle').css('position');
    }, 'relative', 'The ad widget position is relative');
  });

  casper.then(function () {
    casper.scrollTo(0, stickyStartPx);
    casper.page.scrollPosition = { top: stickyStartPx, left: 0 };
  });

  // Wait and scroll again since the first triggers dom loading infinite scroll
  casper.waitForResource('page/2/');

  casper.then(function () {
    casper.scrollTo(0, stickyStartPx);
    casper.page.scrollPosition = { top: stickyStartPx, left: 0 };
  });

  casper.wait(500, function () {
    test.assertEval(function () {
      return jQuery('.trending-widget-sidebar').hasClass('sticky');
    }, 'The widget sidebar is pos fixed');

    test.assertEvalEquals(function () {
      return jQuery('.trending-widget-sidebar').css('top');
    }, '70px', 'The widget sidebar is top 70px');

    test.assertEvalEquals(function () {
      return jQuery('.ad-rectangle').css('display');
    }, 'block', 'The ad widget display is block');

    test.assertEvalEquals(function () {
      return jQuery('.ad-rectangle').css('position');
    }, 'fixed', 'The ad widget position is fixed');

    test.assertEvalEquals(function () {
      return jQuery('.ad-rectangle').css('bottom');
    }, '0px', 'The ad widget bottom is 0px');
  });

  casper.run(function () {
    test.done();
  });
});

nightwatch.js

module.exports = {
  before: function (client) {
    client.resizeWindow(1300, 600);
  },
  'Sticky widgets on category archive': function (client) {
    client.url('http://elitedaily.com/category/humor/');

    client.assert.elementPresent('.ad-rectangle-unit');
    client.assert.elementPresent('.sidebar-line-break');

    client.assert.elementPresent('.trending-widget-sidebar')
    client.assert.cssProperty('.trending-widget-sidebar', 'position', 'static');
    client.assert.cssProperty('.trending-widget-sidebar', 'top', 'auto');
    client.assert.cssClassNotPresent('.trending-widget-sidebar', 'sticky');

    client.assert.elementPresent('.ad-rectangle');
    client.assert.cssProperty('.ad-rectangle', 'display', 'block');
    client.assert.cssProperty('.ad-rectangle', 'position', 'relative');

    client.getLocation('.sidebar-line-break', function (result) {
      client.execute('scrollTo(0,' + result.value.y + ' )');
    })

    client.assert.cssProperty('.trending-widget-sidebar', 'top', '70px');
    client.assert.cssProperty('.ad-rectangle', 'display', 'block');
    client.assert.cssProperty('.ad-rectangle', 'position', 'fixed');
    client.assert.cssProperty('.ad-rectangle', 'bottom', '0px');
    client.assert.cssClassPresent('.trending-widget-sidebar', 'sticky');

    client.end();
  }
};