Checking the elements after the CSS selector in Protractor for content verification

Question

Checking the elements after the CSS selector in Protractor for content verification

My HTML document contains the following element:

HTML:

<hmtl>
    <head>
        <style>
            label::after {
            content: " *"
            }
        </style>
    </head>
    <body>
        <label> I'm mandatory</label>
    </body>
</hmtl>

When rendered in a web browser, it displays as:

I'm mandatory *

Query Selector

>getComputedStyle(document.querySelector('label')).content
<"normal"

However, instead of seeing "*", I get the result "normal". This confuses me as to where this is coming from. Is my approach correct for testing the content of the ::after CSS selector?

I'm attempting to verify if there is a "*" after the label, yet unable to extract the value of the "content" property accurately. Once I am able to locate it using the browser DOM API, I intend to test this functionality in Protractor.

Update

After finding guidance on - Selenium WebDriver get text from CSS property "content" on a ::before pseudo element, I still question how to conduct this test using Protractor.

css selenium css-selectors protractor pseudo-element

Answer 1

Answer №1

Understanding Window.getComputedStyle()

The Window.getComputedStyle() function allows you to retrieve an object that contains the computed values for all CSS properties of a specific element. It takes into account active stylesheets and resolves any basic computations within those values. You can access individual CSS property values using APIs provided by the returned object or by indexing with the CSS property names.

Syntax:

var style = window.getComputedStyle(element [, pseudoElt]);

element
    Specifies the Element for which you want to retrieve the computed style.
pseudoElt (Optional)
    A string that specifies the pseudo-element to match. If omitted or set to null, it applies to real elements.

The style returned is a live CSSStyleDeclaration object, meaning it automatically updates when the element's styles change.

You may also find relevant information in this discussion on selecting elements with pseudo-elements in WebDriver

Working with Pseudo-Elements

The getComputedStyle() method can extract style information from pseudo-elements like ::after, ::before, ::marker, and ::line-marker.

For example, consider this HTML snippet inside a <style> tag:

<style>
    label::after {
    content: " *"
    }
</style>

When implemented as follows:

<label> I'm mandatory</label>

To retrieve this generated content, you would execute the following script:

var label = document.querySelector('label'); 
var result = getComputedStyle(label, ':after').content;

console.log('the generated content is: ', result); // outputs ' *'

Additional Resources

CSS Pseudo-Elements Module Level 4

Answer 2

Understanding Window.getComputedStyle()

The Window.getComputedStyle() function allows you to retrieve an object that contains the computed values for all CSS properties of a specific element. It takes into account active stylesheets and resolves any basic computations within those values. You can access individual CSS property values using APIs provided by the returned object or by indexing with the CSS property names.

Syntax:

var style = window.getComputedStyle(element [, pseudoElt]);

element
    Specifies the Element for which you want to retrieve the computed style.
pseudoElt (Optional)
    A string that specifies the pseudo-element to match. If omitted or set to null, it applies to real elements.

The style returned is a live CSSStyleDeclaration object, meaning it automatically updates when the element's styles change.

You may also find relevant information in this discussion on selecting elements with pseudo-elements in WebDriver

Working with Pseudo-Elements

The getComputedStyle() method can extract style information from pseudo-elements like ::after, ::before, ::marker, and ::line-marker.

For example, consider this HTML snippet inside a <style> tag:

<style>
    label::after {
    content: " *"
    }
</style>

When implemented as follows:

<label> I'm mandatory</label>

To retrieve this generated content, you would execute the following script:

var label = document.querySelector('label'); 
var result = getComputedStyle(label, ':after').content;

console.log('the generated content is: ', result); // outputs ' *'

Additional Resources

CSS Pseudo-Elements Module Level 4

Answer 3

Answer №2

const name = document.querySelector('name'); // "John";

console.log(name);


const nameAfter = getComputedStyle(name, ':after').content;

console.log(nameAfter == "John");

name::before {
  content: " *"
}

<name> I go by John</name>

Answer 4

const name = document.querySelector('name'); // "John";

console.log(name);


const nameAfter = getComputedStyle(name, ':after').content;

console.log(nameAfter == "John");

name::before {
  content: " *"
}

<name> I go by John</name>

Answer 5

Answer №3

My inquiry pertains specifically to protractor, so I am sharing the solution that resolved my issue. The initial confusion arose when I was receiving "normal" instead of " *".

