Retrieving and Comparing Element Colors in Nightwatch Automation Tests

When writing Nightwatch automated tests, you may need to verify an element's color. The basic approach is to fetch the element's CSS color value and compare it with the expected value.

First, create a custom command

getChatColor: function(cb) {
  const chat = '[ng-click="show()"]';
  this.getCssProperty('@chat', 'background-color', function(result) {
    cb(result.value);
  });
  return this;
},

and place it in a page object file (e.g., chat.js).

In your test case, use the command as follows:

'Test get color': function(client) {
  var chat = client.page.chat();
  let chatColor;
  chat.navigate();
  chat.getChatColor(function(color) {
    chatColor = color;
  });
  client.perform(function() {
    client.assert.equal(chatColor, 'rgba(50, 104, 152, 1)');
  });
}

The screenshot shows the background color as rgb(50, 104, 152), but getChatColor returns an rgba string; you may need to convert between the two formats, noting that the alpha channel ranges from 0 to 1.