The Protractor test scripts are running with lightning speed, outpacing the webpage loading time

Seeking guidance on automating an angular js website with login functionality. Need to click on the sign-in link and enter username and password, but facing issues with script execution speed being faster than page load. Here is my approach for handling this challenge:

'use strict'
// Normal Login 
require('../page-objects/loginPage.js');
var customerPortalHome = function () {

    this.clickSignIn = function () {
        browser.sleep(5000);
        element(by.linkText('Sign In')).click();
        browser.waitForAngular();
        browser.sleep(2000);
        return require('./loginPage.js');

    }

}


module.exports = new customerPortalHome();

Test Spec code:

var co = require('co');
var UI = require('./ui.js');
var ui = new UI();
var CustomerPage = require('../page-objects/customerPortalHome.js')

describe(" Smoke Test Login to the application", function () {

        it("test", co.wrap(function* () {
            var EC = protractor.ExpectedConditions;
             browser.get(ui.createStartLink());
            expect(browser.getTitle()).toContain("Portal");
            // Verify if user is able to Login into the application
            var loginPage =  CustomerPage.clickSignIn();
            loginPage.switchToFrame('account-sdk');
            var reportPage = loginPage.clickLogin('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a5e5e5e5e5e3a1d171b131654191517">[email protected]</a>', '$$$$$');
            expect(browser.getCurrentUrl()).toContain('reports');
            reportPage.clickSignOut();
            expect(browser.getCurrentUrl()).toContain("?signout");
            browser.sleep(800);
        }));

    }); 

The issue I'm facing is that the browser opens briefly and then closes during test execution.

My Onprepare method implementation:

beforeLaunch: function () {
        return new Promise(function (resolve) {
            reporter.beforeLaunch(resolve);
        });
    },
    onPrepare: function () {
        browser.manage().timeouts().implicitlyWait(5000);

        afterEach(co.wrap(function* () {
            var remote = require('protractor/node_modules/selenium-webdriver/remote');
            browser.driver.setFileDetector(new remote.FileDetector());



        }));

Answer №1

Avoid using browser sleep as it is not a recommended practice. Instead, wait for the element to appear and utilize the then function.

element(by.xpath("xpath")).click().then(function(){
      var list = element(by.id('id'));
      var until = protractor.ExpectedConditions;
      browser.wait(until.presenceOf(list), 80000, 'Message: took too long');
    });

Answer №2

browser.waitForAngularEnabled(true);
browser.wait(protractor.ExpectedConditions.visibilityOf($$('.sidebar-menu > div').get(index)), 60000);

This is my typical waiting strategy.

Answer №3

Have you ever experienced issues with ignoreSynchronisation not being properly included in your page objects helpers?

It's important to note that the login process can sometimes interfere with waitForAngular if there are numerous redirections taking place. I had to resort to using a temporary sleep method to ensure the page fully loads after logging in (as other methods like ignoreSync and EC didn't seem to work).

Don't forget to provide details about any errors you encounter for further assistance.

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

Simulate GET requests for a web application during Selenium testing with mock requests

I am currently working on an AngularJS application and utilizing Selenium for UI testing with C#. Within my web app, it is sending GET requests to a specific server (for example, http://localhost:8082). What is the most effective approach to simulate the ...

another option besides the nextElementSibling

