Handling Dynamic Preview URLs in Cypress Tests

When working with local development servers, a common challenge is dealing with dynamically generated preview URLs. Every time you start the server, a new URL is created, making it tricky to automate tests with tools like Cypress. In this article, I’ll walk you through two approaches to handle this issue and run Cypress tests seamlessly.
The Problem
When you run a local server (e.g., npm run start:local:test), it often generates a dynamic preview URL like https://random-preview-url.com. This URL changes every time the server starts, making it difficult to hardcode in your Cypress tests. Here’s how you can tackle this challenge.
**

Approach 1

Run the Server and Capture the Preview URL in Cypress
In this approach, we’ll start the server directly within the Cypress test suite and extract the preview URL from the server’s output.

`describe('Shopify App Preview Test', () => {
  let previewUrl;

  before(() => {
    // Run the server command and capture the output
    cy.exec('npm run start:local:test', { failOnNonZeroExit: true }).then((result) => {
      // Use a regex to extract the Preview URL from the command output
      const match = result.stdout.match(/Preview URL: (https:\/\/[^\s]+)/);
      if (match) {
        previewUrl = match[1]; // Extracted preview URL
      } else {
        throw new Error('Preview URL not found in server output');
      }
    });
  });

  it('should load the preview page', () => {
    // Visit the dynamically fetched preview URL
    cy.visit(previewUrl);

    // Add assertions to verify the preview page
    cy.contains('Expected content on the preview page').should('exist'); // Adjust as necessary
  });
});`

How It Works

1. The cy.exec() command runs the server and captures its output.
2. A regular expression extracts the preview URL from the server’s logs.
3. The extracted URL is used in the test to visit the page and perform assertions.

Approach 2

Use a Custom Script to Capture the Preview URL
In this approach, we’ll use a custom Bash script to start the server, extract the preview URL, and pass it to Cypress as an environment variable.

Step 1: Create a Bash Script
Save the following script as start-server.sh:

#!/bin/bash

# Run the server command in the background and capture the output to a log file
npm run start:local:test > server.log &

# Wait for a few seconds to allow the server to start and print the preview URL
sleep 5

# Extract the preview URL from the log file using `grep`
PREVIEW_URL=$(grep -oP 'Preview URL: \Khttps://[^\s]+' server.log)

# Export the preview URL as an environment variable
export CYPRESS_PREVIEW_URL=$PREVIEW_URL

# Run Cypress tests
npx cypress open

Step 2: Update Your Cypress Test

describe('Shopify App Preview Test', () => {
  let previewUrl;

  before(() => {
    // Get the preview URL from the environment variable
    previewUrl = Cypress.env('PREVIEW_URL');
  });

  it('should load the preview page', () => {
    // Visit the dynamically fetched preview URL
    cy.visit(previewUrl);

    // Add assertions as necessary
    cy.contains('Expected content on the preview page').should('exist');
  });
});

How It Works

1. The Bash script starts the server and logs its output.
2. It extracts the preview URL using grep and exports it as an environment variable.
3. Cypress reads the environment variable and uses it in the test.

Conclusion

Handling dynamic preview URLs in Cypress tests doesn’t have to be a headache. By using either of these approaches, you can automate your tests effectively, even when the URL changes every time you start the server. Give them a try and let me know which one works best for you!

Feel free to share your thoughts or questions in the comments below. Happy testing! 🚀