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: https://i.sstatic.net/CpPIA.jpg

javascripthtmlcssautomationprotractor

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

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);
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The process of HTML compilation is halted due to the unexpected presence of the forbidden 'null' data type, despite the fact that null cannot actually be a valid value in

Encountering an issue with my HTML code, where the compiler stops at: Type 'CustomItem[] | null | undefined' is not compatible with type 'CustomItem[] | undefined'. Type 'null' cannot be assigned to type 'CustomItem[] ...

htmlangulartypescripttypeerrorngxs

From HTML to Mat Table: Transforming tables for Angular

I am currently facing a challenge with my HTML table, as it is being populated row by row from local storage using a for loop. I am seeking assistance in converting this into an Angular Material table. Despite trying various suggestions and codes recommend ...

javascriptangularangular-material

Tips on causing a div to overflow instead of wrapping onto a new line

Are you looking to design a slider with 3 image containers all in the same row, where the third one overflows instead of wrapping to a new line? Here is an example: Desired Design: https://i.stack.imgur.com/dKyEg.png Current State: https://i.stack.imgu ...

css

Displaying complex JSON data in an HTML format using JavaScript

How can I convert the second array of entities into an HTML format from the JSON data using a for loop or similar method? To access the necessary data, I currently use console.log(data.response[0].entities.urls); $(document).ready(function () { $.getJSO ...

javascripthtmljsonnestedoutput

Utilizing ES6 array methods to convert multidimensional arrays into chart-ready data

Seeking help with converting an array to a specific data format for chart display. The chrart.js library requires data in the following format: dataset = [ { label: 'one', data: []}, {label: 'two', data: []} ]; I ...

javascriptarraysecmascript-6

Is it possible to use the same HTML select/dropdown menu for multiple rows in a table?

I am working with an HTML table that usually has between 10-30 rows, each containing a column for "item name". The drop down menu consists of about 75 products to choose from. In order to reduce the page size, I want to use a single drop down list for all ...

javascriptjqueryhtml

Should we avoid using 'RedirectToAction' with AJAX POST requests in ASP.NET?

As a newcomer to jQuery, Json, and Ajax, I am putting in the effort to grasp the concepts clearly, but I am facing some difficulties. I have an ajax POST Delete method that is currently functional, however, my professor has suggested that I refactor the c ...

javascriptjqueryajaxasp.net-mvc

When loading HTML using JavaScript, the CSS within the HTML is not properly processing. Leveraging Bootstrap 5 might help resolve

Currently utilizing bootstrap 5 for my project. I have a setup in index.html where I am loading the contents of nav.html using JavaScript. However, I am facing an issue wherein the CSS styling for the navbar is not being applied when loaded via JS. Strange ...

javascripthtmljquerycssbootstrap-5

Exploring the dynamic duo of Django and DataTables: a guide on incorporating

Have you cautiously attempted to fetch data using AJAX, and displaying it in a datatable works seamlessly, but the issue arises when attempting to search or sort within the table. It seems that upon doing so, the data is lost, necessitating a page reload. ...

javascriptdjangoajaxdatatable

Assign a new class to the anchor tag that has a distinct ID named "link"

I want to add the CSS class "active" to the anchor tag that contains the ID currently active in the URL. Here's what I've tried, but I'm unable to get window.location.hash to function properly. $( "a[href=' + window.location.hash + &ap ...

jquerycssclassaddition

Why is the image popup feature not functioning properly? What could be causing the issue?

I'm experiencing issues with the functionality of my HTML file and image popup. I've attempted to troubleshoot it multiple times without success. Here is a code snippet for reference: You can view and run the code on CodePen: Open <html> ...

javascriptphphtmlcss

Adjusting the size of the text input without changing the padding

How can I increase the font size to 1rem without changing the height of an input text field that has a padding of 1rem? The goal is to maintain the same height for the input field. Any ideas on how to achieve this? This is my current HTML structure: < ...

htmlcss

What is the best way to utilize a single Google Map component instance across multiple children?

Seeking a method to maintain the same Google Map instance throughout my entire app, as each map load incurs charges... Currently utilizing google-map-react. An instance of a new Map is created in ComponentDidMount, suggesting that it's important to k ...

javascriptreactjsgoogle-map-react

Reposition the element at the bottom of its parent element

I am facing an issue with the HTML structure in my application: <div class="work-item"> <div class="image-container"> </div> <div class="text-container"> </div> </div ...

javascriptjqueryhtmlcss

Adjust the height of a <div> element to fit the remaining space in the viewport or window automatically

I am working with the following HTML code: <html> <BODY> <DIV ID="holder"> <DIV ID="head_area">HEAD CONTENT GOES HERE....</DIV> <DIV ID="main_area">BODY CONTENT GOES HERE</DIV> ...

phpcsshtml

I am seeking a way to conceal list elements according to a specified string input using JavaScript

Looking at the list items inside this div: <div class="container"> <h2>Vanishing Act Game</h2> <div> <li class="list-group-item go" id="item">Door#1</li> <li class="list-group-item go" id="it ...

javascriptcssdjangofrontend

Incorporating interactive buttons within Leaflet popups

I'm facing an issue with adding buttons to a Leaflet popup that appears when clicking on the map. My goal is to have the popup display 2 buttons: Start from Here Go to this Location The desired outcome looks like this sketch: ___________________ ...

javascriptangulartypescriptleaflet

Manipulating contextual selectors

Have you ever tried reverting or overriding attributes from contextual selectors? .card { padding-top: 20px; ... } .card .card-header { padding: 0 20px; } .card .card-header.news { padding-top: 0px; } Do you think it's possible to elimina ...

cssinheritancecss-selectors

A guide to incorporating Material-UI ThemeProvider and WithStyles with Typescript

I've been feeling frustrated lately as I've been dedicating the past few days to migrating my React application from JavaScript to TSX. While I appreciate the type checking that TSX provides, I'm struggling with understanding how to implemen ...

javascriptcssreactjstypescriptmaterial-ui

Transmission of JSON to a C# controller via AJAX results in a Count value of zero in .NET 7

Whenever I attempt to send a JSON object to my controller, the parameter isn't being received. This is the JavaScript code snippet: var input = document.getElementById("input"); input.addEventListener('change', function () { const read ...

javascriptc#jsonajaxasp.net-core