DEV Community

Cover image for 🛡️ Setting Up a .env Environment File for WebdriverIO + TypeScript Framework 🔐
Hardik Chotaliya
Hardik Chotaliya

Posted on • Edited on • Originally published at hardikchotaliya.hashnode.dev

🛡️ Setting Up a .env Environment File for WebdriverIO + TypeScript Framework 🔐

Best Practices for WebdriverIO + TypeScript: How to Store Credentials in .env Files

🔒 Introduction

As a responsible developer and tester, one of the fundamental principles is to keep sensitive information, such as usernames, passwords, or API keys, secure and away from prying eyes. This is where the 🔑 .env environment file 🔑 comes into play. In this blog post, we will explore how to set up an .env environment file for your WebdriverIO + TypeScript framework, ensuring that your credentials are stored securely and never hard-coded.

🔐 Why Use a .env File?

Hard-coding sensitive information like usernames and passwords directly into your code is a bad practice. It not only makes your credentials vulnerable but also hinders code maintainability. To address these concerns, the .env file provides a secure and convenient solution.

🔐 The .env file, short for "environment," stores sensitive information in a key-value format. The values are accessed during runtime using environment variables. This approach ensures that your sensitive data remains confidential and separate from your codebase. 🔐

🚀 Setting Up a .env File

Let's dive into the step-by-step process of setting up a .env file for your WebdriverIO + TypeScript framework:

📝 Step 1: Create a .env File

In your project directory, create a file named .env. This file will hold all your key-value pairs, with each pair representing a different piece of sensitive information. For example:

# .env
TEST_USERNAME=your_username
TEST_PASSWORD=your_password
Enter fullscreen mode Exit fullscreen mode

Remember not to include any spaces around the equal sign, as it will affect the parsing of your .env file.

📦 Step 2: Install the dotenv Package

To access the values from your .env file during runtime, you'll need the dotenv package. You can install it using npm with the following command:

npm install dotenv --save-dev
Enter fullscreen mode Exit fullscreen mode

🔧 Step 3: Configure and Load the .env File

In your TypeScript project, make sure to import the dotenv package and load the .env file. You can add the following code to your project's entry point or configuration file, such as wdio.conf.ts:

import * as dotenv from 'dotenv';

// Load the .env file
dotenv.config();
Enter fullscreen mode Exit fullscreen mode

By running dotenv.config(), you ensure that the values from your .env file are available as environment variables during runtime.

🔑 Step 4: Access Your Sensitive Information

You can now access the sensitive information in your code. For example, if you want to access the username and password from your .env file, you can use the process.env object:

const username = process.env.TEST_USERNAME;
const password = process.env.TEST_PASSWORD;
Enter fullscreen mode Exit fullscreen mode

By following these steps, you have securely stored your sensitive information in the .env file and can access it in your code without exposing it directly.

💡 Benefits of Using .env Files

Using a .env environment file offers several advantages:

  1. 🔐 Security: Your sensitive information is not hard-coded in your source code, providing an extra layer of security.

  2. 📂 Configuration Management: It's easy to manage different configurations for various environments (development, testing, production) using different .env files.

  3. 🔧 Maintainability: Updating credentials or configuration is straightforward, as it only requires changes to the .env file.

  4. 👥 Collaboration: Your code can be shared with team members without revealing sensitive information.

  5. 📜 Compliance: Following best practices for credential storage ensures compliance with data security standards.

🔚 Conclusion

In a WebdriverIO + TypeScript framework, using a .env environment file to store sensitive information is a best practice. It enhances security, maintainability, and collaboration while keeping your credentials safe and separate from your codebase. By following the steps outlined in this blog post, you can set up your .env file and access your sensitive information securely during runtime.

Remember that security should always be a top priority and the use of .env file is an essential step in that direction. 🚀

GitHub logo hardikchotaliya / WebdriverIO-TS-Cucumber-e2e

WebdriverIO-TS-Cucumber-e2e [WebdriverIO Version - 8.18.2]

🖥️ System Requirements

You’ll need Node.js installed.

  • Install at least v16.x or higher as this is the oldest active LTS version
  • Only releases that are or will become an LTS release are officially supported ( If Node is not currently installed on your system, we suggest utilizing a tool such as NVM or Volta to assist in managing multiple active Node.js versions. NVM is a popular choice, while Volta is also a good alternative. )

🏃 To run your tests, execute:

$ cd /Users/yserName/Documents/workspace/WebdriverIO-TS-Cucumber-e2e

$ npm run wdio

The wdio-local script is used to run the WebdriverIO tests, generate an Allure report, and open the Allure report in a web browser.

$ npm run wdio-local

📦 Package dependencies Usage:

  • @wdio/allure-reporter - This dependency is used to generate Allure reports from WebdriverIO tests.
  • @wdio/cli: This dependency is used to run WebdriverIO tests.
  • @wdio/cucumber-framework: This dependency is…


View on GitHub


tags: WebDriverIO,TypeScriptFramework,EnvironmentFile,AutomationFramework,Configuration,TestingEnvironment,SetupGuide,WebTesting,TestAutomation,SoftwareEngineering

Top comments (1)

Collapse
 
dotenv profile image
Dotenv •

💛🌴