Managing window popups using WDIO - tips and tricks

Having some trouble handling a facebook auth dialog popup through webdriverio. Struggling to target the email and password fields for the facebook signup process.

Below is the code in question:

it('redirects after signup', () => {
    browser.url('/');

    const mainTab = browser.getCurrentTabId();
    browser.waitForExist('[data-test="facebook-login-button"]');
    browser.click('[data-test="facebook-login-button"]');

    // fb login form
    browser.waitForExist('#email');
    browser.setValue('#email', this.fbAccount.email);
    browser.setValue('#pass', this.fbAccount.password);
    browser.click('input[type="submit"]');

    // fb login authorization
    browser.waitForExist('button[type="submit"]');
    browser.click('button[type="submit"]');

    browser.switchTab(mainTab);
    browser.waitForExist('[data-test="intro-title"]');
});

Attempted to wait until the tab opens with the following code:

browser.waitUntil(() => browser.getUrl().indexOf('facebook.com') > -1);

Also attempted switching tabs more explicitly like so:

browser.switchTab(   
 browser.windowHandles().value[browser.windowHandles().value.length]
);

However, all of these variations lead to browser.waitForExist('#email'); timing out and not finding the email input after 30 seconds. The popup does open and is focused, but webdriver or selenium can't locate the required element even when I try manually clicking on it.

Any advice on how to handle this scenario correctly? Open to any recommendations on making this test successful.

javascriptseleniumwebdriverwebdriver-io

Answer №1

In order to ensure success, it is essential to locate the correct window handle instead of assuming that the first or last one will suffice. While you can't guarantee which window handle is needed, you can at least narrow down the possibilities.

Prior to filling out the Facebook login form code, I included the following snippet:

// wait for popup
browser.waitUntil(() => browser.windowHandles().value.length > 1);
const popupWindow = browser.windowHandles().value.filter((handle) => handle !== mainTab)[0];
browser.switchTab(popupWindow);

This approach ensured that I was handling the appropriate windowHandle before proceeding further. Selecting either the first or last window handle consistently proved unsuccessful for me.

Please note: when using WDIO 5, remember to utilize getWindowHandle.

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

Toggle the visibility of a table column based on user selection in Vue.js

I am having issues with displaying and hiding based on checkbox click events. Can anyone assist in identifying the mistake? When clicking on an ID, it should hide the ID column. Similarly, clicking on "first" should show/hide based on checkbox clicks, and ...

javascriptvue.jsvuejs3vuex

Struggling to create an access token with the Slack API

My goal is to retrieve an access token from the Slack API. When I use the code provided below, it generates an authorization URL containing a temporary code in the query string. Once permissions are granted, the process redirects to /slack/oauthcallback. ...

javascriptnode.jsaccess-tokenslack-api

"Use jQuery to select all the cells in a row except for the

I found a visually appealing table layout that looks like this : https://i.stack.imgur.com/oRxYP.png What caught my attention is how clicking on a row selects the entire row. Take the example in the image above, where the second row is highlighted upon s ...

javascriptjqueryhtmlajax

Executing test cases from multiple classes with prioritization in Selenium using TestNG

I have a specific requirement where I need to run test cases in a certain sequence across different classes and URLs. Here is the scenario: Class A TC1 Class B TC2 TC4 Class C TC3 The desired sequence for running these te ...

seleniumtestngtestng-annotation-test

Group records in MongoDB by either (id1, id2) or (id2, id1)

Creating a messaging system with MongoDB, I have designed the message schema as follows: Message Schema: { senderId: ObjectId, receiverId: ObjectId createdAt: Date } My goal is to showcase all message exchanges between a user and other users ...

javascriptmongodbtypescriptaggregation

Adjusting the background color of a MuiList within a React Material-UI Select component

Looking to customize the background color of the MuiList in a react material-ui Select component without affecting other elements. Specifically targeting the Select element with the name 'first'. Despite setting className and trying different cl ...

javascriptreactjsmaterial-ui

Changing the background color of .pane and .view elements in an Ionic web application using JavaScript

