How to Dynamically Reference Variables in JavaScript for Playwright Tests

Leveraging Dynamic Variable Referencing in Playwright

In modern test automation frameworks like Playwright, efficiently handling test data is crucial. One common scenario involves reading data from a JSON file to populate input fields during automated testing. This practice reduces hardcoding and increases the flexibility of test cases.

However, challenges can arise when certain parts of the data, like specific properties within a JSON object, need to be dynamically determined. A common example is when property names or values need to be set at runtime rather than being hardcoded into the test logic.

JavaScript offers dynamic variable referencing capabilities that can help resolve this issue. Instead of hardcoding the key names, you can use JavaScript's flexibility to construct these keys dynamically, depending on the context of the test being run.

In this article, we'll walk through how to implement this in Playwright. We'll modify a function so that a part of a JSON property name can be determined at runtime, making the code more reusable and adaptable to different test scenarios.

Implementing Dynamic Key Referencing in Playwright for Flexible Automation

The scripts provided above focus on addressing the challenge of dynamically accessing JSON data within a Playwright test. Typically, JSON data is static, and when accessing deeply nested properties, developers tend to hardcode property paths. This method works but lacks flexibility. To solve this issue, dynamic key referencing is employed to generate property names at runtime. The core idea is to replace the hardcoded property names (such as _fullUkLicence_carInsurance) with variables that can be passed into the function when called. This makes the test more adaptable to changes in the structure of the JSON file or the data it contains.

In the first solution, the script uses JavaScript template literals to dynamically construct the property name based on the input parameter, answerSet. By passing different arguments, the function can access different properties in the JSON file without modifying the code. The use of the locator() method in Playwright ensures that the right input field is targeted on the webpage. The locator() function leverages the pseudo-class :has-text() to identify elements containing a specific text, making it an efficient way to interact with dynamic elements during testing. This method allows us to fill an input field with the correct data from the JSON file based on the user's selection.

In the second solution, we take the dynamic key referencing a step further by using a helper function called getNestedValue(). This function splits the path to the property into an array using split() and then uses reduce() to traverse the nested structure of the JSON object. This method is particularly useful when you need to access deeply nested properties dynamically. It adds flexibility, as you can dynamically pass in paths without hardcoding them. The ability to handle nested data structures is crucial in complex JSON files, where data might be buried several layers deep.

Finally, the third solution introduces error handling and input validation using try...catch blocks. This ensures that any errors during file reading, JSON parsing, or accessing properties are caught, and appropriate error messages are displayed. For example, if the function is provided with an invalid answerSet, it throws a custom error, ensuring the script does not proceed with incomplete or invalid data. The use of throw new Error() adds robustness to the function, improving the reliability of the tests. Additionally, modular functions like loadTestData() and getAnswerValue() help to keep the code organized and reusable, further improving the script's maintainability and scalability.

// Solution 1: Dynamic Key Access in Playwright
const fs = require('fs').promises;
async function answerMyDetails(answerSet) {
  const testDataFile = './myJsonFile.json';
  let data = await fs.readFile(testDataFile, 'utf-8');
  let testData = await JSON.parse(data);
  // Dynamically access the answer property based on the answerSet argument
  let answerKey = \`answer_\${answerSet}\`;
  let answerValue = testData.myDetailsPageQuestions.vehicleReg[answerKey];
  await this.page.locator('div:has(> label:has-text("Some Text")) input').fill(answerValue);
}
// This function now dynamically references the JSON key based on the input parameter answerSet.

// Solution 2: Template Literal Key Construction for JSON Data in Playwright
const fs = require('fs').promises;
async function answerMyDetails(answerSet) {
  const testDataFile = './myJsonFile.json';
  let data = await fs.readFile(testDataFile, 'utf-8');
  let testData = await JSON.parse(data);
  // Dynamically construct the property path using template literals
  let answerPath = \`vehicleReg.answer_\${answerSet}\`;
  let answerValue = getNestedValue(testData, 'myDetailsPageQuestions.' + answerPath);
  await this.page.locator('div:has(> label:has-text("Some Text")) input').fill(answerValue);
}
// Helper function to retrieve nested values using string paths
function getNestedValue(obj, path) {
  return path.split('.').reduce((o, k) => (o || {})[k], obj);
}
// This approach builds the property path and retrieves the nested value dynamically.

// Solution 3: Modular and Optimized Dynamic Key Access
const fs = require('fs').promises;
async function answerMyDetails(answerSet) {
  try {
    const testData = await loadTestData('./myJsonFile.json');
    const answerValue = getAnswerValue(testData, answerSet);
    if (!answerValue) throw new Error('Invalid answerSet or missing data');
    await this.page.locator('div:has(> label:has-text("Some Text")) input').fill(answerValue);
  } catch (error) {
    console.error('Error filling input field:', error);
  }
}
// Modular function to load test data
async function loadTestData(filePath) {
  let data = await fs.readFile(filePath, 'utf-8');
  return JSON.parse(data);
}
// Modular function to retrieve dynamic key value
function getAnswerValue(testData, answerSet) {
  return testData.myDetailsPageQuestions.vehicleReg[\`answer_\${answerSet}\`];
}
// This solution adds error handling and validation for more robustness.

Dynamic JSON Access and Enhanced Flexibility in Playwright Testing

One often overlooked aspect of dynamic JSON data referencing in Playwright is handling multi-level JSON structures. In many real-world cases, JSON files contain not only direct properties but also deeply nested objects and arrays. Playwright's ability to dynamically access such structures becomes invaluable, especially when automating tests that require flexible data inputs. A typical scenario might involve dynamically generating the JSON keys needed to access various properties within a nested object, giving developers greater control over the structure.

Another key aspect is the benefit of reusability that dynamic referencing brings. Instead of writing separate functions or duplicating code for each specific property, dynamic keys allow you to create one reusable function that can access any property in the JSON file. This can greatly simplify maintaining tests, as any future changes in data structure or requirements won't necessitate changes in multiple locations. This modular approach ensures cleaner code and faster development cycles.

Additionally, ensuring the script is error-resistant is crucial. When working with dynamically accessed data, unexpected changes or missing values can result in errors. By implementing robust error handling, such as catching undefined or missing properties, the test can fail gracefully with meaningful error messages. This not only saves debugging time but also makes the test more reliable. Error handling paired with validation ensures that only the correct data is used during testing, which is critical for maintaining high-quality automation scripts.