The test did not pass as expected because of a NoSuchElementError

My test is experiencing intermittent failures and I am hoping to make it pass consistently. The test involves a page displaying an open layers map with numbered bubbles. Upon opening the page, we filter by status and expect a specific number to be displayed in one of the bubbles.

The encountered error is: NoSuchElementError: no such element.

The error message does not specify which element is missing. Upon reviewing the screenshot, I noticed that the filter checkbox was not clicked or visible in the screenshot (it appears when the test passes).

Below is the code snippet for the test:

beforeEach(function() {
    ptor = protractor.getInstance();
    ptor.ignoreSynchronization = true;

});

function waitForMap(){
    ptor.wait(function () {
        return element(by.css('label[for="checkbox-status-all"]')).isPresent();
    }, 5000);

}

it('should click checkbox and expect 30 to be shown in bubble', function () {
    browser.get(ptor.params.testurl).then(function () {
        waitForMap();
        element(by.css('label[for="checkbox-status-b0"]')).click();
        var bedscount = ptor.findElement(protractor.By.id('marker_10'));
        expect(bedscount.getInnerHtml()).toEqual('<span>30</span>');
    });
});

Answer №1

To ensure the smooth running of an Angular page, it is advisable to delete the following line:

ptor.ignoreSynchronization = true;

This will allow Protractor to wait effectively.

In latest versions of Protractor, there is no need to use ptor = protractor.getInstance(), simply replace it with browser

It is recommended to break down test steps instead of cramming too much functionality in a single it() block. This approach aids in better logging and pinpointing issues easily.

// TODO: Move to page object file
var mapElm = $('label[for="checkbox-status-all"]');
var chkElm = $('label[for="checkbox-status-b0"]');
var bedscountElm = $('#marker_10 span');

// Utilize this function to wait for elements on non-angular pages
function waitForElmPresent(elmFinder) {
    browser.wait(function() {
        return elmFinder.isPresent();
    }, 5000);
}

it('opens the test page', function() {
    browser.get(browser.params.testurl);
});

it('waits for the map', function() {
    // should not be necessary if ignoreSyncronization remains untouched
    waitForElmPresent(mapElm);
});

it('also waits for the checkbox before clicking', function() {
    // should not be necessary if ignoreSyncronization remains untouched
    waitForElmPresent(chkElm);
});

it('clicks the checkbox', function() {
    chkElm.click();
});

it('and also waits for the bubble to be present', function() {
    // should not be necessary if ignoreSyncronization remains untouched
    waitForElmPresent(bedscountElm);
});

it('expect 30 to be shown in bubble', function() {
    expect(bedscountElm.getText()).toEqual('30');
});

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

Creating a floating effect for a cube in Three.js involves applying specific techniques and animations

I've been experimenting with making a Boxgeometry float in three.js, but my attempts have not been successful so far. I tried using setTimeout to achieve the floating effect, but it didn't work as expected. Here is what I attempted: function anim ...

Refreshing page with ReactJS internationalization (i18n) capabilities

Currently, I am utilizing react-i18next within my Reactjs application. An issue that I am encountering is that whenever I switch the language, the app reloads and always reverts back to the main route. Is there a method to redirect to the same page or ch ...

The function myComponent.map does not exist

