Managing spinners in Protractor when they are concealed by a wrapper element

While writing a test for an Angular app using Protractor, I encountered several issues with handling spinners. I managed to solve some of them, but I'm unsure how to test spinners that are hidden by a wrapper. For instance, when the parent tag has ng-if or ng-hide statements and the spinner's dimensions are greater than 0.

spinner.isDisplayed();
browser.wait(EC.visibilityOf(spinner), 5000);

Here are some HTML examples (the parent tag may vary):

 <div class="some purent div">
 <div class="spinner-loader small-loader ng-hide" ng-show="expression">  </div>
</div>

:::

<div class="container">
      <div class="spinner-loader spinner-dark" ng-if="if_statement"></div>
</div>

:::

<div ng-show='exp'>
...
 <div>
...
  <div class='spinner'></div>
 </div>
</div>

Unfortunately, my attempts have been unsuccessful. I would appreciate any assistance. Thank you!

javascriptangularjsseleniumprotractore2e-testing

Answer №1

Give this code snippet a shot.

element.all(by.id('your spinner model')).each(function (el, i)
{
     el.click();
     browser.driver.sleep(500);
     element(by.css('Selector for the Spinner value you want to select')).click();
     browser.driver.sleep(500);
});

Feel free to try it out! :)

Answer №2

After analyzing the snippets of HTML you have provided, you can extract the visible spinners by using:

By.cssSelector(".spinner-loader:not(.ng-hide):not([ng-if]) .spinner")

To target the hidden spinners, you can use:

By.cssSelector(".spinner-loader.ng-hide .spinner, .spinner-loader[ng-if] .spinner")

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

Tips for avoiding unnecessary re-renders in React JS to halt additional API requests:

Presented here is a main component (Cart) and a subordinate component (CartItem). Within the main component, there exists a button that relies on the state, which changes through the checkAvailability function passed down to the child via props. import {u ...

javascriptreactjs

Read and manipulate website content using PHP

I recently encountered a challenging situation as a newcomer. Despite searching on Google, I couldn't find any information about it. There is a website that allows users to search for doctors in their area or state. It's possible that the number ...

phpjavascriptapi

Check for mobile browser without having to refresh the page

Currently, I am facing an issue with closing the sidebar when the user clicks on Click Me button in mobile view using flexbox layout. The problem arises because the page needs to be refreshed for it to recognize if it's in mobile mode or not by utiliz ...

javascriptangularflexbox

The heap limit has been reached in Github Actions, causing an allocation failure

Encountering a heap out of memory error in Github Action during the last "run: npm run build". FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory Error: Process completed with exit code 1. Showcasing the workflow file: name: ...

javascriptgithubnpmgithub-actions

exploring the realm of creating constants in AngularJS functions

controller.js angular.module('app.main') .controller('MainCtrl', function ($scope, currentUser, addAPI) { $scope.form = {}; $scope.subdomain = currentUser.domainName; $scope.add = function () { addAPI.addAdmin(loc ...

javascriptangularjsxmlhttprequestconstants

Error encountered in Angular CLI: Attempting to access property 'value' of an undefined variable

I am encountering an issue while trying to retrieve the values of radio buttons and store them in a MySql database. The error message I receive is TypeError: Cannot read property 'value' of undefined. This project involves the use of Angular and ...

javascripthtmlangulartypescriptexpress

Showing information in a tree structure using HTML, CSS, and JQuery

Trying to figure out how to present a large amount of data in a tree structure. Each node could have multiple children and parents, requiring a dynamic representation. I've explored various JavaScript libraries like D3 and Raphael, but unfortunately, ...

javascriptjqueryhtmlcsstree

Prevent duplicate items in an array by utilizing the Map object to add elements

Looking for a way to update an array by adding new values while avoiding duplicates. I've implemented the usage of a Map object to keep track of existing values and tried filtering the new array accordingly. const [items, setItems] = useState([]); ...

javascriptreactjsarrays

JAVASCRIPT ENCOUNTERS ISSUE WITH RANDOM TEXT GENERATION

Utilizing an array of words, we are in the process of generating random text. The goal is to shuffle and combine these words to form new "random sentences". However, we have encountered a minor issue - the addition of "undefined" at the beginning of each p ...

javascriptarrays

Excessive recursion in MooTools causing issues with Google Maps integration

Hello, I'm currently facing an issue with my WordPress plugin. Whenever Mootools is included, Google Maps are not displaying due to "too much recursion" error. Here is a snippet of the code for reference: Any suggestions or workarounds for this incon ...

javascriptgoogle-maps-api-3mootools

Reduce the use of if statements

Is there a way to optimize this function by reducing the number of if statements? The currentFeatures are determined by a slider in another file. The cost is updated if the currentFeatures do not match the previousFeatures, and if the user changes it back ...

javascriptreactjstypescript

What is the best way to send a JSON string as a prop?

I am integrating Vue.js with Shopify, and I am trying to pass objects from Liquid into a Vue component as a prop. An example scenario would involve using the product object in Liquid from Shopify and converting it directly into an object within Vue. Ideall ...

javascriptvue.jsshopifyliquidvuejs3

Creating a dropdown menu with data loaded dynamically using ajax and json, all without relying on jquery

I am looking to populate a few select menus using JSON data retrieved from my PHP script. Each select menu should display different values based on the selections made in the other menus. While I understand how to clear and fill a select menu using JavaScr ...

javascriptajaxjsondrop-down-menu

Tips for resolving the issue: 'Unhandled Promise Rejection: Error: Unable to resolve bare specifier "app.js" from http://localhost:3000/'

While delving into TypeScript, I have come across an error related to node modules. Upon clicking the anonymous function, it leads me to the following code snippet. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

javascripttypescriptsystemjs

Modification of text within a text field via a context menu Chrome Extension

Currently, I am embarking on my first endeavor to create a Chrome extension. My goal is to develop a feature where users can select text within a text field on a website using their mouse and have the ability to modify it by clicking on a context menu. Be ...

javascriptgoogle-chrome-extension

Silence from PHP script after executing jQuery post() method

I've run into an issue while trying to retrieve data from a PHP file that reads a mySQL database. The data is delivered successfully when accessed through a browser: However, when attempting to access the data using jQuery's get() or post() meth ...

phpjavascriptjquerypost

What is the best way to access a promise's value in global scope within a reactjs application?

Currently tackling user authentication using web tokens in react. My approach involves utilizing the fetch() method to send a POST request to my backend, facilitating CORS. The issue arises when attempting to employ the setToken() hook within the .then() b ...

javascriptreactjs

Creating an HTML table from a JSON string with AngularJS

I am completely new to angularjs and have been delving into it for the past few days. I now need to convert a JSON string from a REST endpoint into tabular data. Below is the code I've been working on. $scope.getDataCatalogue = function(){ $ ...

htmlangularjsjson

Contrasting focus and blur events in fireevent

Can someone please explain the distinction between focus and blur when using fireEvent in Selenium? I would appreciate any assistance. What specific scenarios would warrant the use of these functions? ...

selenium

The unique behavior of nested observables within an Ionic2/Angular2 application

Creating an ionic login module involves using 2 observables, with one nested inside the other. Uncertainty exists regarding whether this is the correct implementation. The process includes calling the getHTTP() method to retrieve a string. If the string i ...

javascriptrestangularionic2rxjs