Using Browser.wait() in Protractor to wait for a specific ID while the class changes

Looking to implement browser.wait() specifically for waiting on a particular element. Need some guidance with this task.

Situation -> When a filter div is clicked, a hidden div becomes visible. Need to wait until it appears.

Before Click - 

<div id = "collapseGenericFilter" class="pannel-collapse collapse">

After Click - 

<div id="collapseGenericFilter" class="pannel-collapse collapse in">

Is there a way to use browser.wait based on the ID of an element, waiting until a specific class selector is visible?

I'm addressing this by using 

browser.wait(() => element(by.css('.panel-collapse.collapse.in')).isPresent(),
500,
'long wait');

Does this approach seem correct? I would prefer locating the DOM element first by its ID then proceeding with the class like 

element('GenericFilter').by.css('panel-collapse collapse in') etc.

Note:- I'm quite new to web technologies, so please pardon me if this seems like a basic question as I am still learning.

Thank you in advance

javascriptangularjsprotractor

Answer №1

The chain function is not suitable for the same element as it is meant to navigate between parent and child elements. For instance, if div1 contains another div with class name div2, you can use the chain function like this -> browser.element(by.id('div1)).element(by.css('.div2'))

To find a solution, you can first check the element by its id and then by its class attribute

// Click on the element first  
var genericFilter = browser.element(by.id('collapseGenericFilter')); 
genericFilter.click(); 
// Wait for the specific class name 'pannel-collapse collapse in' to be present in the generic filter
browser.driver.wait(function(){
     genericFilter.getAttribute('class').then(function(className){
            return className.indexOf('pannel-collapse collapse in') !== -1;
          },50000, 'Element not present ');
 },50000);

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

Discover the secrets to obtaining live website information using Google Script!

I am looking to retrieve the exchange rate data from a specific website. My understanding is that the website is dynamic (I'm still new to javascript) and the data is not easily accessible. Can anyone guide me on how to extract the exchange rates? For ...

javascripthtmlgoogle-apps-script

In the HTML code, the select option will show the value with an empty colored div and then

Is it possible to create an HTML select option that displays a value along with an empty color div? Can this be achieved using HTML, JavaScript, or jQuery? I have attached a png file for reference, and I want the output to look similar. <select> ...

javascriptjqueryhtml

Top pick for building drag-and-drop web applications: the ultimate JavaScript library

Up to this point, I've relied on jQuery UI's draggables and droppables for my projects. However, I recently came across ExtJS and other libraries that caught my interest. I am aiming to create a professional-grade plugin. Can anyone suggest the b ...

javascriptjqueryjquery-uiextjs

JavaScript Promise Handling: using fetch method to retrieve and extract the PromiseValue

I am currently struggling to access the [[PromiseValue]] of a Promise. However, my function is returning a Promise instead and what I really want myFunction to return is the value stored in [[PromiseValue]] of the promised returned. The current situation ...

javascriptreactjspromisefetchrequest-promise

Tips for creating a reactive bot that responds to a particular message?

I attempted to create a custom command for my Discord bot that would allow it to react to specific messages, but unfortunately I seem to have made an error somewhere in the code. Can anyone help me figure out what went wrong? Below is the code snippet I u ...

javascriptnode.jsdiscord.jscommandbots

Sharing asynchronous data between AngularJS controllers

Among the multitude of discussions on sharing data between controllers, I have yet to come across a satisfactory solution for my particular scenario. In my setup, one controller fetches data asynchronously using promises. This controller then creates a co ...

javascriptangularjsangular-promise

Modify Bootstrap TouchSpin's initial value

Struggling to update the initial value displayed in TouchSpin, it seems like there is no direct way to do it. While it's possible to change other values like the maximum value, attempts to set the initval directly have failed. $("input[name=&apos ...

javascriptbootstrap-4

Posting values using AJAX in PHP - A guide

test.html <html> <!-- To access the complete PHP-AJAX tutorial, please visit http://www.php-learn-it.com/tutorials/starting_with_php_and_ajax.html If you found this tutorial helpful, a backlink to it would be greatly appreciated. ...

phpjavascriptajaxpostprototypejs

Unlocking the power of dynamically generated Json files

I am looking to develop a straightforward input word system, where words are organized within themes. The Json file must adhere to a specific structure and be dynamically updated. Take a look at the Json code below: {"THEMES": { "FRUITS": { ...

arraysjsonangularjs

The Efficiency Issue of Angular's setTimeout

Whenever I need to update a component with different input variables, I re-render it every time because there is some specific logic in my ngOnInit() function. To achieve this, I use a method in the parent component where I toggle the showSettings property ...

javascriptangularperformance

Creating an installer for a web application using Angular, MySQL, PHP, and Node: A step-by-step guide

I've developed an application that leverages angularjs, php, and nodejs as the backend, with redis serving as a caching server. I'm now looking to create an installer that can bundle the installation of php, mysql, nodejs, and my angularjs code i ...

phpmysqlangularjsnode.jsinstallation

Blending HTML5, CSS, and JavaScript

I'm currently in the process of customizing an editable CSS table that I found on CodePen, but I'm facing some challenges with getting the HTML5, CSS, JS, and JQuery components to function as desired. Here is the link to the original CodePen snip ...

javascriptjquerycsshtml

Breaking apart faces of a sphere using Three.js

I am currently working on creating a sphere geometry. geometry = new THREE.SphereGeometry( 200, 20, 10 ); material = new THREE.MeshLambertMaterial({ shading: THREE.FlatShading, color: 0xff0000 }); sphere = new THREE.Mesh(geometry, material); scene.add( sp ...

javascript3dthree.jsgeometry

Be patient for Node.js express application triggering http requests in a loop

I feel like my head is going to explode. It's been a whole week since I started working on this, and the frustration of not being able to solve it is driving me to a dark place. Can someone out there in the vastness of the internet please guide me? T ...

javascriptnode.jsfor-loopasynchronousexpress

Guide on how to address the problem of the @tawk.to/tawk-messenger-react module's absence of TypeScript definitions

Is there a way to fix the issue of missing TypeScript definitions for the @tawk.to/tawk-messenger-react module? The module '@tawk.to/tawk-messenger-react' does not have a declaration file. 'c:/develop/eachblock/aquatrack/management-tool-app ...

javascripttypescriptnext.jsnextjs14tawk.to

JS templating language inspired by Jinja

I find the django/jinja2 templating languages to be truly exceptional. Their syntax is straightforward yet incredibly flexible. I'm wondering if there is a JavaScript library that offers similar simplicity and versatility, or at least matches their ca ...

javascriptjqueryjinja2template-enginelanguage-comparisons

Retrieving the value of a duplicated button in AngularJS

I have implemented a basic HTML table using AngularJS to display data for each item in my "names" array. Each item represents an object with various attributes such as Name, id, etc. Along with each row in the table, I have included a button. However, I am ...

javascriptangularjsbutton

React does not recognize data.map as a function

Currently, I am facing an issue with a simple map function in React that is supposed to create a set amount of times. {times.map((time) => ( <Pill value={time} handleTimes={handleTimes} key={time} /> ))} The error being thrown i ...

javascriptreactjsnext.js

Error message for validation does not appear when a custom validation directive is included and the minimum length is not

How can I display an error message when the length of a password is less than 5 characters? I have attempted to implement this functionality, but the error message "Length must be greater than 5" is not being displayed. It seems to work when I remove the & ...

angularjs

"Reconfigure web page layout to be perfectly centered

Currently, I am utilizing Angular Drywall to construct my website. By default, the alignment is centered which does not suit the template requirements that call for it to occupy the full 100% body width. body{ width:100%; margin-left:0; paddin ...

angularjshtmlcsstwitter-bootstrap-3