I have a unique code that applies a style to the following div when another div is clicked, using nextElementSibling. var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("clic ...

Is there a way to consistently choose the final radio button every time?

I am currently working on automating a verification page using Selenium WebDriver. This page consists of three questions, which are randomly selected from a pool of 20 questions. Each question has five radio button options, totaling to 100 separate radio ...

Caution: Exercise caution when rendering components in React due to unstable_flushDiscreteUpdates

Trying to utilize map to render a component, but encountering a warning: Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering. MyBooks.js import React, { useState, useEffect } from 'react'; import Action ...

What is the best way to filter through JSON data in Vue.js?

I'm encountering an issue with my JSON file that I am rendering to a table. I have 11 columns including id, name, and more. I want to search by every column, but the functionality only works for one column. If I try to filter the data multiple times, ...

I'm having trouble getting my application to output to the console. What could be the issue?

In my cr-route.js file, I have a function that ensures the user is authenticated before displaying their name. module.exports = function (app, passport) { // ===================================== // HOME PAGE (with login links) ======== // == ...

IE is failing to trigger jAlert function

When I validate a text box by pressing the enter key on my keyboard, the validation works fine but the JAlert doesn't show up. However, when I call the same function on a button click, the alert shows in IE. I am quite confused by this behavior and wo ...

Looking to conceal a JavaScript file or minimize it from the web browser following production build in React

Upon executing the npm run build command using the script provided in my React App's package.json file, "scripts": { "start": "react-scripts start", "build": "set 'GENERATE_SOURCEMAP=false&apos ...

What is the most efficient method to import multiple MaterialUI components using a shared namespace without requiring the entire library to be imported

In order to prevent name mixing with other libraries, I want my MaterialUI components to be under the same namespace. For example, ensuring that <Box> references <MaterialUI.Box> and not <SomeOtherLibrary.Box>. Although it seems like a si ...

Express: utilizing rawBody or buffer for a specific endpoint

I am looking to access the rawBody (buffer) specifically for a POST request on one route within my application. Currently, I have the following code snippet in my app.js: app.use(bodyParser.json({ verify: function(req, res, buf) { req.rawBody = buf; }})) ...

Exploring Discord.js: Sorting a Collection of Retrieved Messages Using .sort()

This is a code example I am working with: .sort((a, b) => b.createdAt - a.createdAt) After fetching and filtering messages from a channel (which has a total of 8 messages), the filter operation returns a collection that may not be sorted in order. Ho ...

Extracting the Instagram followers of a specific account

Is it possible to scrape followers from an Instagram account using Selenium? I am attempting to do so with the following URL: I am encountering a problem where I am unable to scroll down a popup page, with the only option being to navigate back. Below is ...

Manipulating an element in the JSON data is causing alterations to the preceding elements

I am facing a challenge with two JSON arrays. $scope.arr1 = [ { "id": 1, "first_name": "Philip", "last_name": "Kim", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e6e7577732e5e737b7a777f78776c7b307d717 ...

Working with promises and Async/Await in Express/node can sometimes feel ineffective

Currently, I am delving into the world of node and express with the aim to create a function that can extract data from a CSV file uploaded by the user. My challenge lies in the fact that the data is being outputted as an empty array before it goes through ...

"Enhancing user experience: dynamically adding rows using a combo of jquery, ajax, and php

This is the layout of my table. Here is the result I'm getting. Below is the code snippet: <table width="100%" id="controltable" border="1"> <tr> <th> Product Name </th> <th> Product Pri ...

Scrolling to a specific position on a page when a Vue 3 component appears is a must-do for

When I click a button, my basic form component appears without using the router. I would like the scroll position of the form to automatically move down slightly (for example, on the y-axis at 40) once it is displayed. However, I am unsure of how to achi ...

Guide on utilizing the ejs template to iterate through an array of integers passed from an angularjs controller

Trying my hand at using angularjs with ejs to iterate over an array of integers received on the ejs template from an angularjs controller. Here's the code I've been working on: <div class="form-group" ng-controller="MyController as myCtrl"&g ...

Is there a more efficient method for performing multiple JavaScript replace calls rather than executing them individually?

In my Javascript code, I am creating a string that includes HTML content. Currently, my approach involves the following steps: var filter = ""; filter = util.getTemplate( "tmp_filter", temps ); filter = filter.replace( 'id="tmp_filter"','& ...

Using an asynchronous pipe filter with the ngFor loop in Angular 2 for efficient data

I have a JSON array that I need to iterate through in order to display data using an NGfor Loop. My goal is to apply filters after the data has been loaded to refine the results. The issue I am facing is that my pipe filter is returning 'cannot read p ...