Protractor - Not waiting for all elements to load before opening a popup window

Despite my efforts to ensure the stability of my test, there are instances where it does not wait for all elements within an integrated popup, resulting in failure.

This particular test case is quite intricate as it involves nested if statements to execute relevant code for both FireFox and Chrome (as they handle popup windows differently).

Furthermore, there is a secondary condition where the test should not click on the element with id="loadLogin" if the user is already logged in.

The CSS styling of the tested element:

<input type="submit" value="Log in to your PayPal account" id="loadLogin" name="login_button" class="parentSubmit">

Test case - code:

 it('Existing Client LiveSite - Payments - Continue To Payment', function () {
    element(by.binding("client_zone.payous.new.continue")).click();
    waitPageToLoad();
});

it('Existing Client LiveSite - Payments - Perform a payment by PayPal', function () {
    var loadLogin = element(by.id("loadLogin"));

    browser.wait(EC.visibilityOf(element(by.binding("buttonText"))), 15000);
    element(by.binding("buttonText")).click();

  if (browser === 'firefox') {
        browser.getAllWindowHandles().then(function (handles) {      
            browser.switchTo().window(handles[handles.length - 1]);

            element.all(by.id('loadLogin')).then(function(){

            // expect(browser.driver.getCurrentUrl()).toContain('www.paypal.com');
              if (loadLogin) {
                    loadLogin.click();
                    browser.driver.sleep(3000);
                                             element(by.id("login_email")).sendKeys("username");
                     element(by.id("login_password")).sendKeys("password");
                    browser.driver.sleep(1000);
                    element(by.id("submitLogin")).click();
                    browser.driver.sleep(5000);
                    element(by.id("submit.x")).click();
                    browser.driver.sleep(10000);
                    console.log("-=-=- first condition - FF -=-=-");
                } else {
                     element(by.id("login_email")).clear();
                     browser.driver.sleep(1000);
                                              element(by.id("login_email")).sendKeys("username");
                     element(by.id("login_password")).sendKeys("password");
                     browser.driver.sleep(1000);
                     element(by.id("submitLogin")).click();
                     browser.driver.sleep(10000);
                     element(by.id("submit.x")).click();
                     browser.driver.sleep(10000);
                     console.log("-=-=- second condition - FF -=-=-")
                }
            });

            browser.getAllWindowHandles().then(function (handles) {
                browser.switchTo().window(handles[0]);
            });
        });
    }

    else {
        browser.getAllWindowHandles().then(function (handles) {      
            browser.switchTo().window(handles[1]);

             element.all(by.id('loadLogin')).then(function(){
            // expect(browser.driver.getCurrentUrl()).toContain('www.paypal.com');
              if (loadLogin) {
                    loadLogin.click();
                    browser.driver.sleep(3000);
                                             element(by.id("login_email")).sendKeys("username");
                     element(by.id("login_password")).sendKeys("password");
                    browser.driver.sleep(1000);
                    element(by.id("submitLogin")).click();
                    browser.driver.sleep(5000);
                    element(by.id("submit.x")).click();
                    browser.driver.sleep(10000);
                    console.log("-=-=- first condition - Chrome -=-=-");
                } else {
                     element(by.id("login_email")).clear();
                     browser.driver.sleep(1000);
                     element(by.id("login_email")).sendKeys("username");
                     element(by.id("login_password")).sendKeys("password");
                     browser.driver.sleep(1000);
                     element(by.id("submitLogin")).click();
                     browser.driver.sleep(10000);
                     element(by.id("submit.x")).click();
                     browser.driver.sleep(10000);
                     console.log("-=-=- second condition - Chrome -=-=-")
                }
            });

            browser.getAllWindowHandles().then(function (handles) {
                browser.switchTo().window(handles[0]);
            });
        });
    };
});

Error:

c:\automation\tests>protractor conf.js
Using the selenium server at http://localhost:4444/wd/hub
[launcher] Running 1 instance(s) of WebDriver
imapConnected
LiveSite Portal - Existing client pay by PayPal
  LiveSite - Home Page - pass
  Existing Client LiveSite - Payments - Payment form - pass
  LiveSite Portal - Existing client payments - Welcome note for existing client
 - pass
  Existing Client LiveSite - Payments - Continue To Payment - pass
