Zephyr Cloud Docs
Zephyr Cloud →
Zephyr Cloud →

End to End Testing

Part of the software development lifecycle for many organizations includes the need to do end-to-end (e2e) testing. This is often done to test for regressions but can also be used to validate that acceptance criteria have been met.

Testing Basic Applications

The Zephyr build output provides a deployed URL to the immutable version that was created and published as part of the build. You can proceed to test this URL directly. Check our guide to promote this URL directly under an environment here.

We found one of the quickest and easiest ways to do this is to get the output URL by adding a script to your CI runner script. You can leverage the build output directly and using regex find the appropriate output text.

Github Action

Add below script to your pull_request.yaml file.

pull_request.yml
run: |
  OUTPUT=$(npm run build)
  echo "$OUTPUT"
  URL=$(echo "$OUTPUT" | grep -oE 'https://[^ ]+')
  HOST=$(echo "$OUTPUT" | grep -oP 'ZEPHYR\s+\K\S+(?=#)')
  echo "Extracted Host Zephyr URL: $URL"
  echo "Extracted Host: $HOST"
  echo "host=$HOST" >> "$GITHUB_OUTPUT"
  echo "url=$URL" >> "$GITHUB_OUTPUT"

The output can then be used as variables in later steps of your pipeline to serve as the base URL for your test.

pull_request.yml
env:
  REMOTE_URL: ${{ steps.buildRemote.outputs.remoteUrl }}
  REMOTE: ${{ steps.buildRemote.outputs.remote }}

Testing Federated Applications

Testing federated applications is typically a bit more challenging, however with Zephyr this is a fairly trivial task.

Because of how the Zephyr workers resolve the federated remotes we have the ability to modify our session and have the worker give us different versions of the application.

This means in your e2e testing suite you can update the browser session storage to update the remotes. In the puppeteer example below we take the output values of the remote name as well as the remoteURL and set them on the session storage. After refreshing the page the remote will be swapped with the version on the session.

puppeteer-test.ts
const remote = process.env.REMOTE;
const remoteUrl = process.env.REMOTE_URL;

await page.evaluate(
  (remote, url) => {
    sessionStorage.setItem(remote, url);
  },
  remote,
  remoteUrl,
);

Testing in production

If you want to test a new remote in production you can perform the following in your testing suite.

  1. Go to the production url
  2. Update the session storage to set the remote and url that you want to replace.
  3. Refresh the page
  4. Perform the test