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

Question

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...

Answer 1

Addressing just the question in the title, "How to target the selector on new tab after clicking a[target="_blank"]" -

Handling newly opened tabs in Playwright is far from intuitive if you're not used to it. A summary of how they work:

If you click a link in your test with target="_blank", which opens a new tab, the page object you're working with still refers to the original page/tab you opened the link on.

To get ahold of the new page, you have to use the context object, which you can destructure in the test params like you do page, and then use the waitForEvent('page') method.

test('my component works', async ({context, page}) => { // get the `context` object

// ...

const [newPage] = await Promise.all([
    context.waitForEvent('page'), // get `context` by destructuring with `page` in the test params; 'page' is a built-in event, and **you must wait for this like this,**, or `newPage` will just be the response object, rather than an actual Playwright page object.
    page.locator('text=Click me').click() // note that, like all waiting in Playwright, this is somewhat unintuitive. This is the action which is *causing the navigation*; you have to set up the wait *before* it happens, hence the use of Promise.all().
])

 await newPage.waitForLoadState(); // wait for the new tab to fully load
 // now, use `newPage` to access the newly opened tab, rather than `page`, which will still refer to the original page/tab.
 await expect(newPage).toHaveURL('http://www.someURL.com');
 await newPage.locator('text=someText');

Answer 2

managed to solve this together (Linker :)

Process

First, we mapped the target being created to check for focus

browser.on('targetcreated', function (target) {
    console.log('New tab:');
    console.log(target);
});

We saw the URL is trying to open - for some reason the URLs in the target were empty. We re-installed stuff to rule out weird dependency bugs, then figured there's a focus issue.

Workaround

To solve it, we need to wait for the .newPage() to open before goto'ing to the URL, calling bringToFront() and then waiting for it to load (short sleep is the easy way). Once we did that, we had a working POC to start from.

Relevant part from the solution:

let mappedURL = tabs
  .map((e, index) => e.url())
  .filter((e, idx) => idx == 2)
console.log("MAPPED URL ", mappedURL)
sleep(2500)
const page3 = await browser.newPage()
await page3.goto(`${mappedURL}`)
await page3.bringToFront()

Ref

Here's a cool SO Answer showing how to use once syntax to test the event. Happy we were able to solve it, and I hope the process helps other people out.