Tips for handling ng-if during element presence checks

There's a hidden div on my web page that is controlled by an ng-if directive. I'm looking to create a test that confirms the presence of the element only when it should be visible. If the condition set by ng-if is not met, the element is completely removed from the DOM.

I attempted to use an if statement in Protractor that checks the same condition as ng-if and then expects a value only if the condition is true. However, it seems like Protractor doesn't recognize non-DOM elements, which is understandable but has left me unsure about how to proceed. Any suggestions?

javascriptangularjsprotractor

Answer №1

One useful method to check for the presence of an element in the DOM is .isPresent():

Verify if the element is present: expect(elm.isPresent()).toBe(false);

Another option is to use .evaluate() to assess the value of ng-if:

Evaluate ng-if value: expect(elm.evaluate("ng_if_value")).toBe(false);

Answer №2

To start off, we must verify if the element is currently visible

<div id="status" ng-if="data.isDeleted">  
     <span id="delete_status"> Deleted </span> 
</div>

When data.isDeleted returns true, we can proceed accordingly

var statusId= element(by.id('status'));
statusId.isPresent().then(function (visible){
   if(visible){
      expect(statusId.evaluate("data.isDeleted")).toBeTruthy();
      expect(statusId.element(by.id("delete_status")).getText()).toContain("Deleted");
   }
});

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

Guide on creating a cookie in express following a successful API call

Throughout my entire application, I utilize the /api route to conceal the actual API URL and proxy it in express using the following code: // Proxy api calls app.use('/api', function (req, res) { let url = config.API_HOST + req.url // This ret ...

javascriptnode.jsexpresscookies

Leveraging Bootstrap within an Angular 17 project

What is the process to integrate Bootstrap into an Angular-17 application using CLI? I attempted to install Bootstrap globally by running npm install -g bootstrap and then added necessary lines in angular.json under style and script. "node_modules/bo ...

angularjsbootstrap-5angular-bootstrapangular17

Having trouble accessing cookies in JavaScript on Internet Explorer 11?

I am facing an issue with my Angular application where cookies are not being read properly in Internet Explorer 11. The JavaScript code works fine on Chrome, but IE seems to be having trouble accessing the cookie data even though it is visible in the devel ...

javascriptc#.netangularjscookies

Avoiding Rejected Promise: Warning for Error [ERR_HTTP_HEADERS_SENT] due to Issue with setInterval and Axios.post Error Management

I attempted to address this warning by researching online. Unfortunately, I couldn't find a solution, so I am reaching out with this question. The current warning that I am encountering is: (node:39452) UnhandledPromiseRejectionWarning: Error [ERR_H ...

javascriptexpressaxios

Tips for transferring data from the Item of a repeater to a JavaScript file through a Button click event for use in Ajax operations

I am working with a repeater that displays data from my repository: <div class="container" id="TourDetail"> <asp:Repeater ID="RptTourDetail" runat="server" DataSourceID="ODSTTitle" ItemType="Tour" EnableViewState="false" OnItemDataBound="Rp ...

javascriptc#jqueryasp.netajax

How to retrieve scope variable within the <script> element

I have a question about using angularjs. Here is the structure of my HTML: <html> <body ng-controller="datafileController"> <div class="container"> <center><h1>Datafiles</h1></center> ...

javascriptangularjsplotly

Switch up the color of the following-mouse-div in real-time to perfectly complement the color that lies underneath it

I am trying to create a div that changes color based on the complementary color of whatever is underneath the mouse pointer. I want it to follow the mouse and dynamically adjust its color. This functionality is similar to what Gpick does: https://www.you ...

javascriptjquerycss

"Why is it that the keypress event doesn't function properly when using the on() method

My goal is to capture the enter event for an input field $("input[name='search']").on("keypress", function(e){ if (e.which == '13') { alert('code'); } }); This is the HTML code snippet: <input name="searc ...

javascriptjquery

Is there a way to retrieve the HTML code of a DOM element created through JavaScript?

I am currently using java script to generate an svg object within my html document. The code looks something like this: mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); myPath = document.createElementNS("http://www.w3.org/2000/svg", ...

javascripthtmldom

Troubleshooting Vue.js 2: Difficulty with Vue locating files stored in the /assets directory (v-for loop)

My Vue-cli 3 project with Webpack has the following folder structure: /public /src /assets p1.jpg p2.jpg App.vue main.js I have read that in order for Webpack to recognize the /assets directory, require() should be used in JavaScript files ...

javascriptvue.jswebpackvuejs2

Unable to bind `this` using `call` method is not functioning as expected

Attempting to modify the Express app's .set function to be case-insensitive. For example, app.set('PORT',80); app.set('port'); // => undefined; aiming for it to return 80 Essentially, it's just a function that changes the ...

javascriptnode.jsexpressthis

How to Retrieve the Value of the First Drop Down that is Linked to a Second Drop Down Using Angular JS

How can I use AngularJS to retrieve the second select drop-down value based on the selection made in the first select drop-down? Hello, I have set up two dropdown fields in MyPlunker and within the ng-option, I am applying a filter "| filter:flterWithKp" ...

htmlangularjsmeanjs

Automatically update the Vuex state with dynamic data

In the root component, I am looking to load a different version of state based on a specific 'data' variable. App.vue: export default { store: store, name: 'app', data() { clientId: 1 } } store.js: export const store = ...

javascriptvue.jsvuejs2vuex

Validation method in jQuery for a set of checkboxes with distinct identifiers

I am faced with a situation where I have a set of checkboxes that, due to the integration with another platform, must have individual names even though they are all interconnected. <div class="form-group col-xs-6 checkbox-group"> <label cla ...

javascriptjqueryjquery-validate

Issue with setting .mtl properties in a custom shader in three.js

In my custom three.js application, I am loading an OBJ/MTL model for rendering. I am trying to apply a custom shader to the model, but the color and specular uniforms that I manually pass to the RawShaderMaterial are not updating correctly. Instead, they a ...

javascriptopengl-esthree.jsglsl.obj

Can the state and city be filled in automatically when the zip code is entered?

I have a form where users can enter their zip code, and based on that input, the corresponding city and state will automatically populate. These three fields are positioned next to each other within the same form. Here is an example of my form: $(' ...

javascriptjqueryhtmltwitter-bootstrapclosest

collecting the input data within the AngularJS controller

As a newcomer to Angularjs, I have successfully created the UI and controller for my form. However, I am struggling with capturing the form data and constructing the parameter object needed for a POST request to the server. You can find the Plnkr link here ...

angularjsangularjs-scopeangularjs-controller

What is the best way to incorporate new elements into the DOM in order to allow users to share their comments

Can anyone help me with the code below? I have a text box and a comment section, along with a button to add comments. However, I need assistance with adding the posted comment below the comment section. Below is the code snippet: <div id="comments"&g ...

javascriptjqueryhtmldom

Turn off automatic vertical scrolling when refreshing thumbnails with scrollIntoView()

My Image Gallery Slider has a feature that uses ScrollIntoView() for its thumbnails, but whenever I scroll up or down the page and a new thumbnail is selected, it brings the entire page back to the location of that thumbnail. Is there a way to turn off t ...

javascripthtmljquerycsssass

A guide to update values in mongodb using node.js

I'm working on tracking the number of visitors to a website. To do this, I've set up a collection in my database using Mongoose with a default count value of 0. const mongoose = require('mongoose'); const Schema = mongoose. ...

javascriptnode.jsmongodb