Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute

Question

Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute

My website has a search feature that displays a warning message when invalid data, such as special characters, is used in the search.

Upon loading the page, the CSS initially loads like this:

<div class="searchError" id="isearchError" style="display: none;">

When entering invalid text and hitting the search button, the above code changes to: display: block; opacity: …; and it also triggers the display of

<div class="marker"></div>

along with an error message.

I attempted using the following code snippet:

var styleValue = element(by.id('ideliveryareaerror')).getCssValue('style');

but ended up with a complex tree structure of the element.

Here's an example of my code:

        var styleValue = element(by.id('isearchError')).getCssValue('style');
        browser.actions().sendKeys(protractor.Key.ENTER).perform();
        browser.sleep(1000);
        console.log(styleValue);
        browser.sleep(1000);

What I aim to achieve is:

Retrieve the value of the style attribute (Expected to be none)
Trigger enter key press with invalid input
Retrieve the value of the style attribute (Expected to be block)
Fetch the content of the error message

Screenshot of my code:

javascript html css automation protractor

Answer 1

Answer №1

When you use getCssValue('style'), what you really need is getCssValue('display'). The getCssValue function retrieves the CSS value, not an HTML attribute. (I am not familiar with protractor, but the method names caught my attention.)

To clarify:

var searchError = element(by.id('isearchError'));
expect(searchError.getCssValue('display')).toBe('none');
browser.actions().sendKeys(protractor.Key.ENTER).perform();
browser.sleep(1000);
expect(getCssValue('display')).toBe(''); // This could also be 'block' or another value
console.log(styleValue);
browser.sleep(1000);

Answer 2

When you use getCssValue('style'), what you really need is getCssValue('display'). The getCssValue function retrieves the CSS value, not an HTML attribute. (I am not familiar with protractor, but the method names caught my attention.)

To clarify:

var searchError = element(by.id('isearchError'));
expect(searchError.getCssValue('display')).toBe('none');
browser.actions().sendKeys(protractor.Key.ENTER).perform();
browser.sleep(1000);
expect(getCssValue('display')).toBe(''); // This could also be 'block' or another value
console.log(styleValue);
browser.sleep(1000);

Answer 3

Answer №2

Have you attempted using the isDisplayed method provided by protractor?
If you want to check if the element is displayed or not, you can use this approach:

expect(element(by.id('ideliveryareaerror')).isDisplayed()).toBe(true);  // (or false)

Furthermore, when using getCssValue, you are dealing with a promise that needs to be resolved, which is why it may not work properly with a simple console.log.
In such cases, you should do it like this:

var styleValue = element(by.id('isearchError')).getCssValue('style')
    .then( function(style) {
        console.log(style);
    });

Answer 4

Have you attempted using the isDisplayed method provided by protractor?
If you want to check if the element is displayed or not, you can use this approach:

expect(element(by.id('ideliveryareaerror')).isDisplayed()).toBe(true);  // (or false)

Furthermore, when using getCssValue, you are dealing with a promise that needs to be resolved, which is why it may not work properly with a simple console.log.
In such cases, you should do it like this:

var styleValue = element(by.id('isearchError')).getCssValue('style')
    .then( function(style) {
        console.log(style);
    });

Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute

Answer №1

Answer №2

Similar questions

What is the best way to display a page within a div when clicking in Yii?

How to rotate a SVG transformation matrix around its center point

Employing Ajax.Updater to retrieve a javascript file (prototype.js)

Unable to utilize jQuery's .append(data) function due to the need to use .val(append(data)) instead

Accessing a JSON value in SCSS for localization

javascriptHow to specify the character set in a Data URI

My jQuery form is not functioning properly upon initialization

Unable to locate the "fcm-node" module in Node.js with TypeScript

How to customize a disabled paper-input element in Polymer 1.0?

Distinguishing between el and $el in Backbone.Js: What sets them apart?

What is the best way to switch between light and dark themes with the ability to locally store the current theme?

Is there a way to modify Style Properties in JavaScript by targeting elements with a specific class name using document.getElementsByClassName("Class_Name")?

Updating a global variable in Angular after making an HTTP call

Scrapy spider malfunctioning when trying to crawl the homepage

Steps to successfully click a button once the popup window has finished loading entirely

Ways to identify the moment jQuery datatable is initialized and populated with information

Is there a way to modify the text within a hyperlink using jQuery?

What is the best way to set a newly selected HTML option as the first choice?

Updating a d3.js force-directed graph may retain previous JSON data during the reloading process

Can CSS calc() achieve modulus behavior?