How To Create Zip Files Using JavaScript

Zipping is the process of compressing files or folders into a single archive file with the “.zip” extension. It is very useful in reducing the overall size of the files, making them more efficient for storage, transmission, and distribution. This article guides you on how to zip files using JavaScript.

Compressing test results, logs or reports can be beneficial in test automation to facilitate easy sharing/distribution with the stakeholders. Zipping folders can also be part of a versioning or archiving strategy. Creating compressed archives of specific versions of test reports or application artifacts allows us to keep historical records in a space-efficient manner.

Choosing the Right Zip Library

There are several Zip libraries available using which we can compress the files and folders. Some of them are listed below:

1. Adam-Zip
2. Zip-a-folder
3. JSZip
4. archiver
5. Zip.js

I will demonstrate how we can compress and zip our test results/test report folder using two approaches.

1. Step-by-Step Guide: Using Adm-Zip to Zip a Folder

Install ADM-zip

Adam-zip is a javascript library used for compressing and decompressing items. To install it, go to your project and in the terminal execute the below command.

npm i adm-zip

Import package

After successful installation, import the required package.

const AdmZip = require("adm-zip");

Write JavaScript Code to create Zip Files

Create a Javascript Function and add the below code in your Javascript code file.

function zipAFolder(folderpath)
{
    var zip = new AdmZip();
    const timestamp = new Date().toISOString().replace(/:/g, '-');
    const zipFilename = `report-${timestamp}.zip`;
    zip.addLocalFolder(folderpath, zipFilename);
    zip.writeZip(zipFilename);

}
// Example Usage
const folderToZip = './example-folder';
zipAFolder(folderToZip);

This example defines a zipAFolder function that takes the path of the folder to be zipped (folderpath).To construct a unique zip file name timestamp has been generated and appended with the zip file name.

2. Use Zip-a-Folder to create Zip files

An eminent alternative for creating zip files is the ‘zip-a-folder’ library. This library also creates compressed folders in tar and tgz formats including zip format.

Installation

To use zip-a-folder javascript library install it using npm.

npm install zip-a-folder

Import package

After the successful installation, import the necessary package.

import { zip } from 'zip-a-folder';

Write JavaScript Code to compress the folder

Create a function and add the below code to compress the folder and generate zip/tar files.

function compressAFolder(folderToZip)
{
     const timestamp = new Date().toISOString().replace(/:/g, '-');
     const zipFilename = `results-${timestamp}.zip`;
     await zip(folderToZip,zipFilename); //Compress and generate Zip file
     await tar(folderToZip,zipFilename);  //Compress and generate Tar file
}
// Example Usage
const folderToZip = './example-folder';
compressAFolder(folderToZip);

Execute this method, a zip file named results_timestamp.zip and a tar file named results_timestamp.tar are generated.

How to Compress and Share the Allure Test Report in Playwright

Requirement: I want to compress the results folder in zip format after every execution to share the HTML reports with the stakeholders either as an email attachment or any file-sharing service.

Prerequisite:

1. Allure report integration

Visit this article to generate allure HTML reports in Playwright Framework.

Playwright Global Teardown

To achieve this I will set up a global teardown script. global teardown script is executed after all test runs are completed. This script is particularly useful to clean up resources, close connections, or perform any finalization steps.

How to create a global teardown script in Playwright

Go to the root of your project and create a new file, name it globalTeardown.ts.Open this file and add the below-modified code to zip files using javascript. You can use either ‘adm-zip’ or ‘zip-a-folder’ as per your choice.

//globalTeardown.ts
import { FullConfig } from "@playwright/test";
const AdmZip = require("adm-zip");


async function globalSetup(Config: FullConfig)
{
    
    console.log("Current directory:", process.cwd());
    const reportPath = process.cwd() + "/playwright-report";
    const timestamp = new Date().toISOString().replace(/:/g, '-');
    const zipFilename = `report-${timestamp}.zip`;
    var zip = new AdmZip();
    zip.addLocalFolder(reportPath, zipFilename);
    zip.writeZip(zipFilename);

}


export default globalSetup

Save this teardown script. Go to the playwright config file and add the path of this teardown file as mentioned below.

reporter: [['html',{open:'never'}],["allure-playwright",]],
globalTeardown:'./globalTeardown.ts',

After saving the updated configuration, execute the test scripts. Upon execution completion, a zip folder is generated in the project root directory. Unzip it and check if all the required artifacts like HTML report, CSS, images, video, and traces of the allure report are available.

Conclusion

This comprehensive article has demonstrated the practical implementation of Adm-Zip and Zip-a-Folder for efficient folder compression. Additionally, it covered the creation of a global teardown script in Playwright and how to integrate it with Adm-Zip and Zip-a-Folder javascript libraries to simplify the distribution of HTML reports, CSS, images, videos, and traces.