How to Read Configurations from Property File in Cypress?

In Cypress, you can read configuration from property files in multiple ways to enhance test flexibility and maintainability. Here are some common methods and steps:

1. Using Cypress's configuration file cypress.json

cypress.json is Cypress's default configuration file where you can set various configuration options. For example:

json
{
  "baseUrl": "https://example.com",
  "viewportWidth": 1280,
  "viewportHeight": 720
}

In tests, you can directly use these configurations:

javascript
describe('Example Test', () => {
  it('Visits the Base URL', () => {
    cy.visit('/');
    // Use viewport size from configuration
    cy.viewport(Cypress.config('viewportWidth'), Cypress.config('viewportHeight'));
  });
});

2. Using Environment Variables

In Cypress, environment variables can be set via the cypress.json configuration file or command line. For example, set environment variables in cypress.json:

json
{
  "env": {
    "login_url": "https://example.com/login",
    "api_key": "secretkey123"
  }
}

In test code, you can use these environment variables as follows:

javascript
describe('Login Test', () => {
  it('Visits the Login Page', () => {
    cy.visit(Cypress.env('login_url'));
    // Use API key from environment variables
    const apiKey = Cypress.env('api_key');
    // Can use apiKey to send requests, etc.
  });
});

3. Using External Files (e.g., JSON, YAML)

If you have many configurations or need to share configurations across multiple environments, you might use external configuration files. Suppose you have a config.json file:

json
{
  "admin_user": "admin",
  "admin_password": "password123"
}

You can use the cy.readFile method to read this file and use the information in tests:

javascript
describe('Admin Login Test', () => {
  before(() => {
    cy.readFile('path/to/config.json').then((config) => {
      this.config = config;
    });
  });

  it('Allows admin to login', () => {
    cy.visit('/admin');
    cy.get('#username').type(this.config.admin_user);
    cy.get('#password').type(this.config.admin_password);
    cy.get('#submit').click();
    // Verify login success, etc.
  });
});

Summary

The above methods help you flexibly use configurations in Cypress tests, whether through the built-in cypress.json configuration file, environment variables, or external JSON/YAML files. This approach enhances test flexibility and maintainability, especially when managing multiple environments or complex configurations.