Change file name of downloaded file in Virtuoso

Article Overview:

This article will cover how you can achieve the following:
This article will provide insight on how to change the file name of a downloaded file to further use in the journey.

Problem Statement:

In some scenarios, an Application Under Test (AUT) may impose strict requirements on the format and naming conventions of files it accepts.
If a file does not adhere to these specific formats or naming standards, the AUT may reject it or fail to process it correctly. This limitation can hinder testing workflows or user operations, especially when working with dynamically generated or non-standard files.

Solution:

To address this limitation, you can use the provided extension code in Virtuoso to rename files dynamically before submitting them in your test journey.

Steps to Implement the Solution:

1. Navigate to Extensions in Virtuoso
   Open Virtuoso, go to the Extensions section, and create a new extension.
   
   

2. Paste the Provided Code below:
   Copy and paste the JavaScript code written in the code box below into the new extension box:
   
   

3. Edit Tags in the Code
   Replace the following placeholders as needed:

   • element: The file element to be updated.
   • fileName: The desired name for the file (excluding the extension).
     
     

4. Save and Use the Extension
   Save the extension and call it in your journey to rename the file before uploading it to the AUT.

    

   Code:

   // Using an element select example from the docs https://docs.virtuoso.qa/guide/making-the-most-of-virtuoso/language-extensions.html#using-the-result-of-a-store-element-test-step
   
   function getElement (selectors) {
   
     let element = null
   
     for (const selectorDetails of selectors) {
   
       switch (selectorDetails.type) {
   
         case 'CSS_SELECTOR':
   
           element = document.querySelector(selectorDetails.value)
   
           break
   
         case 'XPATH_ID':
   
         case 'XPATH':
   
           element = document.evaluate(selectorDetails.value, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
   
           break
   
         case 'ID':
   
          element = document.getElementById(selectorDetails.value)
   
           break
   
         default:
   
           continue
   
       }
   
       // if we found a valid element we don't need to keep searching
   
       if (element) return element
   
     }
   
     throw new Error('Found no suitable selector: ' + JSON.stringify(selectors))
   
   }
   
   function updateFileName(virtuosoFileElement, fileName){
   
     const { selectors } = JSON.parse(virtuosoFileElement)
   
     const fileElement = getElement(selectors)
   
     if(fileElement == null) throw new Error('File element was not found')
   
     if(fileElement.files.length === 0) throw new Error('No files found in element')
   
     const file = fileElement.files[0]
   
     if(!file) throw new Error('File is not selected')
   
     const extension = file.name.split('.').pop()
   
     const blob = file.slice(0, file.size, file.type)
   
     const newFile = new File([blob], `${fileName}.${extension}`, {type: file.type})
   
     const container = new DataTransfer()
   
     container.items.add(newFile)
   
     fileElement.files = container.files
   
   }
   
   updateFileName(element, fileName)

How It Works:

1. The getElementfunction locates the file input element based on its selectors (e.g., CSS, XPath, or ID).

2. The updateFileNamefunction:

   • Retrieves the selected file from the input element.
   • Creates a new file object with the desired name while preserving the original file's extension and data.
   • Updates the file input element to hold the newly named file.

3. The renamed file is now ready for further use in the test journey.