>getComputedStyle(document.querySelector('label')).content
<"normal"

It turns out that ::after generates a pseudo child element within the label element.

Upon inspecting the <label> element in Chrome, I discovered the following HTML structure:

<label>
    I'm mandatory
    ::after
</label>

When I selected the <label> element and checked the Computed tab, the value for the content property appeared as normal.

However, upon clicking on the ::after pseudo-element, the Computed tab displayed the content property with a value of " *".

As pointed out in other responses, utilizing getComputedStyle() with the pseudo element as the second parameter is crucial for retrieving CSS property values for "::after". The challenge lies in the fact that protractor does not support an equivalent function like getComputedStyle(), thereby requiring us to resort to browser.executeScript() as illustrated below:

let labelHeader = 'I'm mandatory *';
// When implementing this in a real test scenario, the label element would be extracted from its parent
// container and passed as a parameter to browser.executeScript().

let label = element(by.css('label'));
browser.executeScript("return window.getComputedStyle(arguments[0], ':after').content",
                       label)
    .then ((suffixData: string) => {
     // The returned suffixData is '" *"', enclosed in double quotes.
     // Removing the first and last double quote characters

         suffixData = suffixData.slice(1, suffixData.length - 1);
         labelText += suffixData;
         expect(labelText).toBe(labelHeader);
     });

Answer 6

My inquiry pertains specifically to protractor, so I am sharing the solution that resolved my issue. The initial confusion arose when I was receiving "normal" instead of " *".

>getComputedStyle(document.querySelector('label')).content
<"normal"

It turns out that ::after generates a pseudo child element within the label element.

Upon inspecting the <label> element in Chrome, I discovered the following HTML structure:

<label>
    I'm mandatory
    ::after
</label>

When I selected the <label> element and checked the Computed tab, the value for the content property appeared as normal.

However, upon clicking on the ::after pseudo-element, the Computed tab displayed the content property with a value of " *".

As pointed out in other responses, utilizing getComputedStyle() with the pseudo element as the second parameter is crucial for retrieving CSS property values for "::after". The challenge lies in the fact that protractor does not support an equivalent function like getComputedStyle(), thereby requiring us to resort to browser.executeScript() as illustrated below:

let labelHeader = 'I'm mandatory *';
// When implementing this in a real test scenario, the label element would be extracted from its parent
// container and passed as a parameter to browser.executeScript().

let label = element(by.css('label'));
browser.executeScript("return window.getComputedStyle(arguments[0], ':after').content",
                       label)
    .then ((suffixData: string) => {
     // The returned suffixData is '" *"', enclosed in double quotes.
     // Removing the first and last double quote characters

         suffixData = suffixData.slice(1, suffixData.length - 1);
         labelText += suffixData;
         expect(labelText).toBe(labelHeader);
     });

Checking the elements after the CSS selector in Protractor for content verification

Update

Answer №1

Understanding Window.getComputedStyle()

Working with Pseudo-Elements

Additional Resources

Answer №2

Answer №3

Similar questions

Why do browsers, like Chrome, fail to update the .css file after making edits on a page? Is there a workaround for this issue?

"Step-by-step guide on positioning a video in the center over another

What is the method for obtaining the CSS text content from an external stylesheet?

How to Align an Icon to the Right in a Bootstrap 4 Modal Title

Which specific transitionend (or animationend) event should I use for this application?

Tips for recognizing and changing the frame source using Selenium

table with stationary header

What is the best way to increase padding in a Vuetify view element?

Mistake in Selenium: Incorrect element selection within for loop

The issue with the left border color not functioning in JavaScript

Learn how to troubleshoot and resolve a bug in the mobile Chrome browser that pertains to the position fixed feature

A step-by-step guide on selecting multiple checkboxes with C# in Selenium

Header and footer not as clingy as advertised

TimeoutError - Scraping Images from Google Using Selenium

Is it feasible to achieve this layout using only CSS in Windows Internet Explorer 6?

Change element position to relative while scrolling

I want to adjust the size of a <div> element as an image is being resized using Bootstrap's "img-responsive" class

Discover the best practices for integrating media queries using Radium within Material UI components

The verification of a button's presence in Robot framework fails after the button has been clicked

Is it possible to utilize CSS variables within a font lineup and ensure compatibility with older browsers?