Looking to modify the background-color of two css selectors, .pane and .view, that are located within the ionic.css file. Despite multiple attempts to do so using JavaScript directly in the index.html file, the changes are not reflected. The code snippet ...

javascripthtmlcssangularionic-framework

Switch button - reveal/conceal details

I am looking for assistance in toggling the visibility of information when clicking on an arrow icon. I have attempted to use JavaScript, but it was unsuccessful. My goal is to hide the information below by clicking on the downward-facing arrow image , an ...

javascripthtmlcssangulartypescript

What is the best method for extracting information from pop-up windows using Python with the help of BeautifulSoup and Selenium?

I have been searching for a solution to scrape the patch notes from , but I am facing a challenge. The description of these patch notes is contained within pop-ups that load dynamically, making it difficult to extract data from the front end. If you click ...

pythonseleniumweb-scraping

VueJS - Validating Props with Objects

What is the best way to validate Object type props in VueJS to guarantee that certain fields are defined within the object? For instance, I need to make sure that the user prop includes 'name', 'birthDate', and other specific fields. ...

javascriptvue.jscomponents

Initiating a Page with Dynamic Modal Window according to Backend Exigencies

Dear experts, can you help me with a problem? I want to implement a modal window on an vb.aspx page if a specific condition from the codebehind query is true. How can I achieve this? Thank you! ...

javascripthtmlasp.netvb.netvisual-studio

Angular's window.onload event occurs when the page has finished

How can I achieve the equivalent of window.onload event in Angular? I am looking to fade out and remove my preloader, but only after all resources such as images are fully loaded. Using $viewContentLoaded alone does not cover this scenario since it indica ...

javascriptangularjs

The AJAX response is shown just a single time

My code is designed to send an ajax request when a form is submitted, specifically a search module. It works perfectly the first time the form is submitted, highlighting the table when data is returned. However, I am only able to see the effect once, as th ...

javascriptjqueryajax

Utilizing TypeScript to Populate an observableArray in KnockoutJS

Is there a way to populate an observableArray in KnockoutJS using TypeScript? My ViewModel is defined as a class. In the absence of TypeScript, I would typically load the data using $.getJSON(); and then map it accordingly. function ViewModel() { var ...

javascriptjsonknockout.jstypescript

The window fails to retain the scroll position when overflow is enabled

Whenever I click on a specific div, I use jQuery to dynamically apply overflow: hidden to the html and body. $(".mydiv").on("click", function() { $("html, body").css("overflow", "hidden"); }); However, this action causes the window to scroll to the to ...

javascriptjqueryhtmlcss

WebGl - Perspective skewing perspective

I've been working on implementing an oblique projection in WebGL, but I'm encountering an issue where the projection appears identical to ortho. Here's the snippet of code setting up the projection matrix: mat4.identityMatrix(pMatrix); ...

javascripthtmlmatrixwebgl

When I attempt to incorporate multiple sliders on a single page, I encounter difficulties in determining the accurate stopping position if the number of slides varies

I am having trouble setting the correct stop position for sliders with different numbers of slides on a page. When I have the same number of slides in each slider, everything works fine. However, I need to have a different number of slides in each slider ...

javascriptjqueryhtmlcss

What is the best way to encapsulate a function that uses `this.item.findElement()` from Selenium in a separate file?

I'm currently working on setting up a Selenium Webdriver and Cucumber.js test environment using Node.js. In the homePageSteps.js file, I have a check to verify if a banner exists on a page: Then('there should be a banner', async function() ...

javascriptnode.jsselenium-webdrivercucumberjs

Navigating websites: Clicking buttons and analyzing content

When looking to navigate a website's directory by utilizing buttons on the page or calling the associated functions directly, what language or environment is most suitable for this task? After experimenting with Python, Java, Selenium, and JavaScript, ...

javascriptjquerypythonhtmlselenium

Obtaining Data from Fetch Response Instance

Currently, I am utilizing the fetch method to execute API requests. While everything is functioning as expected, I have encountered a challenge with one specific API call due to the fact that it returns a string instead of an object. Normally, the API pro ...

javascriptajaxfetch-api