Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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. Protractor is a popular end-to-end testing framework that uses WebDriver to automate interactions between a web application and a browser, widely used to test Angular applications.
In this article, we will learn how to test the CSS properties of an element with the help of Protractor using different methods.
Prerequisites
Installation Requirements:
- Install Protractor:
npm install -g protractor- Update binaries:
webdriver-manager update- Start server:
webdriver-manager start
Setup Configuration
Create a conf.js configuration file for your Protractor project
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://';
}
};
Sample HTML for Testing
Create an HTML file with test elements
<!DOCTYPE html>
<html>
<head>
<title>CSS Property Testing</title>
<style>
.test-element {
color: rgb(255, 0, 0);
font-size: 18px;
background-color: #f0f0f0;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div class="test-element">Test Element for CSS Properties</div>
</body>
</html>
Method 1: Using getCssValue() Method
The getCssValue() method retrieves the computed value of a CSS property from an element
describe('Test CSS property using getCssValue()', () => {
it('should have the correct color and font-size', () => {
browser.get('test.html');
const element = element(by.css('.test-element'));
element.getCssValue('color').then(function(color) {
expect(color).toEqual('rgba(255, 0, 0, 1)');
});
element.getCssValue('font-size').then(function(fontSize) {
expect(fontSize).toEqual('18px');
});
});
});
Method 2: Using getAttribute() Method
The getAttribute() method retrieves inline style attributes from the element
describe('Test CSS property using getAttribute()', () => {
it('should contain correct inline styles', () => {
browser.get('test.html');
const element = element(by.css('.inline-styled'));
element.getAttribute('style').then(function(styleValue) {
expect(styleValue).toContain('color: blue');
expect(styleValue).toContain('font-weight: bold');
});
});
});
Method 3: Using browser.executeScript() Method
The browser.executeScript() method executes JavaScript code in the browser to get computed CSS values
describe('Test CSS property using browser.executeScript()', () => {
it('should retrieve computed styles using JavaScript', () => {
browser.get('test.html');
const element = element(by.css('.test-element'));
browser.executeScript('return window.getComputedStyle(arguments[0]).color;', element)
.then(function(color) {
expect(color).toEqual('rgb(255, 0, 0)');
});
browser.executeScript('return window.getComputedStyle(arguments[0]).backgroundColor;', element)
.then(function(bgColor) {
expect(bgColor).toEqual('rgb(240, 240, 240)');
});
});
});
Running Tests
Execute your tests using the following command
protractor conf.js
Successful test output will display
Test CSS property using getCssValue() ? should have the correct color and font-size 3 specs, 0 failures
Conclusion
Protractor provides multiple methods to test CSS properties: getCssValue() for computed values, getAttribute() for inline styles, and browser.executeScript() for advanced JavaScript-based testing. These methods ensure your web application's visual appearance meets requirements and functions correctly across different browsers.
393 Views
