Setting up an environment with persistentContext

Is your feature request related to a problem? Please describe. In order to test Chrome Extensions (and other persistent use cases), it would be nice if chrome can be launched in persistent mode. Explicitly passing a userDataDir to launch results in userDataDir option is not supported in `browserType.launch`. Use `browserType.launchPersistentContext` instead

Describe the solution you’d like

Some way or flag to override https://github.com/playwright-community/jest-playwright/blob/master/src/PlaywrightEnvironment.ts#L32 and use launchPersistentContext instead of launch. It can be as simple as the following, although it must be noted that we will no longer comply with playwright’s launch options.

if (launchOptions.userDataDir != null) {
  return playwrightInstance.launch(launchOptions.userDataDir, options)
}

An alternative would be to create a new option along the lines of persistentDataDir.

This would allow us to setup a custom environment for extensions like so:

class CustomEnvironment extends PlaywrightEnvironment {
  async setup() {
    await super.setup()
    let popupPageUrl

    const backgroundPage = await this.global.browser.waitForEvent('backgroundpage') // this is only available via chromium.launchPersistentContext
    const extensionId = backgroundPage.url().split('/')[2]
    popupPageUrl = `chrome-extension://${extensionId}/popup.html#`

    this.global.page.gotoPopup = function (url, options = {}) {
      const paddedUrl = !url.startsWith('/') ? `/${url}` : url
      return page.goto(popupPageUrl + paddedUrl, options)
    }
  }

  async teardown() {
    // Your teardown
    await super.teardown()
  }
}

[mmarkelov]

@karthikiyengar I just not sure about nice way of implementing this kind of tests. So I just build some small examples.

// jest-playwright.config.js
module.exports = {
    launchType: "PERSISTENT",
    userDataDir: "test",
}

// tests
beforeAll(async () => {
    await page.goto('https://jsfiddle.net/')
    const sign = await page.$eval('#actions > ul > li:nth-child(2) > a', (el) => el.innerHTML)
    if (sign === 'Sign in') {
        await page.goto('https://jsfiddle.net/user/login/')
        await page.fill('#id_username', 'username');
        await page.fill('#id_password', 'password');

        await page.click('.buttonCont');
    }
})

test('title', async () => {
    const title = await page.title()
    expect(title).toBe('JSFiddle - Code Playground')
})

test('should display nick', async () => {
    await page.goto('https://jsfiddle.net/user/fiddles/all/')
    const nick = await page.$eval('#user-top-bar strong', (el) => el.innerHTML)
    expect(nick).toContain('username')
})

afterAll(async () => {
    await context.close();
})

[karthikiyengar]

I’m pretty sure there’s a more DRY way to do this, but I’ve opened https://github.com/playwright-community/jest-playwright/pull/192 to kickstart a discussion. Note that the browser global will be undefined in case we use the persistentDataDir variable.

Additionally, it looks like there’s a playwright bug that needs to be addressed around this behaviour. I’ve opened an issue to track it here: https://github.com/microsoft/playwright/issues/2828