If you’re using the Protractor automation tool for your web testing, you may occasionally need to change the color of an element. Here’s how to do it.
First, find the element that you want to change the color of. In our example, we’ll use the button element with the id of “change-color-button”:
var button = element(by.id(‘change-color-button’));
Next, use the button’s .getCssValue() method to retrieve the current value of the “color” CSS property:
var currentColor = button.getCssValue(‘color’);
Now, you can use the .executeScript() method to run a JavaScript snippet that will change the value of the “color” CSS property:
browser.executeScript(“arguments[0].style.color = ‘red'”, button);
You can also use this technique to change the value of other CSS properties, such as “background-color” or “font-size”.
Other related questions:
Is protractor a test runner?
No, Protractor is not a test runner.
How to create Page object in protractor?
var Page = require(‘../pageObjects/page’);
var page = new Page();
page.visit(‘http://www.google.com’);
How do you make a protractor background color?
There is no built in way to change the background color of a protractor. However, you could always create a custom CSS class and apply it to the element.
Bibliography
- Using protractor to test link colours [closed] – Stack Overflow
- Style Guide – Protractor – end-to-end testing for AngularJS
- webdriver.WebElement.getCssValue – Protractor
- Using Page Objects to Organize Tests – Protractor
- How to test CSS property of an element using Protractor
- How can i change the css property of an element … – GitHub