what happens with the straightforward

npm run cypress open

and

npm run cypress open-ct

. ?

the convention they recommend is cy.js. You won't go wrong with that, try it out.

i have posted screenshots of both open and open-ct above

open looks prettier but both fail to find any tests

even when using the built-in UI's "add spec file" feature

@magnificent-finland-58048 as for

cy.js

i'm not following? what do you mean?

also I believe -- correct me if I'm wrong -- that

open-ct

is the convention for Component tests (which is what I have urgency with)

I've also logged out the

options

hash which is populated when running and this allows me to see the configured directories. I would say there are likely some defects that jump out (unless I'm misinterepting) but with that feedback loop I can modify config until it's at a place where it should be working ... but it doesn't

I only did that because I was getting radio silence and after an hour of waiting around I figured I needed to try and reach out more directly

I know my urgency is my own ... which is why I tried to induce interest with the offer of a plugin that Cypress would benefit from but look as much as I'd really like to move forward my window will be closing pretty soon ... I'm a terrible multi-tasker but if i can't do the "hello world" of Component testing nor get any help then I'm going to have to pass this off to someone else to do. I'm a quite experienced developer ... if this does work I will consider adding a PR for your docs (as there are gaps).

The TS file works fine ... meaning it is being used and I'm able to log the runtime configuration with it

In general I think TS config files are much more useful ... as the configuration API surface is made apparent right away

I did try using a JS file earlier on but for a TS project, having JS files feels jarring

in fact I would strongly suggest that Cypress switch to the growing convention of using

export default defineConfig({})

to ensure people have this meta info available easily without having to search types ... so far it seems Cypress keeps their internal types rather hard to reach for (at least for library authors or people who want typing in their config).

Thanks for your answer! Yes, this solved problem. However I was able to use typescript: I forgot to install typescript in the repo and it used the global one on my machine... So if you install typescript it will work as well on CI 😉

@kind-artist-70775 I understand you have some urgency around this, I popped online earlier to see what I had been tagged in, and see that you tagged multiple people with a question I don't immediately know the answer to. So to help you I need to loop back around and look in more detail when I have a suitable time. But please understand I am in the middle of the work day, with my own work that comes first. The expectation of a response within an hour is not realistic, ever, except by good luck in the timing that you ask a question and somebody is available. As to your actual problem: from what you shared, you have defined your

componentFolder

as

test/fixtures

. Cypress will look for your

testFiles

pattern to be matched inside the

componentFolder

you define. Which is not going to work since you probably do not have specs in your fixtures folder. This is mentioned in the guide from the docs: https://docs.cypress.io/guides/component-testing/framework-configuration#Vue-2-Vue-CLI You can try removing the

componentFolder

completely from the

component

config (since your pattern includes the folder you want) or changing it to where you want Cypress to look for component specs. I would guess this is probably what's blocking you. Let me know if you've already tried removing/renaming

componentFolder

and Cypress still could not find specs.

actually @wonderful-match-15836 my fixtures folder is full of Markdown files and I'm working on testing the popular

vite-plugin-md

plugin which uses Vite to transform the MD files to components so it is in fact the directory where my "components" reside. I did move test files into the fixtures directory to see if I could get this to work but it didn't recognize it there either.

I am able to debug somewhat by adding the following to my

integration/plugins/index.ts

file:

ts
import path from 'path'
import { startDevServer } from '@cypress/vite-dev-server'

export default function (on, config) {
  console.log(config)

  on('dev-server:start', (options) => {
    return startDevServer({
      options,
      viteConfig: {
        configFile: path.resolve(process.cwd(), 'vite.config.ts'),
        logLevel: 'error',
      },
    })
  })

  return config
}

Hi @echoing-actor-29720, can you try

npx cypress cache clear

and then install cypress again? Thinking you need to clear the cache, this can solve the issue

hi there, is there a better place to get support on billing? i was double charged for my membership during signup.

Hello 🙂 Does anyone know if it's possible to import a file as "raw" in

/cypress/support/index.ts

? I'm trying to import my graphql schema file

schema.graphql

as a string so I can pass it to my auto mock generator. But it complains about not having the right loader for that file if I try to just import it. Same if I try to import it with raw.

import schema from './schema.graphql?raw'

I also tried specifically adding

raw-loader

and setting it up in

cypress/webpack.config.js

with no luck. It also seems like I can't import

fs

in this file, so I can't use

fs.readFile

either 😞 Anyone knows or have any other ideas on how I can import a

.graphql

file as a string?

Support@cypress.io should be able to help you out

> can’t use

fs.readFile

For importing the file itself, you could use

cy.readFile()

Hey guys, I'm new to Cypress. Recently I tried to try my skills on app.diagram.net. I set myself a task, to scrap all images from left bar with diagrams. To do it i must: 1. Click on all section titles to open them 2. Hover icons 3. Get full scale svg from html code (we will not cover this) And I'm stuck with first part. App diagram html is quite complicated. In the left bar you have visible AND invisivle titles. It means that left bar contains sections that yet not added to it. So, I need to grab only ones that visible. However, niether 'should be visible' nor 'have.css' doesn't work, and I left with 432 picked elements. Questions is why it doesn't work with both methods ?

I tried

cy.readFile

as well. But it complains that a cy.x can't contain another promise also related to cy.y This is my code in

support/index.ts

ts
Cypress.on('window:before:load', (win) => {
  const originalFunction = win.fetch

  // 🛑 I tried adding cy.readFile(xxx).then here, but it failed.
 

  function fetchStub(_path, request) {
    if (request && request.body) {
      // Using operation name of the request to look for response mock data
      const requestBody = JSON.parse(request.body)

      
      const schema = buildClientSchema(SCHEMA_AS_STRING) // 👈 This is where I need to use the schema file as a string.

      let mocks = defaultMocks

      const mockResponse: any = ergonomock(schema, requestBody.query, {
        variables: requestBody.variables,
        seed: 'colony',
        mocks,
      })

      if (mockResponse) {
        // If operation mock is found, mock the response
        return _responseStub(mockResponse.data)
      }
    }

    // If request mock data not found, we do not mock the request
    return originalFunction.apply(this, arguments)
  }

  // Mocking all fetch actions that are called with `/graphql` endpoint
  cy.stub(win, 'fetch', fetchStub).withArgs('/graphql').as('graphqlStub')
})

what is the test? To click on every icon on the left? Like a hundred icons?

Could you use

cy.intercept ()

in the body of your test instead? I’ve been able to stub graph calls before (and generate fixtures based on the schema). This blog served as my starting point https://docs.cypress.io/guides/testing-strategies/working-with-graphql

Hello, how could I attach a image .jpg to a request over a post method ? I tried taking it from fixture as it is but it's not working. cy.fixture('rub-z-data-image/ms_1a26dd665a814149984040f0f116aa00.jpg').then((image) => { cy.request({ method: 'POST', url: 'API', body: image }).as('apiCall')

What’s the browser console telling you when you attempt this?

its 500 response