javascript - switch tabs in playwright test - Stack Overflow

admin管理员组

文章数量:1203443

I'm trying to switch between tabs using playwright tests but it's not taking control of windows element. Do we have any method similar to selenium driver.switchto().window() in playwright?

const { chromium } = require('playwright');
(async () => {
    const browser = await chromium.launch({ headless: false, args: ['--start-maximized'] });
    const context = await browser.newContext({ viewport: null });
    context.on("page", async newPage => {
        console.log("***newPage***", await newPage.title())
    })
    const page = await context.newPage()
    const navigationPromise = page.waitForNavigation()

    // dummy url
    await page.goto('/')
    await navigationPromise

    // User login
    await page.waitForSelector('#username-in')
    await page.fill('#username-in', 'username')
    await page.fill('#password-in', 'password')
    await page.click('//button[contains(text(),"Sign In")]')
    await navigationPromise

    // User lands in application home page and clicks on link in dashboard 
    // link will open another application in new tab 
    await page.click('(//span[text()="launch-app-from-dashboard"])[2]')

    await navigationPromise
    await page.context()
    // Waiting for element to appear in new tab and click on ok button
    await page.waitForTimeout(6000)
    await page.waitForSelector('//bdi[text()="OK"]')
    await page.click('//bdi[text()="OK"]')

})()

I'm trying to switch between tabs using playwright tests but it's not taking control of windows element. Do we have any method similar to selenium driver.switchto().window() in playwright?

const { chromium } = require('playwright');
(async () => {
    const browser = await chromium.launch({ headless: false, args: ['--start-maximized'] });
    const context = await browser.newContext({ viewport: null });
    context.on("page", async newPage => {
        console.log("***newPage***", await newPage.title())
    })
    const page = await context.newPage()
    const navigationPromise = page.waitForNavigation()

    // dummy url
    await page.goto('https://www.myapp.com/')
    await navigationPromise

    // User login
    await page.waitForSelector('#username-in')
    await page.fill('#username-in', 'username')
    await page.fill('#password-in', 'password')
    await page.click('//button[contains(text(),"Sign In")]')
    await navigationPromise

    // User lands in application home page and clicks on link in dashboard 
    // link will open another application in new tab 
    await page.click('(//span[text()="launch-app-from-dashboard"])[2]')

    await navigationPromise
    await page.context()
    // Waiting for element to appear in new tab and click on ok button
    await page.waitForTimeout(6000)
    await page.waitForSelector('//bdi[text()="OK"]')
    await page.click('//bdi[text()="OK"]')

})()

• javascript
• playwright

Share Improve this question Follow edited Oct 14, 2020 at 10:58 hardkoded 21.6k33 gold badges6060 silver badges7474 bronze badges asked Oct 14, 2020 at 7:24 SujithSujith 24311 gold badge55 silver badges1111 bronze badges 1

• I think my answer here can help stackoverflow.com/questions/64277178/… – hardkoded Commented Oct 14, 2020 at 11:00

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 12

Assuming "launch-app-from-dashboard" is creating a new page tag, you can use the following pattern to run the subsequent lines of code on the new page. See multi-page scenarios doc for more examples.

// Get page after a specific action (e.g. clicking a link)
const [newPage] = await Promise.all([
  context.waitForEvent('page'),
  page.click('a[target="_blank"]') // Opens a new tab
])
await newPage.waitForLoadState();
console.log(await newPage.title());

Since you run headless, it might also be useful to switch the visible tab in the browser with page.bringToFront (docs).

The browserContext?.pages() is an array that contains the tabs opened by your application, from there you can use a temporal page to make a switch, once completed your validations you can switch back.

playwright.pageMain: Page = await playwright.Context.newPage();
playwright.pageTemp: Page; 

// Save your current page to Temp 
playwright.pageTemp = playwright.pageMain;

// Make the new tab launched your main page
playwright.pageMain = playwright.browserContext?.pages()[1];
expect(await playwright.pageMain.title()).toBe('Tab Title');

it('Open a new tab and check the title', async function () {
  await page.click(button, { button: "middle" }); //to open an another tab
  await page.waitForTimeout(); // wait for page loading 
  let pages = await context.pages();
  expect(await pages[1].title()).equal('Title'); /to compare the title of the second page
})

Assume you only created one page (via browser context), but for some reason, new pages/tabs open. You can have a list of all the pages by : context.pages, Now each element of that list represents a <class 'playwright.async_api._generated.Page'> object. So, now you can assign each page to any variable and access it. (For eg. page2 = context.pages[1])

本文标签： javascriptswitch tabs in playwright testStack Overflow