multiple tabs scenario in playwright

Question

What is the correct way to work on a new browser Tab using playwright. Here is my scenario After I navigate to a page 'a' I click on link 'x' which opens a new browser tab i.e. a new page 'b'. (Both pages has web tables on it.) Now I want to work on page 'b' web table. But it appears that I end up working on page 'a' web table instead

        const [tabs] = await Promise.all([
        this.page.context().waitForEvent('page'),
        this.page.click(`x`)
    ])
    await tabs.waitForLoadState('networkidle');
    expect(await tabs.title()).toEqual('some title');
    // get the number of open tabs
    const openTabs = await tabs.context().pages()
    await openTabs[1].bringToFront()

At this point I want to work on page 'b', Appreciate any help

Answer 1

So I have a global page object in my framework and my test helper functions is using locator which was formed using the global page object. On a multiple browser tab scenario I still want to use my test helper function on which locators were formed using global page object, but the problem is now One [Browser] instance has multiple [Page] instances.

        const [pages] = await Promise.all([
        this.page.context().waitForEvent('page'),
        this.page.click(`X`)

    ])
    await pages.waitForLoadState('networkidle');
    const tabs = pages.context().pages();
    // gives me title of page on new tab
    await console.log(await pages.title())
    // gives me title of page on existing tab
    await console.log(await tabs[0].title())
    // gives me title of page on new tab
    await console.log(await tabs[1].title())
    // this way I can use my existing test helper functions
    this.page = tabs[1]