Using async/await with Protractor for non-angular applications

I'm currently working on transitioning my tests for a non-Angular website to utilize the async/await control flow. While some of the tests are running smoothly, I've encountered issues with others.

Specifically, I am struggling with logging in and waiting for elements to become clickable. I have attempted the standard wait construction for loading elements:

        browser.wait(EC.urlIs(browser.baseUrl + url.home), 7000, 'url is not as expected');

And the same approach for an element:

        browser.wait(EC.visibilityOf(dashpage.creds), 7000, 'element card holder is not visible');

However, these tests are failing with error notifications.

I also tried a different approach:

        expect(await browser.getCurrentUrl()).toContain(url.home);

But unfortunately, this expectation consistently fails.

Here is a snippet of the code:

beforeAll(async function () {
    browser.ignoreSynchronization = true;
    await browser.get(browser.baseUrl);

});
it('Log in as a new user and buy credits from member profile', async function () {
    email = hel.randomEmail();
    console.log(email);
    await homeact.fill_signup_form(par.male_name, email, par.password, par.canada, 0);
    await homeact.signup_submit();
    browser.wait(EC.urlIs(broswer.baseUrl + url.home), 7000, 'url is not as expected');
    //expect(await browser.getCurrentUrl()).toContain(url.home);
    await dashact.check_creds(0);
    await dashact.to_cred_popup();
    //check closing pop-up:
    await buycract.close_popup();

If anyone has suggestions on how to implement a delay for the conditions code, your assistance would be greatly appreciated. Thank you!

Answer №1

browser.waitForUrlToMatch(browser.baseUrl + url.home, 7000, 'URL did not match expected value');

Make sure to check for the URL like this:

expect(await browser.getCurrentUrl()).toContain(url.home);

While transitioning from regular end-to-end testing to async, I discovered that making every function async and using await in each call can simplify simple page objects but complicate complex ones.

Answer №2

One solution you could consider is to use

browser.waitForAngularEnabled(false);
. However, it's important to note that this is not the ideal method for resolving issues in an angular application and should be used sparingly.

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

Implementing authentication fallback during re-login when a session expires in a web application built with React, Node.js, and Mariadb database

Greetings everyone, this is my debut post here so kindly bear with me :D. Currently, I am in the process of developing a social app where I am incorporating a fallback mechanism for situations when my database goes offline. Within my Login.jsx component, I ...

Ensure that every item in the list is assigned a distinct "key" prop to avoid duplication. Follow these steps to address the issue

function App() { return <StrictMode>{data.map(createCard)}</StrictMode> } function createCard(characters) { return ( <Card id={characters._id} name={characters.name} about={characters.about} img={characters.im ...

How can I retrieve and process a text or .csv file that has been uploaded using Multer?

Just starting out with Multer - I created an application to analyze a .csv file and determine the frequency of each keyword and phrase in the document. However, I have since made adjustments using node and express to analyse the file AFTER it has been subm ...

Step-by-Step Guide on Building a Globe with Global Map using three.js

While trying to create a sphere with a world map using three.js, I encountered an issue where the output displayed only a black screen. https://i.sstatic.net/LZFeC.png Below is the code I used: <!DOCTYPE html> <html> <head> ...

What is the best way to display values from a Localstorage array in a tabular format using a looping structure

I have set up a local storage key 'fsubs' to store form submissions as an array. Here is how I am doing it: var fsubs = JSON.parse(localStorage.getItem('fsubs') || "[]"); var fcodes = {"barcodeno" : this.form.value.barcode, "reelno" : ...

Searching for data in a bootstrap table that is not case-sensitive

Searching for and highlighting text within a bootstrap table has proven to be a challenge. Check out the Fiddle for an example: https://jsfiddle.net/99x50s2s/74/ HTML <table class='table table-bordered'> <thead> <tr& ...

Various issues arising from a single input in Foundation Abide with AngularJS

Trying to set up a form using Foundation has proven challenging, especially when it comes to implementing more advanced error checking. If we take the example of an input field like this: <input pattern="username" required type="text" placeholder="user ...

Issue with accessing $index.$parent in function parameter within ng-repeat in AngularJS

Can anyone with more experience please explain to me why this particular code compiles successfully: <li class="btn dropdown top-stack breadcrumb-btn" ng-repeat="nodeName in selectedNodeNames"> <a class="dropdown-toggle btn-anchor"> ...

Is there a way to convince Python to interpret data as a multi-dimensional list instead of a string when converting from HTML?

Currently, I am working on formatting table data in HTML and then sending it to Python using the script below: var html_table_data = ""; var bRowStarted = true; var count1 = 1 $('#woTable tbody>tr').each(function () { if (count1 != 1) { ...

Using ExpressJS to generate a page with inputs

Using ExpressJS, I have created an Object of the IndexController in my router (index.js) and passed a String as a constructor argument. I then attempted to call the showDefaultFeed method. Expected output from "index.hbs" view was to print the argument pa ...

"Shopping just got easier with our new drag and drop feature! Simply drag items

I want to develop a Virtual Shopping Cart system. Items will be retrieved from a database. A virtual basket will be available. Users can drag items and drop them into the basket, similar to shopping in a mall. Once the user clicks the save button, the s ...

Exploring the Power of Oembed with Hulu (and delving into the World of JSON

If anyone has insight into this process, it would be greatly appreciated. Here's the situation: I am trying to retrieve the embed URL from a Hulu video URL (e.g. 'www.hulu.com/watch/154344') using Javascript (jQuery is fine). Just to clarif ...

What could be causing my socket to enter a never-ending loop?

Client Side Code: useEffect(() => { socketRef.current = io.connect("...", { transports : ['websocket'] }) socketRef.current.emit("online", id) socketRef.current.on("message", ({ name, message }) => ...

An express error caught off guard: Unexpected "write after end" issue detected

My current goal is to create a proxy for an api call from the client side through my server for a third party service. The main reasons for implementing this proxy are due to CORS issues and the need to include a secret key on the server side for added sec ...

Is there a way to resolve the scrolling problem on Google Maps?

When using the Google Maps V3 API, an issue arises where zooming out on the map using the scrollbar also causes the page to scroll along with it. This can be quite frustrating and so far I have not been able to find a way to disable this scrolling behavi ...

Tips for fixing the issue of "The use of getPreventDefault() is outdated. Please use defaultPrevented instead."

When attempting to fetch data for a specific user from an SQL Server database using JSON data, I encountered an error message in the console: "Use of getPreventDefault() is deprecated. Use defaultPrevented instead." Additionally, the values are not bei ...

Creating a progress bar with blank spaces using HTML, CSS, and JavaScript

Upon running the code below, we encounter an issue when the animation starts. The desired effect is to color the first ten percent of the element, then continue coloring incrementally until reaching 80%. However, as it stands now, the animation appears mes ...

Creating a unique custom bottom position for the popover and ensuring it is fixed while allowing it to expand

Creating a customized popover similar to Bootstrap's popover, I have successfully implemented popovers in all directions except for the top direction. My challenge lies in fixing the popover at the bottom just above the button that triggers it, and en ...

The complexity of JQuery's design has left many puzzled

I am new to using Jquery and I have come to the following realizations: Every selector in Jquery always returns a wrapped list of items, which can be: An empty list A list with a single element A list with multiple elements Chained functions operate o ...

Is there an easy way to determine if an element inside a Vue component is overflowing?

I created a unique component called ResultPill which includes a tooltip feature (implemented using vuikit). The text displayed in the tooltip is determined by a getter function called tooltip, utilizing vue-property-decorator. Here are the relevant parts o ...