How to test an element's CSS properties using Protractor?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to test an element's CSS properties using Protractor?

王林

Aug 27, 2023 am 10:37 AM

如何使用 Protractor 测试元素的 CSS 属性？

Testing CSS properties is critical to ensuring the quality of your web application. CSS properties determine how elements appear on a web page, such as font size, color, and layout. Testing CSS properties can help detect errors and ensure that your application looks and functions as expected. A tool called Protractor provides developers with different ways to test CSS properties.

Protractor is a popular end-to-end testing framework that uses WebDriver to automate interactions between web applications and browsers. It is widely used for testing Angular applications, but can be used for testing other web applications as well.

In this article, we will learn how to test the CSS properties of an element with the help of Protractor. We will learn different ways to perform testing operations.

Steps required to test an element’s CSS properties using Protractor

Using Protractor to test the CSS properties of an element requires the following steps.

Step 1: Set up the protractor

To use Protractor, make sure it is installed on your system along with the required dependencies.

Install Protractor -

npm install -g protractor

Update binaries -

webdriver-manager update

Run the server -

webdriver-manager start

Step 2: Create Conf.js file

The conf.js file in the Protractor project is a configuration file that contains various settings and options for the Protractor test suite. Let's create a file called 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 Test Specification

After setting up Protractor, create a new test specification file with any name, such as test.js, etc. We can create a new file in the specs directory of the 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 use the class test-class to test the color attribute of the element. We expect the color attribute to evaluate to rgba(53, 163, 59, 0.2).

Step 4: Create HTML file containing test elements

<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 the terminal -

protractor conf.js --suite css-property

In the above command, conf.js is the configuration file of the Protractor project, and --suite css-property specifies that only 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 similar to this -

Test CSS properties of elements

✓ Should have the correct color

1 specification, 0 failures

Different ways to test CSS properties using Protractor

Method 1: Use GetCssValue() method

The first method provided by Protractor is the getCssValue() method, which is used to obtain the calculated value of the CSS property of the element. This method takes the name of a CSS property as a parameter and returns its calculated value. Here is the syntax and examples -

grammar

The following is the syntax for testing CSS properties using Protractor’s getCssValue() method.

const element = element(by.css('.test-class'));
expect(element.getCssValue('color')).toEqual('rgba(53, 163, 59, 0.2)');

Example

In the given example, we use the class test class to test the color attribute of the element. The expected calculated value for 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: Use GetAttribute() method

The second way to test the CSS attributes of an element is to use the getAttribute() method to get the value of the element's style attribute. The style attribute contains the inline style applied to the element. Here is the syntax and examples -

grammar

The following is the syntax for testing CSS attributes using Protractor's getAttribute() method.

const element = element(by.css('.test-class'));
expect(element.getAttribute('style')).toContain('color: green;');

Example

In the given example, we are testing whether the style attribute of the element of 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: Use the Browser.executeScript() method

The third method that can be used to test CSS properties is the browser.executeScript() method, which executes JavaScript code in the browser context and obtains the calculated value of the CSS property. Here is the syntax and examples -

grammar

The following is the syntax for testing CSS properties using Protractor's browser.executeScript() method.

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 execute JavaScript code in the browser context to get the calculated value of the color attribute of the element with the test class class. Here we use the window.getCompulatedStyle() method to get the calculated 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)');
      });
   });
});

结论

测试元素的 CSS 属性是确保应用程序具有视觉吸引力和功能性的重要步骤。一个非常重要的工具 Protractor 用于以有效的方式执行此类测试，以测试使用 getCssValue() 和 getAttribute() 方法的元素的 CSS 属性。在本文中，我们了解了进行测试的完整步骤，现在如果您已按照本文中概述的步骤进行操作，则可以轻松设置 Protractor 并创建测试规范来测试元素的 CSS 属性。事实证明，使用 Protractor 测试 Web 应用程序（包括 Angular 应用程序）是可靠且高效的。有了这些知识，我们就可以编写有效的端到端测试，涵盖 Web 应用程序功能的所有方面，包括视觉外观。

The above is the detailed content of How to test an element's CSS properties using Protractor?. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

Demystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AM

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In

Create a JavaScript Contact Form With the Smart Forms FrameworkMar 07, 2025 am 11:33 AM

This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.

Adding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PM

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

Working With GraphQL CachingMar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Making Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Classy and Cool Custom CSS Scrollbars: A ShowcaseMar 10, 2025 am 11:37 AM

In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand

Show, Don't TellMar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about

What the Heck Are npm Commands?Mar 15, 2025 am 11:36 AM

npm commands run various tasks for you, either as a one-off or a continuously running process for things like starting a server or compiling code.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

1 months agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

1 months agoByDDD

R.E.P.O. Best Graphic Settings

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

1 weeks agoByDDD

Hot Tools

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

SublimeText3 English version

Recommended: Win version, supports code prompts!

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.