Need help about plugin @cypress/grep run every test cases even use grep [Typescript] cypress 14

[Thanasornsawan]

I try run command in debug mode, the plugin seem load correctly and know that it has grep found in one test case but it still run every test cases not use filter grep. Do you know what is the problem?

DEBUG=@cypress/grep npx cypress run --env grep="should sort products by name and price",grepFilterSpecs=true --spec web/tests/search.cy.ts

Here is my cypress config

import { defineConfig } from 'cypress';
import { verifyDownloadTasks } from 'cy-verify-downloads';
import * as fs from 'fs';
import '@cypress/grep/src/plugin';

interface TakeScreenshotConfig {
  name: string;
}

export default defineConfig({
  projectId: 'jxeg7b',
  e2e: {
    baseUrl: 'https://practicesoftwaretesting.com',
    specPattern: 'web/tests/**/*.cy.ts',
    supportFile: 'web/support/e2e.ts',
    videosFolder: 'web/videos',
    screenshotsFolder: 'web/reports/mocha/assets',
    downloadsFolder: 'web/downloads',
    reporter: 'cypress-multi-reporters',
    reporterOptions: {
      reporterEnabled: 'mochawesome, mocha-junit-reporter',
      mochawesomeReporterOptions: {
        reportDir: 'web/reports/mocha',
        screenshotsFolder: 'web/reports/mocha/assets',
        charts: true,
        reportPageTitle: 'Test Execution Report',
        embeddedScreenshots: true,
        inlineAssets: true,
        quiet: true,
        overwrite: true,
        html: true,
        json: true,
        attachments: true,
      },
      mochaJunitReporterReporterOptions: {
        mochaFile: 'web/reports/junit/results-[hash].xml',
      },
    },
    viewportWidth: 1280,
    viewportHeight: 1200,
    video: false,
    env: {
      grepFilterSpecs: true,
      grepOmitFiltered: true,
      grepTags: '', // Default: empty, meaning no filtering
    },
    chromeWebSecurity: false,
    experimentalModifyObstructiveThirdPartyCode: true,
    screenshotOnRunFailure: true,
    defaultCommandTimeout: 10000,
    pageLoadTimeout: 30000,
    setupNodeEvents(on, config) {
      // Only run tests that match the grep pattern (test title)
      const grep = config.env.grep; // Get the grep value

      // Ensure that the grep environment variable is passed and contains a valid value
      if (grep) {
        console.log(`Filtering tests by title: ${grep}`);

        // Apply the grep plugin if the grep value is passed
        require('@cypress/grep/src/plugin')(config);

        // Log that grep is applied
        console.log(`Grep applied: ${grep}`);
      } else {
        console.log('No grep value passed, running all tests');
      }

      const enableVideo = config.env.enableVideo; // Pass the spec name as an environment variable
      if (enableVideo && (enableVideo === 'true' || enableVideo === true)) {
        console.log('Enabling video recording for:', enableVideo);
        config.video = true; // Enable video for specific spec
        config.videoCompression = false;
      } else {
        console.log('Video recording disabled for:', enableVideo);
        config.video = false;
      }
      // Custom browser settings
      on('before:browser:launch', (browser: Cypress.Browser, launchOptions) => {
        if (browser.family === 'chromium' && browser.name !== 'electron') {
          launchOptions.args.push('--enable-features=CSSScrollSnapPoints');
        }
        return launchOptions;
      });

      // Custom tasks
      on('task', {
        ...verifyDownloadTasks,
        log({ message }) {
          console.log(message);
          return null;
        },
        async parsePdf({ filePath }) {
          const fs = require('fs').promises;
          const pdf = require('pdf-parse');
          const dataBuffer = await fs.readFile(filePath);
          const data = await pdf(dataBuffer);
          return data.text;
        },
        takeScreenshot({ name }: TakeScreenshotConfig) {
          const screenshotsFolder = 'web/reports/mocha/assets';
          if (!fs.existsSync(screenshotsFolder)) {
            fs.mkdirSync(screenshotsFolder, { recursive: true });
          }
          return null;
        },
        waitForRace({ elements, timeout }) {
          return new Promise((resolve) => {
            let resolved = false;
            const interval = setInterval(() => {
              if (resolved) return;
              for (const { selector, alias } of elements) {
                const element = document.querySelector(selector);
                if (element) {
                  clearInterval(interval);
                  clearTimeout(timeoutId);
                  resolved = true;
                  resolve({ alias });
                  return;
                }
              }
            }, 100);
            const timeoutId = setTimeout(() => {
              clearInterval(interval);
              if (!resolved) {
                resolved = true;
                resolve({ alias: 'timeout' });
              }
            }, timeout);
          });
        },
      } as unknown as Cypress.Tasks);

      return config;
    },
  },
});

and this one is support/e2e.ts

import 'cypress-real-events';
import './commands';
import addContext from 'mochawesome/addContext';
import 'cypress-plugin-steps';
import '@cypress/grep';
require('@cypress/xpath');

Cypress.on('uncaught:exception', () => false);

declare global {
  namespace Cypress {
    interface Chainable {
      addTestContext(value: string): Chainable<void>;
    }
  }
}

Cypress.Commands.add('addTestContext', (context: string) => {
  cy.once('test:after:run', (test) => addContext({ test }, context));
});

afterEach(function() {
    const test = this.currentTest;
    const screenshotName = `${test.fullTitle().replace(/\s+/g, '_')}`;
    const specFile = Cypress.spec.name;
    
    cy.screenshot(screenshotName, {
      capture: 'fullPage',  // Changed to fullPage
      overwrite: true,
      scale: false  // Disable scaling
    });
    cy.addTestContext(`./assets/${specFile}/${screenshotName}.png`);
});