Obtain background colour using protractor
<p>I am a newbie to protractor and what I am looking to do is get the background colour of an element.</p>

<p>So far I have:</p>

<pre><code>var colour = element(by.css("div[class='ng-isolate-scope my-form']")).getCssValue('background-color');
console.log(colour);
</code></pre>

<p>I have tried with both 'background-colour' and 'background-color'.</p>

<p>This console log for the above is as follows</p>

<pre><code> ...{ ptor_: 
   { controlFlow: [Function],
     schedule: [Function],
     setFileDetector: [Function],
     getSession: [Function],
     getCapabilities: [Function],
     quit: [Function],
     actions: [Function],
     touchActions: [Function],
     executeScript: [Function],
     executeAsyncScript: [Function],
     call: [Function],
     wait: [Function],
     sleep: [Function],
     getWindowHandle: [Function],
     getAllWindowHandles: [Function],
     getPageSource: [Function],
     close: [Function],
     getCurrentUrl: [Function],
     getTitle: [Function],
     findElementInternal_: [Function],
     findDomElement_: [Function],
     findElementsInternal_: [Function],
     takeScreenshot: [Function],
     manage: [Function],
     switchTo: [Function],
     driver: 
      Object {
        session_: [Object],
        executor_: [Object],
        flow_: [Object],
        fileDetector_: null },
     element: { [Function] all: [Function] },
     '$': [Function],
     '$$': [Function],
     baseUrl: '',
     rootEl: 'body',
     ignoreSynchronization: true,
     getPageTimeout: 10000,
     params: {},
     ready: 
      Object {
        closure_uid_262032795: 12,
        flow_: [Object],
        stack_: null,
        parent_: null,
        callbacks_: null,
        state_: 'fulfilled',
        handled_: true,
        value_: null,
        queue_: null },
     plugins_: 
      { pluginConfs: [],
        pluginObjs: [],
        assertions: {},
        resultsReported: false },
     resetUrl: 'data:text/html,&lt;html&gt;&lt;/html&gt;',
     trackOutstandingTimeouts_: true,
     mockModules_: [ [Object] ],
     allScriptsTimeout: 11000,
     getProcessedConfig: [Function],
     forkNewDriverInstance: [Function],
     restart: [Function] },
  parentElementArrayFinder: 
   { ptor_: 
      { controlFlow: [Function],
        schedule: [Function],
        setFileDetector: [Function],
        getSession: [Function],
        getCapabilities: [Function],
        quit: [Function],
        actions: [Function],
        touchActions: [Function],
        executeScript: [Function],
        executeAsyncScript: [Function],
        call: [Function],
        wait: [Function],
        sleep: [Function],
        getWindowHandle: [Function],
        getAllWindowHandles: [Function],
        getPageSource: [Function],
        close: [Function],
        getCurrentUrl: [Function],
        getTitle: [Function],
        findElementInternal_: [Function],
        findDomElement_: [Function],
        findElementsInternal_: [Function],
        takeScreenshot: [Function],
        manage: [Function],
        switchTo: [Function],
        driver: [Object],
        element: [Object],
        '$': [Function],
        '$$': [Function],
        baseUrl: '',
        rootEl: 'body',
        ignoreSynchronization: true,
        getPageTimeout: 10000,
        params: {},
        ready: [Object],
        plugins_: [Object],
        resetUrl: 'data:text/html,&lt;html&gt;&lt;/html&gt;',
        trackOutstandingTimeouts_: true,
        mockModules_: [Object],
        allScriptsTimeout: 11000,
        getProcessedConfig: [Function],
        forkNewDriverInstance: [Function],
        restart: [Function] },
     getWebElements: [Function],
     actionResults_: 
      Object {
        closure_uid_262032795: 4569,
        flow_: [Object],
        stack_: null,
        parent_: [Object],
        callbacks_: null,
        state_: 'pending',
        handled_: false,
        value_: undefined,
        queue_: null },
     locator_: Object { using: 'css selector', value: 'body[class=\'ng-scope\']' } },
  then: [Function],
  elementArrayFinder_: 
   { ptor_: 
      { controlFlow: [Function],
        schedule: [Function],
        setFileDetector: [Function],
        getSession: [Function],
        getCapabilities: [Function],
        quit: [Function],
        actions: [Function],
        touchActions: [Function],
        executeScript: [Function],
        executeAsyncScript: [Function],
        call: [Function],
        wait: [Function],
        sleep: [Function],
        getWindowHandle: [Function],
        getAllWindowHandles: [Function],
        getPageSource: [Function],
        close: [Function],
        getCurrentUrl: [Function],
        getTitle: [Function],
        findElementInternal_: [Function],
        findDomElement_: [Function],
        findElementsInternal_: [Function],
        takeScreenshot: [Function],
        manage: [Function],
        switchTo: [Function],
        driver: [Object],
        element: [Object],
        '$': [Function],
        '$$': [Function],
        baseUrl: '',
        rootEl: 'body',
        ignoreSynchronization: true,
        getPageTimeout: 10000,
        params: {},
        ready: [Object],
        plugins_: [Object],
        resetUrl: 'data:text/html,&lt;html&gt;&lt;/html&gt;',
        trackOutstandingTimeouts_: true,
        mockModules_: [Object],
        allScriptsTimeout: 11000,
        getProcessedConfig: [Function],
        forkNewDriverInstance: [Function],
        restart: [Function] },
     getWebElements: [Function],
     actionResults_: 
      Object {
        closure_uid_262032795: 4569,
        flow_: [Object],
        stack_: null,
        parent_: [Object],
        callbacks_: null,
        state_: 'pending',
        handled_: false,
        value_: undefined,
        queue_: null },
     locator_: Object { using: 'css selector', value: 'body[class=\'ng-scope\']' } } }
</code></pre>

<p>All I am after is the elements background colour which I will then compare with what I think it should be. </p>

<p>The element I am trying to obtain the background colour of is</p>

<pre><code>&lt;div class="ng-isolate-scope my-form" ng-show="!model.loading &amp;&amp; activeTab == 'form' &amp;&amp; model.formData != null &amp;&amp; model.formData != undefined" ng-class="model.formData.className" auto-height="" style="height: 144px;"&gt;
</code></pre>

<p>Any help regarding this will be very much appreciated. </p>