Cypress UI no longer displays spec files to run

[NUlmerTS]

Current behavior

From version 10.5.0 onwards, the specs section no longer displays any specs in the file.

However, when reviewing the project settings spec patterns, nine files can be found

It should be noted that when the tests are run in headless mode, they continue to work as expected.

The current workaround is to downgrade to 10.4.0.

Desired behavior

After opening the cypress to use the UI format. Then selecting a browser types the spec files should display.

Test code to reproduce

const { defineConfig } = require('cypress')

module.exports = defineConfig({
projectId: 'f2y8fb',
chromeWebSecurity: false,
responseTimeout: 60000,
blockHosts: '.parsely.com',
pageLoadTimeout: 90000,
e2e: {
setupNodeEvents(on, config) {
require("cypress-grep/src/plugin")(config);
},
baseUrl: 'https://www.teachstarter.com/',
//baseUrl: 'https://staging-prexit.teachstarter.com/',
specPattern: 'cypress/e2e/teachStarterWeb/**/.{js,jsx,ts,tsx,spec}',
},

Cypress Version

10.5.0

Node version

v14.17.5

Operating System

Windows 11:22000.856

Debug Logs

No logs displayed

Other

No response

[lmiller1990]

Same problem as #23460

[lmiller1990]

Hi @NUlmerTS 👋We both previously worked at @doseme, small world!

Is your specPattern correct? cypress/e2e/teachStarterWeb/**/.{js,jsx,ts,tsx,spec} does not look correct - it it supposed to be cypress/e2e/teachStarterWeb/**/*.{js,jsx,ts,tsx,spec} (note the extra * in **/*).

In your second screenshot, it does have the **/* glob. Can you please clarify the specPattern?

I made a new project and updated it to be cypress/e2e/teachStarterWeb/**/*.{js,jsx,ts,tsx,spec}. I could get some basic specs to show up:

[NUlmerTS]

sorry that was a copy and past mistake. the spec pattern is in fact:

specPattern: 'cypress/e2e/teachStarterWeb/**/*.{js,jsx,ts,tsx,spec}',

[NUlmerTS]

Possiblly linked to mbolotov/intellij-cypress#103

[magarwal19-wellsky]

This is happening for me also..
in project settings it shows the specs are found while in spec tab nothing is displayed

i am using 10.6 version on mac

[lmiller1990]

Can you share your complete cypress.config @magarwal19-wellsky?

@magarwal19-wellsky and @NUlmerTS can you share your package.json, too? I wonder if it's related to a plugin (I notice that @magarwal19-wellsky is using some kind of cucumber plugin).

If possible, please share your file structure under cypress, too.

Some good bug hunting in mbolotov/intellij-cypress#103.

[wayflyermike]

I am also seeing this issue today. GUI lists no spec files, console logs a GraphQL error [GraphQL] Cannot read properties of undefined (reading 'framework')

cypress.config.ts

import { defineConfig } from "cypress";

export default defineConfig({
  projectId: "xxxxxx",
  video: false,
  chromeWebSecurity: false,
  e2e: {
    // We've imported your old cypress plugins here.
    // You may want to clean this up later by importing these.
    setupNodeEvents(on, config) {
      return require("./cypress/plugins/index.js")(on, config);
    },
    baseUrl: "http://localhost:3000",
    specPattern: "cypress/e2e/**/*.spec.*",
  },
  component: {
    setupNodeEvents(on, config) {},
    specPattern: "cypress/**/*.spec.*",
  },
});

[magarwal19-wellsky]

Hi @lmiller1990
please find below my config file. We are using cucumber preprocessor plugin for BDD approach

config.js

const { defineConfig } = require('cypress')
const cucumber = require('cypress-cucumber-preprocessor').default;

let data = {};

module.exports = defineConfig({
e2e: {
viewportWidth: 1920,
viewportHeight: 1080,
defaultCommandTimeout: 60000,
pageLoadTimeout: 90000,
requestTimeout: 60000,
waitForAnimations: true,
videoCompression: false,
includeShadowDom: true,
projectId: "",
chromeWebSecurity : false,
experimentalSessionAndOrigin : true,
env: {
dev: {

  },
  qa: {
  },
  runEnv: "qa",
  berthaRunAgency: ""
},
setupNodeEvents(on, config) {
  // implement node event listeners here
  on('file:preprocessor', cucumber());

  on('task', {
    setProfile({ feature, profileType, profileVal }) {
      if (data.hasOwnProperty(feature) !== false) {
        data[feature][profileType] = profileVal
      } else {
        data[feature] = { [profileType]: profileVal }
      }
      return null
    },
    getProfile({ feature, profileType }) {
      return data[feature][[profileType]]
    },
    getAllProfile({ feature }) {
      if (data[feature]) {
        return data[feature]
      }
      else {
        return null
      }
    }
  });
},
specPattern: "cypress/e2e/**/*.feature"

},
component: {
setupNodeEvents(on, config) {
// component testing node events setup code
},
},
})

[mirobo]

From the OPs first post

 module.exports = defineConfig({ 
   projectId: 'f2y8fb',
   chromeWebSecurity: false,
   responseTimeout: 60000,
   blockHosts: '_.parsely.com', 
   pageLoadTimeout: 90000, 
   e2e: {
       setupNodeEvents(on, config) { 
         require("cypress-grep/src/plugin")(config); 
   }, 
  // baseUrl: 'https://www.teachstarter.com/', 
   baseUrl: 'https://staging-prexit.teachstarter.com/', 
   specPattern: 'cypress/e2e/teachStarterWeb/**/_.{js,jsx,ts,tsx,spec}', 
}); ```

"specPattern is defined directly inside config and not in e2e-object
I mentioned here #23010 that the "specPattern" was not available in the Cypress NPM API but that it actually worked. This was in Cypress 10.3.1 or 10.4.0 when I created this ticket.

Also the cypress-grep Plugin uses "config.specPattern" and not the testingType-specific specPattern.
https://github.com/cypress-io/cypress-grep/blob/main/src/plugin.js#L120

I hope I don't bring more confusion to this issue.. but I'm sure the Cypress devs will figure it out :D

[larryh]

This is happening to me, too. Works in Cypress 10.4, but not 10.5 nor 10.6

Maybe it is related to a non-default installation directory structure?

My specs live in /tests/integration/<two-directories>/<several-directories>/<individual-tests>

So, for example, I have:

/tests/integration/pages/about/contact.spec.js
/tests/integration/pages/about/us.spec.js

/tests/integration/pages/support/forgot-password.spec.js
/tests/integration/pages/support/resend-confirmation.spec.js

/tests/integration/routes/middleware-guards.spec.js
/tests/integration/routes/pages-and-titles.spec.js

My cypress.config.js has e2e.specPattern set to 'tests/integration/**/*.spec.js'

[marktnoonan]

There is an empty state for when no files match the specPattern, I think we'd be seeing that if something was changed that broke the ability to match specs properly (plus the screenshot of the settings page confirms specs are found).

My gut feeling is the [GraphQL] Cannot read properties of undefined (reading 'framework' error is preventing correct building of the specs list, I'm going to see if I can reproduce.

For reference I upgraded a simple project to 10.6.0 yesterday and did not see this problem, so it is likely to be a combination of things.

If anybody can create a standalone example using the cypress-test-tiny template it would be helpful to narrow down what the interaction is that leads to this: https://github.com/cypress-io/cypress-test-tiny

[marktnoonan]

Re: @mirobo's comment, I think it only appeared that specPattern was defined at the top level due the object being cut off, it is actually nested under e2e. At the top level I get the correct error in the UI.

I've tried with @NUlmerTS's config (without the grep plugin) and been successful loading the specs list. Wondered if it was a Windows issue but see one of the reports is from Mac.

[marktnoonan]

After playing around a bit with the config files posted here, it looks like this error is due to a missing null check for component.devServer in the config... if you have partially set up component testing you might be in this state, and the workaround for now will be to remove component from your config - or set up your devServer with the framework and bundler for component testing.

If anybody still has the problem after modify the config, please post here with details.

[larryh]

Removing the component section from my config file worked for me, in both 10.5 and 10.6 - thanks a lot!

I imagine a fix will be forthcoming so we don't have to do that.

Which is fine with me; I had high hopes for using Cypress for component testing, but bailed on it as the setup - providing mocks/stubs for Vuetify and Vuex and Mirage - was just too daunting a task.

But that's a whole 'nother issue. Thanks for all of the GREAT WORK that you folks do!

BTW, if people reading this haven't checked out Mirage, you should. It's a fake server that runs in the client, and lets front-end developers mock out backend APIs. It can be used in both development and testing, and it is fantastic! And it works with Cypress Integration tests to boot!

(For the record: I am not, and never have been, affiliated with Mirage in any way. I started out using Ember, and Mirage was built for that, which is how I got introduced to it. But they've since expanded it to work with React and Vue, the latter being what I now use.)

Thanks again!

[shershen08]

I had the same issue
downgrading to 10.4.0 helped

[NUlmerTS]

I can confirm that removing the component in cypress.config enabled it to run.

[cypress-bot]

Released in 10.7.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v10.7.0, please open a new issue.