I am currently storing information that I am trying to pass to a component responsible for creating Tabs and TabPanel components (Material-UI) based on the provided data. Here is how the information is structured: let eventCard = [ { title: "T ...

Populate the svg tag with a nearby image

Is there a way to fill a svg element, like a circle, with an image that users can select from their local computer using an <input type='file'/> input? I am aware of filling a svg element using a pattern: <defs> <pattern id="im ...

"When utilizing a jQuery AJAX request to communicate with a Node.js server, the functionality only seems to

I'm diving into the world of AJAX and feeling a bit lost. On my webpage, I use an AJAX GET request to fetch comments on a post. However, there's a glitch where the request only succeeds after refreshing the page. I even tried disabling the cache, ...

Steps to Incorporate jQuery Function in a Partial View Inside a Modal

My jquery button click method is functioning correctly in views outside of modals, but the uploadbtn button click method does not work when a partial view is loaded in the modals. <script src="~/lib/jquery/dist/jquery.min.js"></script> ...

Why is it that my website in React crashes when I type rapidly in the TextField component?

Whenever I input text quickly into the TextField in my app, it causes my website to crash and display a blank white screen. Below is the snippet of code causing the problem: TextField Code: <TextField label="Item name" ...

Can someone guide me on passing functions from a service to the controller and invoking them using AngularJS ES6 syntax?

Whenever I attempt to invoke the getTodos function in the controller, it seems to be returning no value. I am trying to store the value returned by the getTodos() function into this.todos. However, this.todos keeps returning null. /* ----- todo/todo.ser ...

What could be causing the web service's returned data to not show up in the table?

I am utilizing angularjs version 1.6 in my project. My project involves reading data from a web service and I need to showcase the returned data in a table. Below is the http ajax call I'm using: $http.get("../../Services/ReportDepartmentService.as ...

What could be causing my JavaScript/jQuery code to malfunction when dealing with checkboxes?

My code is supposed to select and disable checkboxes based on which radio button is clicked. For example, when Zero is selected, all checkboxes should be highlighted and disabled, except for the zeroth checkbox. However, this behavior does not consistent ...

Express.js: The global error handler middleware is unable to handle a throw within middleware functions

I have been attempting to utilize middleware as a router in my code. Here is what I have so far: // index.js const router = require('./routers/router'); app.use('/api/a', router) // router.js const router = require('./routers/rout ...

Loading a page via AJAX without triggering a reload of the entire website

I am experimenting with loading content from a different page using AJAX. The website I am currently testing on is dev.dog-company.com. Here's the code snippet that I have been working on: $('a[rel="load"]').click(function(){ //var sit ...

Cannot trigger event ascn.onchange does not exist as a function

Need to trigger the onChange function and pass parameters within it. Here's what I have tried: setTimeout(function() { document.getElementById(input.key)?.onchange({}) }, 200); Encountering the following error message: cn.onchange is not a function ...

How to download a dynamically generated PHP file to your local machine

I am trying to find a solution where the search results can be downloaded by the user and saved on their computer. Currently, the file is automatically stored on the server without giving the user an option to choose where to save it. In the search form, ...

Discovering the equivalent of the onchange event through javascript dom and jquery

I am working with HTML code that involves triggering a function in the onChange event of a select box. <select id="locationLevelId" onChange="abc();"> Currently, I am looking to achieve the same effect using JavaScript DOM and jQuery, specifically ...

Is it possible that when using Sequelize fixtures to import a model as a function, errors occur if the data is not properly imported from a JSON

I'm currently working on a node.js project that utilizes express and sequelize. I want to add fixtures to populate my data tables. For this purpose, I am using the Sequelize-fixtures npm package. Below is the content of my fixtures.js file: 'us ...

If the object does not yield any results, then do not create a

I am looking to conditionally display the image div based on whether the object returns an image. Currently, I am including the image in my <div class="image">. However, if there is no image available, then the <div class="image"> should not ...

Saving data in a CSV file on your local device using HTML5

Is it possible to utilize HTML5 for saving or writing data to a local file on the user's file system? I am curious about this functionality, especially since HTML5 now offers the capability to export data from the client and save it as a CSV file. If ...

Enhancing a validation form with the 'onblur' event handler

Exploring the realm of JavaScript, I find myself intrigued by the concept of creating a validation form that activates upon clicking out of the input field. Implementing various techniques to integrate this feature into an existing form has been both chall ...

What could be causing the unusual alignment of the 'pixels' on my resized HTML5 canvas?

Currently, I am in the process of creating a simple HTML5 canvas/JavaScript snake game inspired by the classic Nokia Snake. This is my first attempt at developing a game using HTML5 canvas and JavaScript, and I must admit, I am still a novice programmer! ...