Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to test CSS property of an element using Protractor?
Testing CSS properties is crucial in ensuring the quality of a web application. CSS properties determine how elements are displayed on a webpage, such as font size, color, and layout. Testing CSS properties can help detect bugs and ensure that the application looks and functions as intended. A tool known as a protractor provides developers with different methods to test CSS properties.
Protractor is a popular end-to-end testing framework that uses WebDriver to automate interactions between a web application and a browser. It is widely used to test Angular applications, but can also be used to test other web applications.
In this article, we will learn how to test the CSS properties of an element with the help of a Protractor. We will learn different methods to perform the test operation.
Steps Required to test the CSS Property of an Element Using Protractor
The below steps are to be needed to test the CSS properties of an element using the Protractor.
Step 1: Setup the Protractor
To work with a protractor, make sure it is installed in your system along with the required dependencies.
Install the protractor −
npm install -g protractor
Update the binaries −
webdriver-manager update
Run the server −
webdriver-manager start
Step 2: Create a Conf.js File
The conf.js file in a Protractor project is the configuration file that contains various settings and options for the Protractor test suite. Let’s create this file with the name conf.js
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['spec.js'],
capabilities: {
browserName: 'chrome'
},
onPrepare: function () {
browser.manage().window().maximize();
},
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000
},
baseUrl: 'file://' + __dirname + '/',
onPrepare: function () {
browser.resetUrl = 'file://';
}
};
Step 3: Create a Test Spec
Once we have set up Protractor, create a new test spec file with any name like test.js, etc. We can create a new file in the specs directory of your Protractor project.
describe('Test CSS property of an element', () => {
it('should have the correct color', () => {
browser.get('https://tutorialspoint.com');
const element = element(by.css('.test-class));
expect(element.getCssValue('color')).toEqual('rgba(53, 163, 59, 0.2)');
});
});
In the above code, we are testing the color property of an element with the class test-class. We expect the computed value of the color property to be rgba(53, 163, 59, 0.2).
Step 4: Create an HTML File Containing the Test Element
<html>
<head>
<title>Testing</title>
</head>
<body>
<!-- Test element -->
<div class="test-class"
style="color: rgba(53, 163, 59, 0.2)">
Inner text
</div>
</body>
</html>
Step 5: Run the Test
To run the test, use the following command in your terminal −
protractor conf.js --suite css-property
In the above command, conf.js is the configuration file for your Protractor project and --suite css-property specifies that only the tests in the css-property suite should be run.
After running the test, you can view the test results in the terminal. If the test passes, you will see a message like this −
Test CSS property of an element
✓ should have the correct color
1 spec, 0 failures
Different Methods to test the CSS Property Using Protractor
Method 1: Using GetCssValue() Method
The first method that the protractor provides is the getCssValue() method which is used to get the computed value of a CSS property of an element. This method takes the name of the CSS property as an argument and returns its computed value. Below is the syntax and example −
Syntax
Below is the syntax for testing the CSS property using the getCssValue() method of the protractor.
const element = element(by.css('.test-class'));
expect(element.getCssValue('color')).toEqual('rgba(53, 163, 59, 0.2)');
Example
In the given example, we are testing the color property of an element with the class test class. The expected computed value of the color property is rgba(53, 163, 59, 0.2).
describe('Test CSS property of an element using getCssValue()', () => {
it('should have the correct color', () => {
browser.get('https://example.com');
const element = element(by.css('.test-class'));
element.getCssValue('color').then(function(value) {
expect(value).toEqual('rgba(53, 163, 59, 0.2)');
});
});
});
Method 2: Using GetAttribute() Method
The second method to test the CSS properties of an element is to use the getAttribute() method to get the value of the style attribute of the element. The style attribute contains inline styles applied to the element. Below is the syntax and example −
Syntax
Below is the syntax for testing the CSS property using the getAttribute() method of the protractor.
const element = element(by.css('.test-class'));
expect(element.getAttribute('style')).toContain('color: green;');
Example
In the given example, we are testing if the style attribute of an element with the class test-class contains the CSS property color: green;
describe('Test CSS property of an element using getAttribute()', () => {
it('should have the correct color', () => {
browser.get('https://example.com');
const element = element(by.css('.test-class'));
element.getAttribute('style').then(function(value) {
expect(value).toContain('color: green);
});
});
});
Method 3: Using Browser.executeScript() Method
The third method that can be used to test the CSS property is the browser.executeScript() method that executes the JavaScript code in the browser context and gets the computed value of a CSS property. Below is the syntax and example −
Syntax
Below is the syntax for testing the CSS property using the browser.executeScript() method of the protractor.
const element = element(by.css('.test-class'));
const color = browser.executeScript('return window.getComputedStyle(arguments[0]).getPropertyValue("color");', element);
expect(color).toEqual('rgba(53, 163, 59, 0.2)');
Example
In the given example, we are executing JavaScript code in the browser context to get the computed value of the color property of an element with the class test-class. Here we have used the window.getComputedStyle() method to get the computed style of the element and the getPropertyValue() method to get the value of the color property.
describe('Test CSS property of an element using browser.executeScript()', () => {
it('should have the correct color', () => {
browser.get('https://example.com');
const element = element(by.css('.test-class'));
browser.executeScript('return window.getComputedStyle(arguments[0]).color;', element).then(function(value) {
expect(value).toEqual('rgba(53, 163, 59, 0.2)');
});
});
});
Conclusion
Testing the CSS properties of an element is an essential thing to be done for ensuring that the application is visually appealing and functional. A very important tool called Protractor is used to perform such testing in an effective way to test the CSS properties of an element that uses the getCssValue() and getAttribute() methods. In the article, we learned the complete steps to do the testing and by now if you have followed the steps outlined in this article, you can easily set up Protractor and create a test spec to test the CSS properties of an element. The use of Protractor in testing web applications, including Angular applications, has proven to be reliable and efficient. With this knowledge, we can write effective end-to-end tests that cover all aspects of web application functionality, including visual appearance.
198 Views
