feat: add incognito context support (#140)

Closes #133
argos-ci · Sep 26, 2018 · 5b8983a · 5b8983a
1 parent 2324f71
commit 5b8983a
Show file tree

Hide file tree

Showing 13 changed files with 66 additions and 9 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -14,6 +14,7 @@ module.exports = {
   globals: {
     page: true,
     browser: true,
+    context:true,
     jestPuppeteer: true,
   },
   rules: {

diff --git a/README.md b/README.md
@@ -99,7 +99,9 @@ Other options are documented in [jest-dev-server](https://github.com/smooth-code
 
 ### Configure Puppeteer
 
-Jest Puppeteer automatically detect the best config to start Puppeteer but sometimes you may need to specify custom options. All Puppeteer [launch](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions) or [connect](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerconnectoptions) options can be specified in `jest-puppeteer.config.js` at the root of the project. Since it is JavaScript, you can use all stuff you need, including environment.
+Jest Puppeteer automatically detects the best config to start Puppeteer but sometimes you may need to specify custom options. All Puppeteer [launch](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions) or [connect](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerconnectoptions) options can be specified in `jest-puppeteer.config.js` at the root of the project. Since it is JavaScript, you can use all the stuff you need, including environment.
+
+The browser context can be also specified. By default, the browser context is shared. `incognito` is available if you want more isolation between running instances. More information available in [jest-puppeteer-environment readme](https://github.com/smooth-code/jest-puppeteer/blob/master/packages/jest-environment-puppeteer/README.md)
 
 ```js
 // jest-puppeteer.config.js
@@ -108,12 +110,13 @@ module.exports = {
     dumpio: true,
     headless: process.env.HEADLESS !== 'false',
   },
+  browserContext: 'default'
 }
 ```
 
 ### Configure ESLint
 
-Jest Puppeteer exposes two new globals: `browser`, `page`. If you want to avoid errors, you can add them to your `.eslintrc.js`:
+Jest Puppeteer exposes three new globals: `browser`, `page`, `context`. If you want to avoid errors, you can add them to your `.eslintrc.js`:
 
 ```js
 // .eslintrc.js
@@ -124,6 +127,7 @@ module.exports = {
   globals: {
     page: true,
     browser: true,
+    context: true,
     jestPuppeteer: true,
   },
 }
@@ -230,6 +234,10 @@ it('should fill an input', async () => {
 })
 ```
 
+### `global.context`
+
+Give access to a [browser context](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-browsercontext) that is instantiated when the browser is launched. You can control whether each test has its own isolated browser context using the `browserContext` option in your `jest-puppeteer.config.js`.
+
 ### `global.expect(page)`
 
 Helper to make Puppeteer assertions, [see documentation](https://github.com/smooth-code/jest-puppeteer/tree/master/packages/expect-puppeteer/README.md#api).

diff --git a/jest-puppeteer.config.js b/jest-puppeteer.config.js
@@ -8,6 +8,7 @@ module.exports = {
   launch: {
     headless: process.env.CI === 'true',
   },
+  browserContext: process.env.INCOGNITO ? 'incognito' : 'default',
   server: {
     command: `PORT=${port} node server`,
     port,

diff --git a/package.json b/package.json
@@ -5,12 +5,13 @@
   ],
   "scripts": {
     "build": "lerna run build",
-    "ci": "yarn build && yarn lint && yarn test --ci",
+    "ci": "yarn build && yarn lint && yarn test --ci && yarn test:incognito --ci",
     "dev": "lerna run build --parallel -- --watch",
     "format": "prettier --write \"packages/**/*.{js,json,md}\" \"*.{js,json,md}\"",
     "lint": "eslint .",
     "release": "lerna publish --conventional-commits && conventional-github-releaser --preset angular",
-    "test": "jest --runInBand"
+    "test": "jest --runInBand",
+    "test:incognito": "INCOGNITO=true jest --runInBand"
   },
   "devDependencies": {
     "@babel/cli": "^7.1.0",

diff --git a/packages/jest-environment-puppeteer/README.md b/packages/jest-environment-puppeteer/README.md
@@ -60,6 +60,10 @@ it('should fill an input', async () => {
 })
 ```
 
+### `global.context`
+
+Give access to a [browser context](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-browsercontext) that is instantiated when the browser is launched. You can control whether each test has its own isolated browser context using the `browserContext` option in your `jest-puppeteer.config.js`.
+
 ### `global.jestPuppeteer.debug()`
 
 Put test in debug mode.
@@ -79,6 +83,9 @@ You can specify a `jest-puppeteer.config.js` at the root of the project or defin
 
 - `launch` <[object]> [All Puppeteer launch options](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions) can be specified in config. Since it is JavaScript, you can use all stuff you need, including environment.
 - `connect` <[object]> [All Puppeteer connect options](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerconnectoptions) can be specified in config. This is an alternative to `launch` config, allowing you to connect to an already running instance of Chrome.
+- `browserContext` <[string]>. By default, the browser context (cookies, localStorage, etc) is shared between all tests. The following options are available for `browserContext`:
+  - `default` Each test starts a tab, so all tests share the same context.
+  - `incognito` Each tests starts an incognito window, so all tests have a separate, isolated context. Useful when running tests that could interfere with one another. (*Example: testing multiple users on the same app at once with login, transactions, etc.*)  
 - `exitOnPageError` <[boolean]> Exits page on any global error message thrown. Defaults to `true`.
 - `server` <[Object]> Server options allowed by [jest-dev-server](https://github.com/smooth-code/jest-puppeteer/tree/master/packages/jest-dev-server)
 

diff --git a/packages/jest-environment-puppeteer/package.json b/packages/jest-environment-puppeteer/package.json
@@ -21,7 +21,7 @@
     "prepublishOnly": "yarn build"
   },
   "peerDependencies": {
-    "puppeteer": "^1.0.0"
+    "puppeteer": "^1.5.0"
   },
   "dependencies": {
     "chalk": "^2.4.1",

diff --git a/packages/jest-environment-puppeteer/src/PuppeteerEnvironment.js b/packages/jest-environment-puppeteer/src/PuppeteerEnvironment.js
@@ -39,7 +39,21 @@ class PuppeteerEnvironment extends NodeEnvironment {
       ...config.launch,
       browserWSEndpoint: wsEndpoint
     })
-    this.global.page = await this.global.browser.newPage()
+
+    if (config.browserContext === 'incognito') {
+      // Using this, pages will be created in a pristine context.
+      this.global.context = await this.global.browser.createIncognitoBrowserContext()
+    } else if (config.browserContext === 'default' || !config.browserContext) {
+      /**
+       * Since this is a new browser, browserContexts() will return only one instance
+       * https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#browserbrowsercontexts
+       */
+      this.global.context = await this.global.browser.browserContexts()[0]
+    } else {
+      throw new Error(`browserContext should be either 'incognito' or 'default'. Received '${config.browserContext}'`)
+    }
+
+    this.global.page = await this.global.context.newPage()
     if (config && config.exitOnPageError) {
       this.global.page.addListener('pageerror', handleError)
     }
@@ -88,8 +102,14 @@ class PuppeteerEnvironment extends NodeEnvironment {
   }
 
   async teardown() {
+    const config = await readConfig()
     this.global.page.removeListener('pageerror', handleError)
-    await this.global.page.close()
+
+    if (config.browserContext === 'incognito') {
+        await this.global.context.close()
+    } else {
+        await this.global.page.close()
+    }
   }
 }
 

diff --git a/packages/jest-environment-puppeteer/src/readConfig.js b/packages/jest-environment-puppeteer/src/readConfig.js
@@ -8,12 +8,14 @@ const exists = promisify(fs.exists)
 
 const DEFAULT_CONFIG = {
   launch: {},
+  browserContext: 'default',
   exitOnPageError: true,
 }
 const DEFAULT_CONFIG_CI = {
   launch: {
     args: ['--no-sandbox', '--disable-setuid-sandbox'],
   },
+  browserContext: 'default',
   exitOnPageError: true,
 }
 

diff --git a/packages/jest-environment-puppeteer/tests/.eslintrc.js b/packages/jest-environment-puppeteer/tests/.eslintrc.js
@@ -6,5 +6,6 @@ module.exports = {
   globals: {
     page: true,
     browser: true,
+    context:true,
   },
 }
diff --git a/packages/jest-environment-puppeteer/tests/browserContext-1.test.js b/packages/jest-environment-puppeteer/tests/browserContext-1.test.js
@@ -0,0 +1,8 @@
+describe('browserContext', () => {
+  const test = process.env.INCOGNITO ? it : it.skip
+  test('incognito should isolate cookies (part 1)', async () => {
+    await page.goto(`http://localhost:${process.env.TEST_SERVER_PORT}`)
+    expect(await page.cookies()).toEqual([])
+    await page.setCookie({ name: 'isolation-test', value: 'dummy' })
+  })
+})
diff --git a/packages/jest-environment-puppeteer/tests/browserContext-2.test.js b/packages/jest-environment-puppeteer/tests/browserContext-2.test.js
@@ -0,0 +1,8 @@
+describe('browserContext', () => {
+  const test = process.env.INCOGNITO ? it : it.skip
+  test('incognito should isolate cookies (part 2)', async () => {
+    await page.goto(`http://localhost:${process.env.TEST_SERVER_PORT}`)
+    expect(await page.cookies()).toEqual([])
+    await page.setCookie({ name: 'isolation-test', value: 'dummy' })
+  })
+})
diff --git a/packages/jest-puppeteer-preset/package.json b/packages/jest-puppeteer-preset/package.json
@@ -14,7 +14,7 @@
     "chrome-headless"
   ],
   "peerDependencies": {
-    "puppeteer": "^1.0.0"
+    "puppeteer": "^1.5.0"
   },
   "dependencies": {
     "expect-puppeteer": "^3.4.0",

diff --git a/packages/jest-puppeteer/package.json b/packages/jest-puppeteer/package.json
@@ -13,7 +13,7 @@
     "chrome-headless"
   ],
   "peerDependencies": {
-    "puppeteer": "^1.0.0"
+    "puppeteer": "^1.5.0"
   },
   "dependencies": {
     "expect-puppeteer": "^3.4.0",