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

add the closing </div> tag using jquery only

Having a slight issue here, it seems that jQuery is being overly clever. Within my HTML code, I am attempting to insert this string into a div container: </div><div class="something"> You'll notice that the closing tag comes first, foll ...

javascriptjqueryhtmlcss

Is there a way to efficiently parse HTML data returned as JSON in the browser using Cordova/Ionic?

Currently, I am retrieving data from a Drupal service and using AngularJS along with the ionic framework to create a hybrid app for mobile platforms, leveraging Cordova or Phonegap. You can check out my code on codepen: http://codepen.io/BruceWhealtonSWE/p ...

htmljsonangularjscordovaionic-framework

Types of Data Encoded in Base64

Within an application I am developing, there is a feature for downloading files that are stored as Base64 strings. It is essential to correctly pair the data types with the corresponding files in order to ensure successful downloads. I thought I had sorte ...

javascriptbase64

Cleve js does not include delimiters in its date output

In my Vue.js project, I decided to implement a date input field using cleave.js. After passing the following options: options="{date: true, delimiter: '/', datePattern: ['m', 'd', 'Y']}" I encountered an issue wh ...

javascriptvue.jscleave

Conflicting behavior between jQuery focus and blur functions and retrieving the 'variable' parameter via the $_GET method

There is a simple focus/blur functionality here. The default value shown in the 'Name of Venue' input field changes when the user clicks on it (focus) and then clicks away(blur). If there is no text entered, the default value reappears. Input fi ...

phpjavascriptjqueryhtml

Navigating the intricacies of using a Date Picker

I need to choose a specific date selected by the user, and here is the code snippet for selecting a date: https://i.stack.imgur.com/OkWJb.png The sendkeys() function does not work, so I attempted the following code: JavascriptExecutor check = (Javascrip ...

seleniumselenium-webdriver

Encountered an error while attempting to load resource: the server returned a 404 (Not Found) status code when trying to load an image in an

I am looking to dynamically load an image when it is selected from a file picker dialog. The code provided below attempts to achieve this, however, the image does not load into the img tag. <script src="https://cdnjs.cloudflare.com/ajax/libs/jq ...

javascripthtml

JavaScript code encounters difficulties parsing HTML source

I'm attempting to reconstruct the WhateverOrigin service, which can be found at this link: Nevertheless, when I try running it in my web browser, this code that functioned perfectly with WhateverOrigin no longer functions properly with my imitation s ...

javascriptjqueryhtmlajaxjson

What is the best way to showcase an array of objects in a table using AngularJS that updates

My technology stack includes angular.js for the front-end, node.js for server-side operations, and PostgreSQL for managing my database. Currently, I have a list of values stored in the database: Upon checking the controller code, I obtained the following ...

htmlangularjshtml-table

It's important to understand how to correctly send state values from a parent component to a child component

I have a tab menu in my code and I am looking to implement a feature where tabs can be switched using a button. The challenge is passing the values of these tabs into the onclick function of the button in order to navigate between them. Here is an example ...

javascriptreactjsmaterial-ui

Facing unexpected behavior with rxjs merge in angular5

import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/merge'; this.data = this.itemsCollection.valueChanges() this.foo = this.afs.collection<Item>('products') .doc('G2loKLqNQJUQIsDmzSNahlopOyk ...

javascriptangulartypescriptmergerxjs

Using the default theme in Material UI5

Could someone please explain how to pass in the default theme in Material UI5? In Material UI6, I used to do it like this: const useStyles = makeStyles((theme) => ({ home: { display: "flex", paddingTop: "8rem", width: ...

javascriptreactjsmaterial-uimakestyles

serving index.html using express and react

I am currently working on an application with Express, which includes a create-react-app. My goal is to display the index.html file located in the public folder of the create-react-app when a user visits the root URL. Below is the code snippet from my inde ...

javascriptreactjsexpresscreate-react-app

Should the page.js in a Next.js App router be a server component?

Is it standard practice in Next.js 13 and above (App router) for the page.js of all routes/folders to be a server component? I know that it can be a client component with use client, but is this advisable or are there potential issues during the build proc ...

javascriptreactjswebnext.jsbuild

My jQuery code is encountering issues with the .each loop functionality

I have encountered an issue with the code snippet below, which is intended to hide the "IN STOCK" phrase on specific vendors' product pages. Upon testing, I noticed that the loop doesn't seem to be executing as expected when using console.log. Ca ...

javascriptjqueryfrontend

Event handlers in JQuery are not connected through breadcrumb links

Wondering how to ensure that the click handler is always attached in my Rails 4.1 app where I am using JQuery-ujs to update cells in a table within the comments#index view. In my comments.js.coffee file, I have the following code snippet: jQuery -> ...

javascriptjqueryruby-on-railsruby-on-rails-4coffeescript

Tips for sending a unique button ID to a jQuery click function

Within a table row of a dynamically generated table, I have multiple buttons each with its own functionality. My goal is to figure out how to pass the specific button ID to the onclick event of that table row when one of these buttons is clicked. $(&apos ...

javascriptjquery

Retrieving application version from .apk files using Selenium

Currently in the process of running Android tests utilizing Selenium and Appium. I am interested in learning how to programmatically retrieve the Android app version from the .apk file. Alternatively, if it's possible to obtain this information throug ...

javaseleniumappiumappium-android

Varying outcomes are observed due to minor discrepancies in pixel rendering during the execution of identical selenium regression tests

Currently, I am in the process of updating the regression tests for my company's website. We are migrating from using Selenium 2.31 and Chrome 25 to Selenium 3.14 and Chrome 75. These tests involve taking screenshots during the testing process and com ...

c#amazon-web-servicesseleniumselenium-webdriverselenium-chromedriver

Tips for utilizing the @Input directive within the <router-outlet></router-outlet> component

I am new to Angular 4 and recently discovered that in Angular, data can be passed from a parent component to a child component using @Input like this: <child [dataToPass]="test"></child> My question is, how can I achieve the same functionalit ...

javascriptangular