use webpack-dev-server in e2e?

[derdeka]

Hi,
instead of starting an additional webserver in e2e tests, i would like to use @cypress/webpack-dev-server to serve test pages and webpack compiled files (webpack entries) to the tests:

import { startDevServer } from '@cypress/webpack-dev-server'

module.exports = (on, config) => {
  on('dev-server:start', async (options) => startDevServer({ options }))

  return config
}

My existing webpack configuration compiles typescript files and handles code coverage instrumentation.

As far as i understand after some debugging, the event 'dev-server:start' is only triggered when running component tests (with cypress run-ct or cypress open-ct), but not in e2e tests (with cypress run or cypress open).

• Q1: Is there a reason to trigger dev-server:start only for component tests but not for e2e tests?
• Q2: Is there a way to register dev-server:start also for e2e?
• Q3: What is the best practice to launch the webpack-dev-server for e2e test?

[gardiner]

Hi @derdeka, I am also interested in running e2e tests without starting an external dev server. Did you manage to get it running in some way or another? Thanks!
Best, Ole.

[gardiner]

Hi @derdeka, just to let you know, I was able to launch our "usual" dev server from the cypress config file and use it during the e2e tests:

const { defineConfig } = require("cypress");

const connect = require('gulp-connect');

module.exports = defineConfig({
    e2e: {
        experimentalRunAllSpecs: true,
        supportFile: "cypress/support/e2e.js",
        baseUrl: "http://localhost:8008/",
        setupNodeEvents(on, config) {
            connect.server({
                root: '../../',
                port: 8008,
            });
        },
    },

    include: ["js/**/*.js"],

    component: {
        devServer: {
            framework: "vue",
            bundler: "webpack",
        },
    },

    viewportWidth: 1000,
    viewportHeight: 660,
});