Jest-puppeteer: Feature Request: Support incognito browser contexts

[Niceplace]

Puppeteer 1.5.0 introduces a new feature, the support for incognito browser contexts.

Since all the tests seem to run in the same browser instance here, we could leverage this functionality to ensure isolation between all tabs. This could be useful to run multiple tests that require separate user sessions / cookies, etc.

I'm thinking the solution could be implemented here :

https://github.com/smooth-code/jest-puppeteer/blob/d06f58feca62d5ea5225d53a20035db6dd82d750/packages/jest-environment-puppeteer/src/PuppeteerEnvironment.js#L50

My suggestion :

• Have an "INCOGNITO" env variable (true|false)
• Based on the existence / value, create a page with or without the incognito browser context

Do you think I need to consider other things or that makes sense ?
If this seems like a reasonable solution, are you open to PRs ? :)

Thanks !

[Niceplace]

Update: Here's how I managed to make it working right now, it's not very pretty IMO but it works. If its run in headful mode you will see a window pop-up and close before the incognito ones appear.

As mentionned in the documentation, I created a custom environment in a file named jest-puppeteer-custom-env.js and I put it in my utils folder which is in my app's root directory.

const PuppeteerEnvironment = require('jest-environment-puppeteer');

class CustomEnvironment extends PuppeteerEnvironment {
  async setup() {
    await super.setup();
   // Close the existing page as we want to use the the incognito context
    this.global.page.close();
    // Create a new incognito browser context.
    this.global.context = await this.global.browser.createIncognitoBrowserContext();
    // Create a new page in a pristine context.
    this.global.page = await this.global.context.newPage();
  }

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

module.exports = CustomEnvironment;

I link to it in from the jest config of my package.json.

"jest": {
    "preset": "jest-puppeteer",
    "testEnvironment": "<rootDir>/utils/jest-puppeteer-custom-env.js",
    [... rest of the config]
}.

I wish I could redefine setup() without having to call super.setup(). I tried it but since jest-puppeteer-environment does not export readConfig() and I need to be able to call it, I had to drop that option.

[gregberge]

Yeah good idea, I would prefer to avoid environment variable and add an option in config incognitoContext that default to false.

[gregberge]

Follow up #133

[justfathi]

@Niceplace you could have added
this.global.__CONTEXT__ = await this.global.__BROWSER__.createIncognitoBrowserContext();

after this

this.global.__BROWSER__ = await puppeteer.connect({ browserWSEndpoint: wsEndpoint, slowMo: 5, defaultViewport: null });

in puppeteer_environment.js and use page = await global.__CONTEXT__.newPage(); instead of page = await global.__BROWSER__.newPage(); for all new pages

[mohammedalnuaimi]

@Niceplace you could have added
this.global.__CONTEXT__ = await this.global.__BROWSER__.createIncognitoBrowserContext();

after this

this.global.__BROWSER__ = await puppeteer.connect({ browserWSEndpoint: wsEndpoint, slowMo: 5, defaultViewport: null });

in puppeteer_environment.js and use page = await global.__CONTEXT__.newPage(); instead of page = await global.__BROWSER__.newPage(); for all new pages

Hi @justfathi I'm exactly trying to use those config line to open separate new browser context for each test, I've changed my config as you suggested, but still doesn't look like it's doing it,
plus there is no mention how to tweak the teardown.js for work for context
would appreciate your assistance if got it working

[justfathi]

@mohammedalnuaimi there is a better way to do this than what I mentioned above.

let page, context;
context = await global.__BROWSER__.createIncognitoBrowserContext();
page = await context.newPage();

If you want a new page/tab just use "await context.newPage();".

If you want a new browser then do "await global.__BROWSER__.createIncognitoBrowserContext();" which will give you the "context" and you can use this to get a new page/tab

[mohammedalnuaimi]

thanks @justfathi the thing is I'm using the custom implementation suggested by Jest-puppeteer which suggests setting up three config files: setup.js, environment and tearmdown.js
with those I'm not able to get the context to work!
the question here, where can similar thing you just mentioned in my case?

[mohammedalnuaimi]

@justfathi I think your previous answer triggered me thinking a bit deeper about it, so the solution for this is I only need to change the line in the test where we first create the page from
global.__BROWSER__.newPage();
To
const context = global.__BROWSER__.createIncognitoBrowserContext();
page = context.page

Thanks mate