Playwright Tutorial - Handle Multiple Tabs with Playwright

How to handle multiple tabs is always a question in automation. Playwright provides an easy way to handle multiple tabs at once by creating multiple page objects. The good part is each tab of the browser behaves like an active tab, with no need to switch tabs by changing focus. So basically, with the playwright you can open multiple tabs in the browser and interact with those at the same time. 

Also, the biggest concern for the automation is a link that opens in the new tab. With Plawright you can handle redirected links that open in the new tab and start interaction with that tab as well. 

I have created a YouTube video in the "software testing tips and tricks" channel where I have shown with live code 
1. How to open multiple tabs in the browser using Playwright and javascript and how to interact with those?
2. How to handle links that open in the next tab and automate them?

Here is the code to Handle multiple tabs using Playwright and Javascript for beginners. For all the code and scenarios, watch the above YouTube video to understand it perfectly. 

test('verify multiple tabs', async({context})=>{

const page = await context.newPage();

await page.goto("https://twitter.com/")

const newPage = await context.newPage();

await newPage.goto("https://facebook.com/")

// Wait for Page Load

await newPage.waitForLoadState();

// title of new tab page

console.log(await newPage.title());

// title of existing page

console.log(await page.title());

})

For any queries or suggestions feel free to comment on YouTube or reach out to social media pages.
Here are the links YouTube, Reddit, Facebook, and Twitter