How to Wait for Class Change of an Element in Protractor

Описание: Learn how to effectively wait for an attribute change in Protractor, ensuring smooth UI testing by checking for class changes in elements.
---
This video is based on the question https://stackoverflow.com/q/64040562/ asked by the user 'CzescTuSlawomr' ( https://stackoverflow.com/u/10724239/ ) and on the answer https://stackoverflow.com/a/64046247/ provided by the user 'Sergey Pleshakov' ( https://stackoverflow.com/u/9150146/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Protractor - wait for class change

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Wait for Class Change of an Element in Protractor

When automated testing with Protractor, ensuring that your application behaves as expected is crucial. One common scenario that testers encounter is when waiting for a UI element to change its state, often indicated by a change in its CSS class. For instance, you may need to wait for a connection button that starts with the class "red" to switch to "green." In this blog, we will discuss how to handle such a situation seamlessly.

Understanding the Problem

In a web application, elements dynamically change their classes based on user interactions or system events. When you need your automated tests to correspond to these changes, it's essential to implement a waiting mechanism. Protractor doesn’t automatically handle these waits for changes in attributes; therefore, you need a custom function that accomplishes this effectively.

In this scenario, we want to wait for a button to change its class. The button starts with class="red" and transitions to class="green". We want our Protractor test to proceed only after this class change occurs, ensuring reliable test execution without arbitrary wait times.

The Solution: Custom Wait Function

Custom Function Implementation

To address this issue, we can create a custom function called waitUntilElementHasAttribute. This function will check whether an element has a specific attribute and wait until that attribute meets your requirements.

Here’s how to structure this function:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

Parameters:

$element: This is a Protractor ElementFinder that locates the element you're targeting.

attributeName: The name of the attribute you want to evaluate (in this case, class).

attributeString: The string you expect the attribute to contain (like green).

timeout: How long (in milliseconds) you are willing to wait for the attribute to change.

Function Logic:

The function uses browser.wait to pause the execution until the specified condition is met.

It retrieves the attribute value using $element.getAttribute(attributeName).

If the attribute value is not null and contains the expected string, the function resolves.

Using the Function

To implement this function in your test, you would call it like this:

[[See Video to Reveal this Text or Code Snippet]]

Here, the test will wait up to 3 seconds for the class of the element to change to include green.

Conclusion

Waiting for a class change in Protractor doesn’t have to be cumbersome. By implementing a simple custom function, you can streamline your tests and ensure they only proceed when the UI is in the expected state. This not only makes your tests more reliable but also reflects real user interactions more accurately.

With this guide, you can now efficiently handle UI element attribute changes in your Protractor tests, making your automation efforts more robust and effective.