Obtain the popup URL following a fresh request using JavaScript with Playwright

I'm having trouble with a button on my page that opens a popup in a new tab. I have set up a listener to capture the URL of the popup when it opens:

page.on('popup', async popup => {
       console.log('popup => ' + await popup.url());
    })

The issue is that the website initially opens the popup with an "about:blank" link, and only later loads the actual URL.

To try and solve this problem, I attempted to wait for a few seconds before retrieving the URL, but it still resulted in an empty string being returned:

page.on('popup', async popup => {
       await page.waitForTimeout(10000);
       console.log('popup => ' + await popup.url());
    })

After the main page opens the popup, it changes its URL which makes it difficult for me to access the correct URL associated with the popup.

If you have any suggestions or ideas on how to resolve this issue, I would greatly appreciate it! Thank you.

Answer №1

To capture the URL properly, assign it to a constant before displaying it in the console.

page.on('popup', async popup => {
     await page.waitForTimeout(10000);
     const url = await popup.url()
     console.log('popup => ' + url);
})

Answer №2

Before revealing the URL of a popup, it is advisable to ensure that navigation has been completed:

page.on('popup', async popup => {
  await popup.waitForNavigation();
  console.log('The URL of the popup is: ' + await popup.url());
})

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

No data returned from Ajax GET request

Utilizing Ajax with JavaScript, I am processing data on a PHP page using the GET method. Is it possible to send data from the PHP page when the GET query is empty? My goal is to have a live search feature that filters results based on user input. When a us ...

The search for d.ts declaration files in the project by 'typeRoots' fails

// Within tsconfig.json under "compilerOptions" "typeRoots": ["./@types", "./node_modules/@types"], // Define custom types for Express Request in {projectRoot}/@types/express/index.d.ts declare global { namespace Express { interface Request { ...

Every time I use my NodeJS MySQL Query function, the results I get are never

Working on a new gaming project involving MySQL for multiplayer functionality. Issue arises when requesting specific queries, where the system retrieves incorrect data or results from previous queries. dat("SELECT * FROM server1;"); Misdirected queries r ...

Provide a unique <li> attribute for the JavaScript function to utilize

Is there a way to pass specific attributes from dropdown options to a javascript function? I have tried using .data() and .attr(), but the console keeps showing "undefined". Any suggestions on how to achieve this in a cleaner and simpler way would be gre ...

Issue with page scrolling while utilizing the Wow.js jQuery plugin

While using the Wow.js plugin for scroll animations, I encountered an issue on mobile phones. When reaching the Pricings section, scrolling becomes impossible for some reason. I am utilizing Bootstrap 3 in this project. Despite attempting to modify the an ...

What could be the reason for my mongoose model failing to save in mongodb?

I am experiencing an issue with my simple Post model and route for creating posts. After submitting a new post using Postman, the request hangs for a moment before returning an error in JSON format. The model data is never saved successfully. Below is the ...

What is the best way to design a new class that will serve as the parent class for both of my existing classes, allowing them

I am facing a challenge with my programming classes. I have two classes, "Player" and "Enemy", each with similar methods and properties. I want them to inherit from a parent class that I'll create called "Game Object". How can I approach creating thi ...

Is it possible to modify or delete the question mark in a URL?

Currently, I am working on implementing a search bar for one of my websites hosted on Github. Below is the code I have written for the search bar: <!-- HTML for SEARCH BAR --> <div id="header"> <form id="newsearch" method ...

When resetting the function, make sure to move the class to the closest sibling element

I am currently utilizing a slider that employs the .prev and .next jQuery functions to toggle the active class, indicating which slide is being displayed. Here is the code responsible for this functionality. It identifies the current sibling with the acti ...

Using Typescript to define unions with multiple callback types

While in the process of converting my code to TypeScript, I encountered a dilemma. I created a generic foreach function that can handle arrays and objects, with different types of callbacks for iteration. However, I'm unsure how to specify the type wh ...

unable to assign values to this.props (appears as undefined or an empty array)

Upon setting up react/redux, I encountered a peculiar issue. When my component mounts, it should render the information stored in this.props.heroes.data. However, upon logging this data, I receive an unexpected value of [{id:1,heroname:'Batman',r ...

Tips for updating a URL using data obtained from a JSON response

As I loop through an array from JSON, I extract all the necessary information. For example, if I have cards for blog posts that include the title, short description, published date, and URL. When clicking on a card, it redirects to a corresponding page ba ...

The submission of the form using AJAX is currently experiencing issues

My current issue involves ajax not functioning as intended. I have a form that is being submitted through ajax to my php file for the purpose of updating my database. The database update is successful, but there seems to be a problem with the ajax function ...

Using back end proxy for content delivery

I am facing a challenge with my iOS app that requires proxying through a private server (HTTP / HTTPS proxy). Every time I attempt to address this issue on the client-side, new problems arise. How can I use the back end to effectively solve this problem? ...

Incorporating CSS Styles in EJS

Struggling with connecting my CSS files while using EJS. I've checked out another solution but still can't seem to get it right. Here is the code I used as a reference for my CSS file. EJS <html> <head> <meta charset="utf-8 ...

Using an if statement within a map function in a React component

I am facing a challenge with using an if statement inside a map function without changing the return value. Here is my code snippet: this.example = this.state.data.map((item) => { return( <div> {if(1 + 1 == 2){ dat ...

What are some ways you could utilize componentDidUpdate to make updates seamlessly without the need to manually refresh the page?

When looking at the data, the letter F represents the number of favorited movies and W indicates the number of watched movies. https://i.sstatic.net/HtGi2.png I have created a button that resets the count of favorited movies to 0. However, in order for t ...

Utilizing JavaScript to Retrieve Selected Parameter in SSRS Report

Currently, I am incorporating an SSRS report into my website using Iframe. I aim to share a link to the specific filtered report, which is why I require knowledge of the report's parameters. My query pertains to how I can identify these parameters (e ...

Is It Possible to Use Separate Stylesheets for Different Web Browsers?

I have been trying to implement a JavaScript code that loads a specific stylesheet based on the user's browser. However, it seems like the code is not functioning correctly as none of the stylesheets are being displayed. I have meticulously reviewed t ...

Unable to retrieve user attributes (provided as res.locals.user) in express and hbs view

Here is a snippet of code I use to verify user tokens and store the user information in req.locals: exports.isLoggedIn = async (req, res, next) => { if (req.cookies.jwt) { try { const decoded = await promisify(jwt.verify)( ...