Sunday, 16 April 2023

How to target the selector on new tab after clicking a[target="_blank"] - Failing to activate the new tab created

After clicking a[target="_blank"] new tab opens. How to get code to get new page object so I can access password input field? Using NodeJS, JavaScript, Puppeteer.

Navigation is working up to the point included below.

EDIT: I used the page.url() method to retrieve current URL and the URL of the newly created tab does not log to console, previous page logs.

I tried adjusting the script and received following errors Cannot read properties of undefined (reading 'page') - I thought adding a time delay would solve this but no go.

I was having this error but as the code is below I do not get this error: No node found for selector: #Password

I have looked at related issues I came across dheerajbhaskar GitHub issue and read up on related issues

  • #386
  • #3535
  • #978 and more

I tried to implement code from an accepted answer without any success. Using Puppeteer to get a handle to the new page after "_blank" click?

try {
      await sleep(2300)
// This block creates a new tab 
// I was previously using a selector and not mouse click API 
      await Promise.all([
        page.mouse.click(xToolsBtn, yToolsBtn, { delay: 2000 }),
      ])
      // NEW TARGET CREATED
      // Below is a snippet from an accepted answer but the the type method 
      // does not work
      // Seems like page is still not activated
      const [newTarget] = await Promise.all([
        // Await new target to be created with the proper opener
        new Promise((x) =>
          browser.on("targetcreated", (target) => {
            if (target.opener() !== page.target()) return
            browser.removeListener("targetcreated", arguments.callee)
            x()
          })
        ),
        // page.click('link')
      ])
      // Trying to input password without success
      const newPage = await newTarget.newPage()
      await newPage.type("#Password", process.env.PASSWORD, {
        delay: randomGenerator,
      })
    } catch (err) {
      console.error(
        "LOGIN BUTTON FAIL",
        err.message
      )
    }

Alternatively atempt#1: I tried to select the input via mouse x, y co-ordinates which activates the input field but this returns the following error" No node found for selector: #Password

Alternatively atempt#2:

//* WAIT FOR TARGET
    try {
      await sleep(2300)
      await Promise.all([
        page.mouse.click(xToolsBtn, yToolsBtn, { delay: 2000 }),
      ])
      sleep(5000)
      await page.evaluate(() => window.open(`${loginUrl3}`))
      const newWindowTarget = await browser.waitForTarget(
        (target) => target.url() === `${loginUrl3}`
      )
      console.log("GOT TARGET")
      await newWindowTarget.type("#Password", process.env.PASSWORD, {
        delay: randomGenerator,
      })
    } catch (err) {
      console.log("WAIT FOR TARGET FAILED")
    }

Note: URLS are randomly generated so I would be curious what if any work around there is to use current URL. I would assume the new tab created would still need to be activated...



from How to target the selector on new tab after clicking a[target="_blank"] - Failing to activate the new tab created

No comments:

Post a Comment