Forem: Paul Astorga

XLSX File Uploads in Cypress

Paul Astorga — Tue, 29 Jul 2025 19:01:25 +0000

XLSX File Uploads in Cypress: A Comprehensive Guide

As QA automation engineers, we often rely on fixtures to manage test data in Cypress. However, there are times when fixtures aren't enough, especially when dealing with file uploads. In my experience, interacting with XLSX files can present unique challenges, particularly when the application requires dynamic, rather than static, file uploads. While resources exist online, they often provide fragmented information, making it difficult to piece together a complete solution.

This blog post aims to consolidate that scattered knowledge into a single, comprehensive guide. If you're looking to add robust XLSX file upload testing to your Cypress test suite, this post will provide you with a step-by-step approach, complete with code examples and explanations.

The Challenge: Dynamic XLSX File Generation

While Cypress provides the cy.writeFile command for file creation, it falls short when it comes to generating functional XLSX files. Attempting to create an XLSX file using cy.writeFile results in a file that either fails to open or is recognized as an unsupported/corrupted format. This is because the command doesn't write the file in the correct binary format required for XLSX files.

The Solution: Leveraging Node.js and the XLSX Library

To overcome this limitation, we can harness the power of Node.js and the xlsx library. This library allows us to create XLSX files programmatically in the correct format.

Step 1: Installing the XLSX Package

First, let's install the xlsx package using npm:

npm install xlsx

Step 2: Configuring Cypress to Use the XLSX Library

Next, we need to configure Cypress to use the xlsx library by adding a task to our cypress.config.js (or plugins/index.js) file. This task will handle the XLSX file creation process.

// cypress.config.js (or plugins/index.js)
const xlsx = require('xlsx');
module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      on('task', {
        writeXLSX({ filePath, data, sheetName = 'Sheet1' }) {
          const ws = xlsx.utils.json_to_sheet(data);
          const wb = xlsx.utils.book_new();
          xlsx.utils.book_append_sheet(wb, ws, sheetName);
          xlsx.writeFile(wb, filePath);
          return null; // Tasks must return a value or a Promise
        },
      });
      return config;
    },
  },
};

Explanation:

We require the xlsx library.
We define a task called writeXLSX that accepts the file path, data, and sheet name as arguments.
Inside the task, we use the xlsx library to convert the data (in JSON format) to a worksheet, create a workbook, append the worksheet to the workbook, and then write the workbook to the specified file path.

Step 3: Creating a Cypress Test to Generate and Upload the XLSX File

Now that we have configured Cypress to use the xlsx library, we can create a test to generate and upload the XLSX file.

describe('XLSX Creation and Upload Test', () => {
  it('should write data to an XLSX file and upload it', () => {
    const testData = [
      { Name: 'John Doe', Age: 30, City: 'New York' },
      { Name: 'Jane Smith', Age: 25, City: 'London' },
    ];
    const filePath = 'cypress/fixtures/output.xlsx';
    cy.task('writeXLSX', { filePath, data: testData }).then(() => {
      cy.log('XLSX file written successfully!');
      cy.get('[type="file"]').selectFile(filePath, { force: true });
    });
  });
});

Explanation:

We define an array of objects (testData) representing the data we want to write to the XLSX file. Each object represents a row in the spreadsheet.
We define the file path where we want to save the XLSX file.
We use the cy.task command to call the writeXLSX task we defined in the cypress.config.js file.
Once the task completes, we use the cy.get command to locate the file input element on the page (identified by the type="file" attribute) and then use the cy.selectFile command to select the generated XLSX file. The { force: true } option is used to bypass any visibility checks.

Understanding cy.selectFile

The cy.selectFile command is a powerful tool for simulating file uploads in Cypress. It allows us to select a file from our system and upload it to the HTML input element, effectively simulating the user dragging the file into the browser. This eliminates the need to interact with the "Browse" button and the file search modal, making our tests more robust and easier to maintain.

Additional Resources:

Cypress writeFile Command: https://docs.cypress.io/api/commands/writefile
Cypress selectFile Command: https://docs.cypress.io/api/commands/selectfile
XLSX Library: https://www.npmjs.com/package/xlsx

Conclusion:

This guide provides a clear and concise approach to handling XLSX file uploads in Cypress. By combining the power of Node.js, the xlsx library, and Cypress commands like cy.task and cy.selectFile, you can create robust and reliable tests that accurately simulate user interactions with file uploads. I hope this guide helps you streamline your Cypress testing process and confidently tackle XLSX file uploads in your applications.

Happy testing!

A Simple Approach to Using Tags in Cypress

Paul Astorga — Wed, 23 Apr 2025 16:25:52 +0000

When starting with Cypress, it’s common to focus on writing a lot of test cases to enhance coverage and improve metrics. While this enthusiasm is commendable, it can lead to challenges in terms of maintainability down the line.

As the number of test cases increases, you may notice that your pipeline takes significantly longer to execute. So, how can we address this issue? The answer lies in utilizing tags!

With Cypress, we can categorize our test cases into different suites, typically separating them into smoke and regression suites. There are various methods to implement these tags, but in this blog, I will demonstrate a straightforward approach that I regularly apply.

While there are several packages available to assist with this functionality, I will focus on my preferred package: @cypress/grep. The documentation for this package outlines multiple ways to utilize tags, so let's summarize the process with a simple step-by-step guide.

I usually install this package as a dev dependency so let’s run this code:

# using NPM
npm i -D @cypress/grep
# using Yarn
yarn add -D @cypress/grep

Let’s register this package in our support file

