I am a newbie to protractor and what I am looking to do is get the background colour of an element.
So far I have:
var colour = element(by.css("div[class='ng-isolate-scope my-form']")).getCssValue('background-color');
console.log(colour);
I have tried with both 'background-colour' and 'background-color'.
This console log for the above is as follows
...{ 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,<html></html>',
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,<html></html>',
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,<html></html>',
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\']' } } }
All I am after is the elements background colour which I will then pare with what I think it should be.
The element I am trying to obtain the background colour of is
<div class="ng-isolate-scope my-form" ng-show="!model.loading && activeTab == 'form' && model.formData != null && model.formData != undefined" ng-class="model.formData.className" auto-height="" style="height: 144px;">
Any help regarding this will be very much appreciated.
I am a newbie to protractor and what I am looking to do is get the background colour of an element.
So far I have:
var colour = element(by.css("div[class='ng-isolate-scope my-form']")).getCssValue('background-color');
console.log(colour);
I have tried with both 'background-colour' and 'background-color'.
This console log for the above is as follows
...{ 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,<html></html>',
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,<html></html>',
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,<html></html>',
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\']' } } }
All I am after is the elements background colour which I will then pare with what I think it should be.
The element I am trying to obtain the background colour of is
<div class="ng-isolate-scope my-form" ng-show="!model.loading && activeTab == 'form' && model.formData != null && model.formData != undefined" ng-class="model.formData.className" auto-height="" style="height: 144px;">
Any help regarding this will be very much appreciated.
Share Improve this question asked Jan 5, 2016 at 14:46 Husain AshrafHusain Ashraf 2511 gold badge5 silver badges13 bronze badges2 Answers
Reset to default 7You need to resolve the promise to get the value. If you want to print it using console.log do the following:
$('div.my-form').getCssValue('background-color').then(function(bgColor) {
console.log(bgColor);
});
Just to add to the @Andres's answer and, taking into account that:
All I am after is the elements background colour which I will then pare with what I think it should be
Since you need to pare the background color, note that expect() in Protractor knows what a promise is and can explicitly resolve it before making an expectation check. In other words, you don't need to use then() if all you need is to pare the resolved value of a promise:
expect($('div.my-form').getCssValue('background-color')).toEqual("rbga(255, 255, 255)");