-=-=- first condition - Chrome -=-=-
  Existing Client LiveSite - Payments - Perform a payment by PayPal - fail


Failures:

  1) LiveSite Portal - Existing client pay by PayPal Existing Client LiveSite -
 Payments - Perform a payment by PayPal
   Message:
     ElementNotVisibleError: element not visible
  (Session info: chrome=43.0.2357.130)
  (Driver info: chromedriver=2.14.313457 (3d645c400edf2e2c500566c9aa096063e707c9cf),platform=Windows NT 6.3 x86_64)...
  ...
javascriptselenium-webdriverautomationjasmineprotractor

Answer №1

It seems like the issue could be related to not switching to the correct window due to the dynamic nature of window orders. Here is a suggested approach:

  1. Prior to clicking on the loadLogin button, save the handle of the main window. Window handles are essentially an array of hashes.
  2. Upon clicking on login, switch to the window that is NOT the main window. This allows for seamless login without blindly toggling between windows. It may also streamline the logic for handling different browsers (Firefox vs Chrome).

You can implement the following pseudo code:

var mainWindow;
browser.getAllWindowHandles().then(
    function(handles) {
        mainWindow = handles[0]; //assuming only one window at this point
    }
);

browser.getAllWindowHandles().then(function (handles) {      
   handles.forEach(function(handle) {
     if (handle !== mainWindow) {
        browser.switchTo().window(handle);
        element.all(by.id('loadLogin')).then(function(){ 
            //perform additional tasks
        }
     }
   }
});

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

Investigating and solving issues in Javascript and JQuery

Let me walk you through the JavaScript process I am working on: When a text is entered in the input bar and submitted, the script dynamically creates a new "div" element and places the text inside it. This new div is then appended to an existing div calle ...

javascriptjqueryhtmlcssarrays

Zeroclipboard will fail to copy the text

I seem to be encountering an issue with the Zeroclipboard system. I suspect there might be an error in my code. Even though it indicates that the content has been copied, it actually hasn't been. The code I am currently using is as follows: <scri ...

javascriptjqueryhtml

Tips for Quickly Filtering a Large JSON Dataset in ReactJS

I am currently working with a large JSON dataset that looks something like this: [ {"date":"2020-03-02", "state:"Delhi", "district":"East Delhi" ..... ..... } ..... ..... ] I have a variety of filters avail ...

javascriptjsonreactjs

Tips for ensuring an element stays anchored at the bottom even when the keyboard is displayed

I recently encountered a situation on one of my pages where an element positioned at the bottom using absolute positioning was causing issues when the keyboard was opened, as it would move to the middle of the page unexpectedly. While this may seem like a ...

javascripthtmlcssreactjs

Sub properties are being systematically removed from the data as it travels from the Node/Express server to the React client

An unforeseen issue is occurring during data transmission from the server to the client, causing the loss of data from sub-properties before any action can be taken on it. This issue cannot be replicated elsewhere, as data querying and retrieval functions ...

javascriptreactjsnode.jsmongodbexpress

Utilizing VUEJS 3 to incorporate lists into firebase

I have a collection of items called 'order' that I want to store in my cloud firestore database. order: [ { product: 'Coffee', productivity: '20', quantity: '8', }, ...

javascriptfirebasevue.jsgoogle-cloud-firestorepinia

What is the best way to combine cells within a single column?

Exploring the code snippet utilizing ag-grid with Vue 3. <script setup lang="ts"> import "ag-grid-community/dist/styles/ag-grid.css"; import "ag-grid-community/dist/styles/ag-theme-alpine.css"; import { AgGridVue } from ...

javascriptvue.jsag-gridag-grid-vue

Enhance the language with react-intl and MobX State Tree integration

Currently, I am integrating react-intl with Mobx state tree for the first time. Within my project, there are two buttons located in the header section - one for 'it' and the other for 'en'. Upon clicking these buttons, the selected lan ...

javascriptreactjsmobxreact-intlmobx-state-tree

I developed a straightforward MVC application that sends an HttpGet request and delivers an array containing 7 randomly generated, unidentified numbers to the View. [RESOLVED

A new MVC app was launched with a simple task of generating 7 random numbers between 0 and 9 to be placed at positions 1 through 7 (without starting with 0). Initially, the numbers are hidden with "X" marks. When the user clicks on the "Submit" button and ...

javascriptc#jqueryajaxasp.net-core

What is the best way to choose all the checkboxes in a checkbox list, such as a ToDo List?

I am currently working on developing a to-do list where each item includes a checkbox. My goal is to be able to select these checkboxes individually by clicking on them. Furthermore, I would like the checkboxes to toggle between being checked and unchecked ...

javascripthtmlcssaddeventlistener

Tips for managing unfinished transactions through Stripe

I have successfully set up a checkout session with Stripe and included a cancel_url as per the documentation. However, I am facing an issue where the cancel_url is only triggered when the user clicks the back button provided by Stripe. What I want to achie ...

javascriptnode.jsangularexpressstripe-payments

Adjusting the interface of a third-party TypeScript library

I am currently working on modifying a third-party interface. I'm curious about why this particular code is successful: import { LoadableComponentMethods as OldLoadableComponentMethods } from '@loadable/component'; declare module "load ...

javascriptreactjstypescript

What is the best way to adjust a map to completely fill the screen?

I am experiencing an issue with my Openlayer map not fitting to full screen automatically. Despite trying various settings, I am unable to resolve this issue. Can anyone suggest what might be causing this problem? Thank you in advance https://i.stack.imgu ...

javascripthtmlcssreactjs

I am experiencing issues with jquery functionality in my PHP file

I attempted to create a show-hide div using jQuery and ran into an issue. It was functioning properly with HTML, but when I converted it to PHP, the click event stopped working! While working on my college project, I tried to show and hide a div using jQu ...

javascriptphpjqueryhtmlajax

Winston is set up to only record .info errors and does not save any errors to a file or a MongoDB database

Currently, I am utilizing express-mongoose as my backend framework and winston as my logging tool. However, I have encountered an issue where winston only seems to log info messages and not errors. The logs can be found in server.log https://i.stack.imgur. ...

javascriptnode.jsexpressmongoosewinston

Continuously transmitting PNG files to a server. I intend to instruct the receiving browser to automatically refresh at set intervals

I have a continuous task where my code is uploading a png to an http server every few seconds. I am looking for a way to implement some kind of marker that will trigger the browser to automatically refresh every 500ms, either through browser-side javascrip ...

javascriptnode.jshttpar.drone

I am attempting to utilize Selenium 2 with Python bindings, however, I am encountering an import error

After installing Selenium 2 with pip install selenium, I decided to test it by copying some example tests: from selenium import webdriver from selenium.webdriver.common.keys import Keys driver = webdriver.Firefox() driver.get("http://www.python.org") ass ...

pythonwebdriverselenium-webdriver

Three.js fails to display materials

I am currently working on exporting a JSON file from Blender and then rendering it using three.js. As my base code, I have used the following reference: https://github.com/jpetitcolas/webgl-experiments/tree/gh-pages/01-rotating-mesh Initially, when I run ...

javascript3dthree.js

Selenium and choosing from a dropdown menu without selection opportunities

Is it feasible to use Selenium to click on a non-select dropdown list? I am looking to interact with a website: I need to click on the "Filter by programme" option and then scrape the data before returning to the first page. ...

seleniumselenium-webdriverxpathdropdownwebdriverwait

What is the best way to incorporate multiple JS files into Rails 6 using a template that I came across on the web

So, here's the dilemma... I've spent almost a month on this project and I'm at a loss for what to do next. I came across a fantastic Bootstrap theme online that includes a plethora of JavaScript files. Wanting to build the website in Rails 6 ...

javascriptruby-on-railsbootstrap-4ruby-on-rails-6webpacker