Storing the result of browser.executeScript in a variable with Protractor

I'm facing a challenge in storing the value of browser.executeScript within a local variable in my it block. In some cases, it returns null which is not desired.

I've experimented with different approaches but haven't found a reliable solution yet

browser.executeScript('$("txtName").css("border-left-color");').then(function (color) {
    console.log("Color value is: " + color);
});

In addition to that

function returnColor() {
    var result = browser.executeScript('$("#txtName").css("border-left-color");');
    return result;
}

function getColorCode() {
    var result = returnColor().then(function(data) {
        console.log("Output is: " + data);
        return data;
    });

    return result;
}

I'm using this code in my spec as follows:

iit('', function() {        
    
         browser.executeScript('$("txtName").css("border-left-color");').then(function (color) {
            console.log("Color value is: " + color);
        });

        returnColor();
    
    
    });

I would greatly appreciate any guidance on how to resolve this issue effectively.

Answer №1

Ensure that your script includes a return statement:

function getColorValue() {
    return browser.executeScript('return $("#txtName").css("border-left-color");');
}

Alternatively, you can address the issue using the getCssValue() method:

var element = element(by.id("txtName"));
element.getCssValue("border-left-color").then(function (color) {
    console.log(color);
});

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

What is the method to move the h1 tag slightly to the right?

Whenever I use HTML's <h1>Heading Here</h1> tag, the heading appears too close to the left side of the browser window. I would like it to shift slightly towards the right side (not centered though). How can I achieve this adjustment? Can ...

Javascript puzzle - I have 99 obstacles

...but a malfunction isn't one. Hey there, I am new to learning so I apologize for the seemingly simple question. I'm experimenting with a theoretical logic statement that would work using javascript. For instance: if (issues == 99) { malfunct ...

Vue alert: The instance does not have a defined "hp" property or method, but it is referenced during rendering

Below is the code snippet that I am currently working with: var example1; var hp = ["p"]; document.addEventListener("DOMContentLoaded", function(event) { hp = ["x"]; example1 = new Vue({ el: '#example-1', data: { iLoveMysel ...

Is there a way in Angular2 to append a class name from a variable to the host element without removing the current classes?

I am facing a challenge where I have a class name stored in a variable and I need to apply it to the host element of my Angular2 component. However, I am struggling to find a solution for this. While I can easily add a constant string as a class using Hos ...

Error: Syntax error detected. Unexpected blank space found. Expecting either "-" symbol, identifier, or variable

Error: Syntax error: unexpected '' (T_ENCAPSED_AND_WHITESPACE), expecting '-' or identifier (T_STRING) or variable (T_VARIABLE) or number (T_NUM_STRING) in C:\xampp\htdocs\Source Code\displaysalesdetailed.php on line ...

Strange behavior observed in the Datepicker, possibly linked to the blur event

I'm facing a challenge with the Datepicker feature. When I blur, the calendar disappears if the Datepicker was active, but the focus remains on the input field. As a result, I am unable to trigger the Datepicker again by clicking on the input field. T ...

Testing Restangular with multiple promises using Jasmine

Currently, I am attempting to utilize Jasmine to test if my array (storage) has gained an additional item. Despite having multiple promise chains, I am unable to access the first one as nothing seems to occur within the promise (.then). Below is my test : ...

Ways to toggle the expansion and collapse of multiple divs efficiently with jQuery without duplicating code

I am trying to create a script that will expand and collapse a div containing a paragraph when the header text above it is clicked. <div class="container"> <h3><span class="toggler">Click here to toggle text</span></h3> <d ...

Is it possible to use Vuejs v-model for a complete form instead of individual inputs?

Note: This solution is applicable for Vue 2.X I am currently working on a unique Vue.js component that has the ability to generate "custom" forms. This component essentially functions as a standalone form with multiple input fields. Users have the option ...

JavaScript is causing performance issues in Selenium with Python

I am facing a challenge with web scraping a site that utilizes JavaScript/AJAX to load more content as you scroll down. My setup involves Python 3.7 and Selenium Chrome in headless mode. However, I've noticed that as the scraping process continues, th ...

Adding data from PHP into a designated div element

update: After some trial and error, I managed to find a solution using jQuery and append() methods. From my PHP code, I created an array containing all the necessary information that I wanted to insert into the tab divs. I then encoded this array into JSON ...

What is the best way to adjust a horizontal list of inline elements to stack vertically when the div container is resized?

Here is the issue I'm facing (notice how the yellow tiles are overflowing): (view image here) because my reputation points are not enough. The screenshot above illustrates how the small yellow rectangles are extending beyond the boundaries of the gr ...

Guidelines for implementing breadcrumb navigation with ng-click?

I have successfully implemented breadcrumb navigation in my application. It works fine when I navigate to pages through the navbar. However, I am facing an issue with the breadcrumb when I click on a button on my page that uses $location.path. How can I ca ...

Using a uibCollapse within a nested directive element may not function as expected

Whenever I try to click on my custom directive, the elements that are supposed to expand remain collapsed. To ensure that the click event is actually triggered, I have specified a size in the css for the .btn class. // index.html <body ng-controller=" ...

Issue with selecting multiple items in DataTables using the shift key

Currently, I am working with datatable 1.10 and have successfully created a table. However, I am unable to enable the multiple "shift select" functionality for its rows. Referring to the official DataTables documentation: The TableTools plugin offers fou ...

Is there a sleek way to create a JavaScript function that can provide two string values as output?

I am looking to store values in a specific format: "somekey": "value1", "value2" My goal is to create a function that takes in "somekey" and returns "value1", "value2". Alternatively, I could initialize a collection in my JavaScript file and reference i ...

Ways to style specific dates on a datepicker?

Is there a way to customize the appearance of the first and last selected days in my ui datepicker for booking, similar to the design shown in the image linked below? https://i.sstatic.net/bKnRS.jpg var dateFormat = "DD/MM/YY", ...

How can I prevent overwriting previous input data in LocalStorage using Draftjs?

I have implemented a draftjs rich text editor to store my text input in local storage. The current functionality allows me to enter text and save it to local storage by clicking the save button. See the code snippet below: import React from "react"; impor ...

What is the best way to display images one by one from a map using a random fade effect?

I am in the process of creating a logo wall for a website. I successfully managed to display them randomly using a map, but now I want to make them appear one by one in a random order (for example: image 1, image 6, image 3, ...) and keep them visible once ...

The application of custom CSS is entirely random

Lately, I've been experiencing a strange issue with my styles when using both scss and styled-components in combination. It seems like there is a race situation where the final render alternates between applying styles from scss and my custom styles w ...