Playwright How To Return page from a function that creates a browser context?

I am trying to make a function that opens the browser and logs into the page using basic auth. I would like the function to return the page so I can pick it up in the test and continue to use it.

When I pass browser to the function I need to create a new context inside the function so I can login with basic auth.

Creating a new browser context in the function works fine to open the page and login.

The problem is that I cannot return the new page from the function. The page that is returned from the function has no intellisense and fails when I attempt to use it in the normal way --- such as doing: page.locator('#id1').click() ---> test fails

// Custom Open Browser Login Function
export async function openBrowserAndLogin(browser, username, password){

  const context = await browser.newContext({
    httpCredentials:{
      username: username,
      password: password
    },
  })

  const page = await context.newPage()
  await page.goto('websiteurl.com')
  return page
}


// Test
import { test } from '@playwright/test';
import {openBrowserAndLogin} from '../customfunctions.openBrowser.mjs'

test('login and do stuff', async ({ browser }) => {
  
  const page = openBrowserAndLogin(browser,'user1', 'secretpassword')

  page.locator('#account').click() // no methods exist on this page object???? Test Fail
  
})

So basically I am importing a function into the test. I pass the browser to the function. The function uses browser to create a new context, logs into application, and returns a new page.

The page returned from the function is dead.

Does anyone know a way to return a page from a context created inside an imported function?

Or if there is some other way to accomplish this that would be helpful too.

openBrowserAndLogin is not a good pattern. This abandons the reference to the browser context object so you can never close it, thereby leaking memory and potentially hanging the process (unless the test suite ungracefully terminates it for you).

Instead, prefer to let Playwright manage the page:

test('login and do stuff', async ({ page }) => {
//                                  ^^^^

Now you can add credentials with Playwright's config or test.use:

import {test} from "@playwright/test"; // ^1.30.0

test.describe("with credentials", () => {
  test.use({
    httpCredentials: {
      username: "user1",
      password: "secretpassword"
    }
  });

  test("login and do stuff", async ({page}) => {
    await page.goto("https://example.com/");
    await page.locator("#account").click();
  });
});

Notice that I've awaited page.locator('#account').click().

Another option is to use fixtures.

You’re just missing await.

openBrowserAndLogin is an async function, so it’s returning a promise, which wouldn’t have the page methods itself. You need to unwrap it first, like so:

const page = await openBrowserAndLogin(browser,'user1', 'secretpassword')

That being said, I would definitely recommend doing the auth in global setup with storageState if you need the same login for every test and then just use the page fixture, or you could always override the page fixture or add your own or something similar. There are other potential ways too. But for what you have, just that small piece was missing.

Note that it’s also good practice to close your context if you manually create one.