Use server origin by default

🚀 Feature Proposal

I would love to be able to do page.goto('/') instead of page.goto('http://localhost:3000/'). Currently if I try that I get

Protocol error (Page.navigate): Cannot navigate to invalid URL

      1 | describe('MyApp: /', () => {
      2 |   beforeAll(async () => {
    > 3 |     await page.goto('/')
        |                ^
      4 |   })

Motivation

Not having to specify the protocol, host, and port in each test makes tests easier to write. It also makes it easier to change the way all tests are run, e.g. changing http: to https:.

Example

// jest-puppeteer.config.js:
module.exports = {
  server: {
    command: 'yarn run start',
    port: 3000,
  },
}

// if no origin is provided, use the one from the jest-puppeteer config:
await page.goto('/')

// but you can always tell the browser to go elsewhere if needed:
await page.goto('https://some-third-party-provider.com')

Pitch

Jest Puppeteer already knows about the protocol, host, and port from jest-puppeteer.config.js. It can use this information to make writing tests easier.

[xiaoyuhen]

hi @jamesarosen

Very useful feature and a very nice solution. Could you take a PR to do this?

[jamesarosen]

I can do this with a custom environment:

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

class CustomEnvironment extends PuppeteerEnvironment {
async setup() {
    await super.setup()

    const server = this.global.puppeteerConfig || {}
    const host = server.host || 'localhost'
    const port = server.port || 3000
    const protocol = server.protocol || 'http'
    const originalGoto = this.global.page.goto

    this.global.page.goto = async function goto(pathOrURL) {
      const url = /^\//.test(pathOrURL)
        ? `${protocol}://${host}:${port}${pathOrURL}`
        : pathOrURL
      return originalGoto.call(this, url)
    }
  }
}

module.exports = CustomEnvironment