Most efficient method for verifying the presence of a toast message (with a functional demonstration)

After struggling for hours, we finally stumbled upon this solution. It's hard to believe that this is the optimal approach. Now, I'm curious to learn about the recommended method by the experts.

findToastMessage(expectedMessageText: string) {
    browser.wait(function () {
        browser.ignoreSynchronization = true;
        return element(by.cssContainingText('.message-title', expectedMessageText)).isPresent()
            .then(function(isPresent) {
                if (!isPresent) {
                    $(".message-title").getText().then(function (text) {
                        console.log("found: " + text)
                    }) 
                }
                browser.ignoreSynchronization = false;
                return isPresent;
            });
    }, 2000, "No Toast message with '" + expectedMessageText + "' was found!");
}

findNoToastMessage() {
    var timeout = 2000;
    var start = 0;
    while (start <= timeout) {
        browser.sleep(100);
        start += 100;
        browser.wait(function () {
            browser.ignoreSynchronization = true;
            return element(by.css('.message-title')).isPresent()
                .then(function(isPresent) { 
                    browser.ignoreSynchronization = false;
                    expect(isPresent).toBeFalsy("Expected no toaster message");
                    return true;
                });
        }, 100);
    }
}

Answer №1

In Protractor, finding the toaster popup presence on the UI is a breeze with the help of the protracot.ExpectedConditions.visibilityOf() method. This method works flawlessly and eliminates the need for lengthy logic.

For a working example, refer to the code snippet below:

var EC=protractor.ExpectedConditions;

var ToasterPopUP = element(by.css('.message-title'));

EC.visibilityOf(ToasterPopUP ).call().then(function(isPresent){
    expect(isPresent).toBeFalsy("no toaster was expected");
  });

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

Why does my 'Explicit Wait' fail while 'Implicit Wait' succeeds?

Why won't my Explicit Wait function as expected? While my Implicit wait seems to be working fine, I am encountering issues with my Explicit wait not honoring the assigned timeout. For instance, even if I set the Explicit timeout to 300 seconds, ...

Large data sets may cause the Highchart Bar to not display properly

Currently, I am working on a web project that displays traffic usage in chart mode using Highchart Bar. The issue I am facing is that there are no errors thrown when running this code. <script type="text/javascript"> $(function () { $(&apos ...

AngularJS $scope variable is not defined during page load

Experiencing difficulties retrieving service data to include in the variable's scope. Below is my controller code: 'use strict'; var app = angular.module('ezcms2App.controllers', []); app.controller('NoticiaCtrl', [&apo ...

initialize input data in vue

How can I set a default value for an input in a date picker using Vue JS? I have tried setting the data but it's not showing up. When I inspect the element, I see this code: https://i.stack.imgur.com/fQDLL.png Here is my script: new Vue({ e ...

Troubleshooting issue with applying hover effect to child divs

How come when I hover over one of the child items in my parentDiv, the background of the last childDiv changes no matter which child I place my mouse on? for (let i = 0; i < Number(height); i++) { for (let j = 0; j < Number(width); j++ ...

What is the best way to link optional and undefined paths in AngularJS routing?

When it comes to AngularJS routing, I have a question. How can we combine the use of a star (*) to match paths with slashes and a question mark (?) to match optional paths? Specifically, I am looking to match both /admin/tasks and /admin/tasks/arbitrary/pa ...

Structure of a GraphQL project

What is the most effective way to organize a graphQL project on the server side? Here is my current project structure: src config models setup schema queries index userQuery resolvers index userRes ...

What could be causing the href to malfunction on my local website?

I'm currently working on adding a new link that directs to a local HTML website within a menu list on a website. The main website is in ASPX format, but my focus is on the HTML version. The link I want to add leads to an HTML website stored on my loca ...

Choose Your Date of Birth from the Drop-Down Menu with ng-options

I've been working on creating a dropdown for Date of Birth using ng-options. I've managed to set it up for day and month, but I'm encountering an issue with the year dropdown. The problem is that the years are displayed in reverse order, sta ...

Having trouble with Three.js loading gltf file?

I encountered an issue while working on a project that involved using three.js with svelte. The problem arose when attempting to load a 3D model, resulting in a server response of 404 not found. Below is the code snippet I used to load the file(Scene.js) ...

Strategies for adjusting image components based on various screen sizes

Let's consider a scenario: There is an image nested inside an introductory div for the desktop layout, like so: <div class="intro"> <img id="gambar" src="assets/images/image-intro-desktop.jpg" alt=&q ...

Gather information by utilizing the find_elements_by_class_name method

My goal is to extract the text from each class_name='position-header' on the page by utilizing the find_elements_by_class_name method. However, I keep encountering the following error message: AttributeError: 'list' object has no attri ...

Automatic adjustment of line chart scales

Utilizing Google visualization charts in my Grails application has been a bit tricky. Specifically, when I add numerous rows of data to the line chart, it starts behaving strangely. Check out these screenshots https://i.sstatic.net/rWdwx.pnghttps://i.sstat ...

Having issues with the JavaScript voting system {{bindings}} returning null when clicked?

It seems like the error is not appearing in the developer tool, so it might be related to how the data is being read. Both {{upVote}} and {{downVote}} start with no value and show null when clicked, indicating that the buttons are somehow linked. I was att ...

Guide to setting up an automated process in PHP

When setting up a tournament interface on my page: Users utilize functions like fopen() and fwrite() to create tournaments. The created tournaments must only start after a specific time, for example, 1 hour. This delay allows other users to join the tour ...

Analyzing the Hover functionality through Selenium Testing

Currently, I am working on testing the change in background color to #F67621 when hovering over an element. In this case, the background color code needs to be compared with a predefined expected value using XPath as the selector. String xPathStr="//input ...

Ways to retain specific div elements following the execution of .html(data) command

Imagine I have a div structured in this way: <div id = "foo" style = "display: grid"> <div id = "bar"> keep me! </div> </div> If I use JQuery's .html(data) method like shown below: $('#foo').html(data); when m ...

Tips for keeping a reading item in place while scrolling

To enhance the user experience, I would like to improve readability without affecting the scroll position. Question: Is there a way to fix the scrolling item at a specific position (item with the .active class)? I am looking to maintain a consistent read ...

AngularJS - Issue with Scope not being properly utilized in view when calling controller function

I'm attempting to update a variable within $scope in a controller function, and while the assignment is successful, it doesn't reflect in the view. app.controller('LoginCtrl', ['$scope', '$http', function ($scope, $ ...

Next.js encountered an issue: React.Children.only function was expecting to receive only one React element child, but received more

I have created a component named Nav located in the components directory. Here is the code for it: import Link from 'next/link'; const Nav = () => { return( <div> <Link href="/"> <a> Home </a> ...