Ok I did everything and am still at the same error as yesterday (albiet past a different error I was also having): I have the default test:

describe('My First Test', () => {
  it('Visits the app root url', () => {
    cy.visit('/')
    cy.contains('h1', 'Welcome to Your Vue.js App')
  })
})

It works great when ran in the UI, but when ran with

npx cypress run --headless

, the pass fails with a "404 not found" on the

/

path. I'm running in headless because eventually I would like to run this in CI/CD, and I assume (maybe wrongly) that this is how that will happen, so I just wanted to see that work.

Let's figure it out. That

/

is relative to the

baseUrl

is set to in your

cypress.json

file. So I'd check if that is set and looks correct there (it probably should be

http://localhost:8080

but I think it's not added by default). And make sure the app is running. Open vs Run mode should not make a difference for cy.visit behavior as far as I know.

Ok got past that by setting the following on my cypress.json

"baseUrl": "http://localhost:8080",
    "port": 8080

Now I just get some random "cannot set property name of which only has a getter" error on the tests failure, witch a pretty useless (at least as far as I can tell) stack trace fixed with

"chromeWebSecurity": false

I think the

port

key in your cypress.json does not need to be set for this. Your baseUrl contains the port that your app is running on. This other

port

key itself is identifying the port that Cypress runs on (I'm looking here for the info on the config options: https://docs.cypress.io/guides/references/configuration#Global). I've ever manually put a port in there so not sure what the effect is. I'd suggest just removing it, did the baseUrl alone not work?

whats your base url then?

Cool. For E2E testing, Cypress just needs a URL to visit. If you are serving the app locally and want to run rests against that, you're responsible for serving it. You can hit any url with

cy.visit

and test things, so in theory you can point to an externally deployed instance of your app, or even production, and make all the same actions/assertions. In E2E Cypress doesn't know or care anything about how your app is built or served, it just works with whatever it finds at the page you tell it to visit. Same thing in CI, you'll need to build and serve the app, then have cypress visit it once it is running. There are specific guides/examples for most CI providers you might be using. Component testing is a different story though. In a component test, Cypress is serving up an empty web page for you and mounting an individual component there. So that's where that startDevServer stuff comes in -- Cypress isn't running your whole app, but it does need to get set up to mount your components and configure webpack correctly. It's explained a little here: https://docs.cypress.io/guides/component-testing/framework-configuration#Vue-2-Vue-CLI

Awesome that makes a lot of sense. Thanks for your time

It's in alpha so that comes with caveats around specific details maybe changing. At my last company we dove in a few months after component testing landed and started using it for all our new stuff, it worked great for us. Particularly the workflow of setting up tests for various states while building out those states. I liked it so much I came to work at cypress, go figure. Component testing and unit testing are different but related. Unit tests are usually testing a single function and making sure it returns the correct stuff for various inputs. Some components are small and basically just return some DOM based on props, and might be a "unit" in that sense. But then sometimes components compose a ton of other components and functionality, so they're way bigger than just a "unit" of your system. Feel free to reach out if you hit any more blockers. Sounds like you are new to Cypress & front end testing? If so welcome!

Gotchya ok those differences make sense. Yes definetly new to at least front end testing, and Cypress has been really appealing for many reasons. Will do if I run into any more problems!