Add BASE_URL support

[puskuruk]

When you have multiple environments you might want to run your tests with different base URLs for each environment. For example:

BASE_URL=http://www.staging.your-awesome-application.com npx @puppeteer/replay recording.json

BASE_URL=http://www.test.your-awesome-application.com npx @puppeteer/replay recording.json

[OrKoN]

Hey, thanks for the feature request. How would it work if the recording involves multiple domains? I guess using this variable might result in a broken recording in that case?

[puskuruk]

Thank you @OrKoN

Yes, when you have multiple domains it'll fail. In our case we deploy our application to different environments and I wanted be able to test those environments with replacing base URLs.

How we can improve this implementation?

[OrKoN]

@puskuruk I think it'd be nice to allow importing custom runner extensions so that use case/app-specific logic could be implemented. But I think it's something that we need to take a look into!

[puskuruk]

In our codebase,I solved this problem with a custom runner but I thought using an environment variable is more straightforward solution. Because it's a common practice.

https://playwright.dev/docs/test-advanced
https://docs.cypress.io/guides/references/best-practices#Setting-a-global-baseUrl

/**
 * Run a recording from a json file
 * @param {string} recordingPath
 * @param {Extension} extension
 */
async function runRecording(recordingPath, extension) {
  const content = await fs.readFile(recordingPath, 'utf8');
  const object = JSON.parse(content);
  const recordingWithBaseURL = addBaseURLToRecording(object);

  const recording = parse(recordingWithBaseURL);
  const runner = await createRunner(recording, extension);

  await runner.run();
}

But importing custom runner extensions also makes sense, and I can implement this feature 🙏

[OrKoN]

I see! Thanks for sharing those. It looks like in other frameworks it works differently in an important way: baseUrl applies only to the relative URLs in the script and does not rewrite absolute URLs. We currently don't support relative URLs though. I think we will need some time to re-think the UX here, so thanks for the feedback!

[s4l4x]

The issue for us is that the starting url may and usually is different from where we want to run the tests. This wouldn't be an issue if we were only testing production, but we test PRs, development, staging, and local environments, all with different URLs. This allows us to catch bugs before going to production.

It seems like there is an implicit starting url with the first navigate step. One idea would be if there's a BASE_URL defined, then we could override the starting url of a recording's first step and any subsequent URL bases which match the starting URL. Something like this:

Recording 1

steps: [
    {
      "type": "navigate",
      "url": "http://localhost:3001/doawesome",
      ...
    },
    ...
    {
      "type": "navigate",
      "url": "http://someotherurl.com",
      ...
    },
    ...
    {
      "type": "navigate",
      "url": "http://localhost:3001/doawesome",
      ...
    },
]

Recording 2

steps: [
    {
      "type": "navigate",
      "url": "http://localhost:3008/doawesome",
      ...
    },
    ...
    {
      "type": "navigate",
      "url": "http://someotherurl.com",
      ...
    },
    ...
    {
      "type": "navigate",
      "url": "http://localhost:3008/doawesome",
      ...
    },
]

With a BASE_URL = website.ftw these would become:

Recording 1

steps: [
    {
      "type": "navigate",
      "url": "http://website.ftw/doawesome",
      ...
    },
    ...
    {
      "type": "navigate",
      "url": "http://someotherurl.com",
      ...
    },
    ...
    {
      "type": "navigate",
      "url": "http://website.ftw/doawesome",
      ...
    },
]

Recording 2

steps: [
    {
      "type": "navigate",
      "url": "http://website.ftw/doawesome",
      ...
    },
    ...
    {
      "type": "navigate",
      "url": "http://someotherurl.com",
      ...
    },
    ...
    {
      "type": "navigate",
      "url": "http://website.ftw/doawesome",
      ...
    },
]

Thoughts on this approach?

[puskuruk]

Since we have a solution to modify URLs with an extension we can close this issue. 🙏

Example implementation:

const { PuppeteerRunnerExtension } = require('@puppeteer/replay')

class Extension extends PuppeteerRunnerExtension {
  async runStep(step, flow) {
    if ('url' in step) {
      // modify URL here
      // reassign step here
    }

    await super.runStep(step, flow)
  }
}