Test Automation - How to Use Dynamic Base URLs with Playwright TypeScript in GitHub Actions

Introduction

In the world of web application testing, flexibility is key. As developers and QA engineers, we often need to test our applications across different environments - development, staging, and production. Each environment typically has its URL, and hardcoding these URLs into our tests can lead to maintenance headaches and reduced test portability.

This article will demonstrate how to implement dynamic base URLs in your Playwright TypeScript tests using GitHub Actions. We'll explore how to leverage environment variables to switch between different environments seamlessly, making your test suite more robust and adaptable. I've shared the solution presented in this article in my Playwright Typescript example project .

The Problem

When running tests across multiple environments, we often face the challenge of updating URLs throughout our test suite. This can be time-consuming and error-prone, especially in larger projects. Moreover, different team members might need to run tests against different environments, leading to potential conflicts and confusion.

Implementing the Solution

1. Install dotenv

First, we need to install the dotenv package. Run the following command in your project directory:

npm install dotenv        

The dotenv package is a module that loads environment variables from a .env file into process.env. This allows us to keep sensitive information and environment-specific configurations separate from our codebase.

2. Add repository variable

In our GitHub project, we define a repository variable called BASE_URL in https://github.com/{owner}/{repo}/settings/variables/actions

{owner}: This represents the username that owns the GitHub repository where you're defining the BASE_URL variable.

{repo}: This refers to the name of the repository itself.

3. Update Github actions workflow

Then we update the usage in GitHub actions workflow accordingly:

By setting the BASE_URL as an environment variable, we can easily change it for different workflows or environments without modifying our test code.

4. Update playwright configuration

Next, we'll update our Playwright configuration to use the BASE_URL environment variable. In your playwright.config.ts file, add the following:

This configuration allows Playwright to use the BASE_URL environment variable set in our GitHub Actions workflow.

5. Update .gitignore

To ensure we don't accidentally commit any local environment files, let's update our .gitignore:

6. Using the Base URL in Tests

Now, in our test files, we can use relative URLs, and Playwright will automatically prepend the base URL:

Running Tests with Different Environments

With this setup, you can now easily run tests against different environments by changing the BASE_URL variable in your GitHub repository's settings or we can use the GitHub API.

This is an example of Getting the BASE_URL programmatically in Postman:

This is an example of Updating the BASE_URL programmatically in Postman:

Conclusion

By implementing dynamic base URLs using environment variables and GitHub Actions, we've created a flexible and maintainable solution for running Playwright TypeScript tests across different environments. This approach allows us to easily switch between staging, production, or any other environment simply by updating a single variable in our GitHub repository settings.

This solution not only saves time but also reduces the risk of errors that can occur when manually updating URLs throughout a test suite. It's a small change that can have a big impact on the efficiency and reliability of your testing process.

Happy testing!