// cypress/support/e2e.js
// load and register the grep feature using "require" function
// https://github.com/cypress-io/cypress/tree/develop/npm/grep
const registerCypressGrep = require('@cypress/grep')
registerCypressGrep()

Note: If you are using ts instead of js, the documentation provides the examples for other configurations.

Let’s add our package in the configuration file

// cypress.config.js
{
  e2e: {
    setupNodeEvents(on, config) {
      require('@cypress/grep/src/plugin')(config);
      return config;
    },
  }
}

Let’s enable the grepFilterSpecs in out configuration file as well

{
  "env": {
    "grepFilterSpecs": true
  }
}

Note: If you don’t want to enable this parameter in the configuration file, you can enable it via command.

Let’s add our tags to our test cases, so this will depends on which tags you want to add, personally I use smoke and regression tags in my tests, but you can use different ones.

it('verify log in', { tags: ['@smoke', '@regression'] }, () => {
  cy.visit(“/login”)
  cy.get(“#username”).type(“user”)
  cy.get(“#password”).type(“password”)
  cy.get(“#submit-button”).click()
})

Note: The tags as an object includes an array so you can add as many tags as you want.

Let’s run our test cases

npx cypress -run –env grepTags=@smoke

Note: If you need to run more than one tag just use the + sign. Ex:

--env grepTags=@smoke+@fast

Additionally if you want to update your yaml to run only the smoke you can use something like this:

name: Cypress Tests

on:
  push:
    branches:
    - main
  pull_request:
    branches:
    - main

jobs:
  cypress-run:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
        uses: actions/checkout@v3

    - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
        node-version: '16'

    - name: Install dependencies
        run: npm install

    - name: Run Cypress tests with grep
        run: npx cypress run --env grepTags=@smoke

Automating QA: A Manual Tester's Journey

Paul Astorga — Tue, 18 Mar 2025 19:43:57 +0000

Since I began my journey as a Quality Assurance Engineer in manual testing, I've always admired those in the automation field from a distance. Watching them automate the test cases I executed manually sparked my interest, yet I hesitated to explore that path due to my fear of coding. I often questioned my capabilities, feeling that I lacked the "developer mindset" necessary to succeed in this area.

One of my primary concerns was how I would manage coding after a significant time had passed since I graduated from college. I worried that I might have already forgotten much of what I had learned. While the prospect of automating test cases excited me, it was equally daunting. Consequently, I remained focused on manual testing for some time. However, I eventually decided to take a risk and embark on learning automation. I discovered several online courses, but many of them lacked structure, leaving me uncertain about how to begin or how to effectively practice. For individuals like me, consistent practice is crucial; without it, we tend to forget what we've learned.

Years later, I transitioned into a new role where I had the privilege of working alongside exceptional technical colleagues who inspired me to reignite and enhance my automation skills. They emphasized that the QA landscape is constantly evolving, and it is essential for us to evolve alongside it. As a result of their encouragement, I made the shift from manual QA to automation. Eventually, I advanced to the position of Senior Automation Engineer. You may be wondering how I achieved this transformation. In this discussion, I will share my journey and offer valuable tips that may aid you in advancing your own career.

Communicate Your Goals:

Discuss your aspirations with your manager and company leadership. Seek guidance and support in developing a career plan focused on automation skills development.

Network and Collaborate:

Engage with the automation team, expressing your interest in learning. Shadow team members to gain practical understanding of their work.

Structured Learning:

Develop a phased learning plan, focusing on foundational concepts initially. Avoid overwhelming yourself by attempting to learn everything at once.

I'm my learning process I used different platforms as TestAutomationU and the Cypress documentation. These platforms provide a guide on how to start from zero.

Cypress class
Cypress documentation

Master Debugging:

Embrace debugging as a crucial learning tool. Thoroughly analyze test cases and framework flows to gain a comprehensive understanding. If you are using javascript the debugger command will help you to go step by step while you are executing your code.

Begin with Maintenance:

Start by maintaining existing automated test cases. This familiarizes you with the framework structure and builds confidence. There are always changes in the DOM that breaks the test cases, caused by changes in the selector or elements that were removed. These fixes are perfect candidates to start with.

Progress to Development:

Once comfortable with the framework, create simple automated test cases. Consult with the automation team to select appropriate test cases based on your skill level.

This step might present challenges, such as complex coding or unfamiliarity with the framework. Don't hesitate to seek assistance from the Cypress community or your colleagues.

Cypress community

Maintain Focus and Perseverance:

Automation skill development requires time and patience. Stay focused on your long-term goals to achieve success.

My transition from manual QA to automation provided valuable insights, which I've summarized previously. This advice ranges in complexity, highlighting the importance of seeking guidance and maintaining patience throughout your learning journey. Remember that consistent effort and a proactive approach are key to successful skill development.

The QA landscape is evolving rapidly. The purely manual QA role is becoming less common; companies increasingly require well-rounded QA professionals with expertise across manual testing, automation, performance testing, and API testing. Developing these skills is crucial for career advancement, ideally toward a Software Development Engineer in Test (SDET) role. This broader skill set not only enhances your value to your current employer but also opens doors to a wider range of opportunities within the software industry. Proactively seeking out projects and opportunities to expand your skill set will demonstrate initiative and commitment to professional growth. Don't hesitate to ask questions and seek mentorship from experienced colleagues – their insights and guidance can accelerate your progress significantly.

Furthermore, the Cypress testing framework, with its extensive documentation, practical examples, and supportive community, can significantly accelerate your learning process. Effective utilization is strongly recommended.