How to specify all subdirectories in a filepath string using String Interpolation?

Question

In my cypress test I am using cy.readFile() to pick up screenshots of failing tests like so:

afterEach(() => {
    const screenshotsFolder = 'test-results/screenshots'
    const screenshotFileName = `${testState.feature.name} -- ${testState.currentScenario.name} (failed).png`;
    cy.readFile(
        `${screenshotsFolder}/${Cypress.spec.name}/${screenshotFileName}`,
        "base64"
    ).then((imgData) => {
         stepResult.attachment = {
             data: imgData,
             media: { type: "image/png" },
             index: testState.currentStep,
             testCase: testState.formatTestCase(testState.currentScenario),
        };
    });
});

When I run a single test, the screenshot is saved like so, & is being read successfully:

test-results/screenshots/login.feature/Login Feature -- Valid Credentials Scenario.png

However, if I run multiple tests, then the files are stored like this:

test-results/screenshots/Smoke/01-Dummy/login.feature/Login Feature -- Valid Credentials Scenario.png
test-results/screenshots/Regression/02-Regression/login.feature/Login Feature -- Invalid Credentials Scenario.png
test-results/screenshots/Performance/03-Performance/login.feature/Login Feature -- Invalid Credentials Scenario.png

Therefore, I need to update the path in my cy.readFile() to look for the PNG files anywhere within the screenshots folder (i.e. in sub-directories).

I tried adding ** to the filepath, but that hasn't worked:

cy.readFile(`test-results/screenshots/**/${Cypress.spec.name}/${screenshotFileName}`)

Can someone please show me how to read all PNG files within the screenshots folder?

Does this answer your question? [How can we read multiple files from a folder in Cypress?](https://stackoverflow.com/questions/62386018/how-can-we-read-multiple-files-from-a-folder-in-cypress) — agoff, Sep 16 '22 at 13:41
@agoff Thanks for your comment. But I think that's a bit too complicated a solution for what I need. I basically just want to say in that line - find all of the PNG files inside the `test-results/screenshots` folder (including subfolders) — user9847788, Sep 16 '22 at 13:48
The concept would still hold though, correct? Use `fs` to find all files in a subdirectory, then just iterate through those and feed them into `cy.readFile`. If your question is just "can readFile open multiple files?", then the answer is no. But, as shown in that link, there are ways to find multiple files and open them one by one. — agoff, Sep 16 '22 at 14:10
@agoff I've added some more of my code to give a clearer context — user9847788, Sep 16 '22 at 15:12

score 1 · Accepted Answer · answered Sep 16 '22 at 21:28

You will need a task to obtain the folder listing. Install fs-readdir-recursive to search sub-folders.

const { defineConfig } = require("cypress");
const readDirRecursive = require('fs-readdir-recursive')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('task', {
        readFolder(path) {
          return readDirRecursive(path)
        }
      })
    },
  },
});

Use it like this

const screenshotsFolder = 'test-results/screenshots'
cy.task('readFolder', screenshotsFolder)
  .then(paths => paths.map(path => path.replace('\\', '/')))   // normalise windows os
  .then(paths => paths.filter(path => path.endsWith('.png')))  // filter for png
  .then(paths => {
    paths.forEach(path => {
      cy.readFile(
        `${screenshotsFolder}/${path}`,
        "base64"
      ).then((imgData) => {
        ...

  })

How to specify all subdirectories in a filepath string using String Interpolation?

1 Answers1