[Question] Does this work with webpack-dev-server ?

[remy-poirier]

Thank you for taking time to open a new issue. Please answer a few questions to help us fix it faster. You can delete text that is irrelevant to the issue.

Is this a bug report or a feature request?

It's a question

Description

Hi, I am trying to integrate your module, I find it in Cypress documentation.
I have a React Application build with Webpack, I use Webpack-dev-server, in my script I have :
"ci": "start-server-and-test start http://localhost:8080 cy:open",

Where start simply start my server by doing :
"start": "webpack-dev-server --watch",

And it seems to work fine, except that it doesn't wait the end of bundling before launching the test command, here is what happen in the console :

starting server using command "npm run start" and when url "http://localhost:8080" is responding running tests using command "cy:open"

webpack-dev-server --watch
http://localhost:8080/
webpack result is served from /
content is served from C:\Dev\workspace\setup\react

Here it should wait the bundle to be done, but instead of this, it launches the next command

cypress open

Do you have any idea of how I can accomplish what I want to do ?
Temporarily I set a sleep of 30s in my test runner but it's not maintainable.

[bahmutov]

so it seems from what you have described is that webpack-dev-server --watch responds at url http://localhost:8080 even before it has finished bundling the modules. Can you check if non-watch mode starts correctly after bundling? On CI especially, it should not be opening Cypress in the interactive mode (cypress open) or running webpack server in watch mode. I have not used webpack-dev-server in quite some time, but maybe you can try

"ci": "start-server-and-test start http://localhost:8080 cy:run"
"run": "webpack-dev-server"
"cy:run": "cypress run"

When you work locally, you can just reload the Cypress tests after the server bundles things, right?

[remy-poirier]

Thank you for this fast answer,

Yes it's exactly that ! It seems to respond even before it has finished bundling modules, so my tests fail with this error : We attempted to make an http request to this URL but the request failed without a response

I tried to remove the watch in local and simply do something like :

"start-base": "webpack-dev-server",
"ci": "start-server-and-test start-base http://localhost:8080 cy:run",

But I still have the error, and I see cypress running before Webpack finishes bundling, and it displays a message in the console like : wait until bundle finished

[bahmutov]

That’s really weird - someone how to investigate how to force webdev server to wait serving website until it bundles

…

Sent from my iPhone

On Mar 16, 2018, at 12:14, Remy-Poirier ***@***.***> wrote: Yes it's exactly that ! It seems to respond even before it has finished bundling modules, so my tests fail with this error : We attempted to make an http request to this URL but the request failed without a response I tried to remove the watch in local and simply do something like : "start-base": "webpack-dev-server", "ci": "start-server-and-test start-base http://localhost:8080 cy:run", But I still have the error, and I see cypress running before Webpack finishes bundling, and it displays a message in the console like : wait until bundle finished — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[0x-r4bbit]

I'm experiencing a similar thing, at least it looks like this is related. I'm having an Angular CLI project and the way I have it setup is like this:

    "start:e2e": "ng serve --env=e2e",
    "cy:run": "cypress run",
    "ci": "start-server-and-test start:e2e http://localhost:4200 cy:run",

Notice that ng serve spins up a webserver on 4200 by default.

Here's the output I'm getting:

> start-server-and-test start:e2e http://localhost:4200 cy:run

starting server using command "npm run start:e2e"
and when url "http://localhost:4200" is responding
running tests using command "cy:run"

> @machinelabs/client@0.28.1 start:e2e /Users/pascalprecht/projects/machinelabs/machinelabs/client
> ng serve --env=e2e

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 10% building modules 3/3 modules 0 active(node:865) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
Date: 2018-03-28T17:27:35.484Z                                                          
Hash: 0fdd139aef1047ee127a
Time: 15307ms
chunk {embedded-editor-embedded-editor-module} embedded-editor-embedded-editor-module.js (embedded-editor-embedded-editor-module) 110 kB  [rendered]
chunk {explore-explore-module} explore-explore-module.js (explore-explore-module) 81.2 kB  [rendered]
chunk {handshake-handshake-module} handshake-handshake-module.js (handshake-handshake-module) 76.7 kB  [rendered]
chunk {lab-editor-lab-editor-module} lab-editor-lab-editor-module.js (lab-editor-lab-editor-module) 381 kB  [rendered]
chunk {landing-page-landing-page-module} landing-page-landing-page-module.js (landing-page-landing-page-module) 139 kB  [rendered]
chunk {main} main.js (main) 869 kB [initial] [rendered]
chunk {polyfills} polyfills.js (polyfills) 596 kB [initial] [rendered]
chunk {runtime} runtime.js (runtime) 8.05 kB [entry] [rendered]
chunk {scripts} scripts.js (scripts) 221 kB  [rendered]
chunk {styles} styles.js (styles) 381 kB [initial] [rendered]
chunk {user-profile-user-profile-module} user-profile-user-profile-module.js (user-profile-user-profile-module) 119 kB  [rendered]
chunk {vendor} vendor.js (vendor) 23.8 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.

From this point on it just sits there, serves the app, cypress is never executed. I'm not 100% sure but it looks like, also in my case, judging by the output, that the server starts listening before it's done bundling the app. The fact that Angular CLI uses webpack behind the scenes kind of underlines that guess.

[bahmutov]

I have created a test in https://github.com/bahmutov/ng-cli-test1 and it is not passing, opened bahmutov/ng-cli-test1#1

Hmm, wait-on seems to receive 404 from the page

statusCode 404
child next []
child complete
statusCode 404
child next []
child complete
statusCode 404
child next []
child complete

Yeah, because it uses HEAD to get status, and webpack dev server returns 404

function createHttp$(url, options) {
  return Rx.Observable.catch(
    head(url, parseHttpOptions(options)),
    Rx.Observable.just([{statusCode: 999}])
  )
  .map(function (response) {
    // Why is response in array here?
    var statusCode = response[0].statusCode;
    console.log('statusCode', statusCode)

$ http HEAD http://localhost:4200
HTTP/1.1 404 Not Found
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 140
Content-Security-Policy: default-src 'self'
Content-Type: text/html; charset=utf-8
Date: Thu, 29 Mar 2018 21:48:10 GMT
X-Content-Type-Options: nosniff
X-Powered-By: Express



~/git/hello-world-vscode/hello-world on master
$ http GET http://localhost:4200
HTTP/1.1 200 OK
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 613
Content-Type: text/html; charset=UTF-8
Date: Thu, 29 Mar 2018 21:48:16 GMT
ETag: W/"265-dVfTWobMZzxm3Bd2/j7CxSjo6Og"
X-Powered-By: Express

solution use start-server-and-test start http-get://localhost:4200 ... instead of http://... to use GET method in the probe. Will add a note to the README

[bahmutov]

🎉 This issue has been resolved in version 1.1.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[0x-r4bbit]

Thank you so much for your quick support @bahmutov !!

[AlexeyToksarov]

That's weird but it still displays 404 to me:

child next [ { 'http-get://localhost:4200': -404 } ]

It's working with http-get://localhost:4200/main.bundle.js URL though

Update: looks like Angular CLI returns 404 for GET localhost:4200 requests without Accept: text/html header

[bahmutov]

That is so weird, any reproducible steps?

…

Sent from my iPhone

On Mar 31, 2018, at 18:59, Alexey Toksarov ***@***.***> wrote: That's weird but it still displays 404 to me: child next [ { 'http-get://localhost:4200': -404 } ] It's working with http-get://localhost:4200/main.bundle.js URL though — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[AlexeyToksarov]

Sure https://github.com/AlexeyToksarov/ng-wait-on-test

Looks like this is because I use a slightly unusual setup with multiple apps in .angular-cli.json, but with Accept: text/html header it works correctly

[jspieker]

@AlexeyToksarov Where did you set the headers?

[AlexeyToksarov]

@jspieker I didn't set different headers. I use http-get://localhost:4200/main.bundle.js instead

[jspieker]

@AlexeyToksarov Ah, seems like this workaround broke in Angular 6 then. I tried using http-get://localhost:4200/main.js (Angular 6 equivalent). It works on my system but the Gitlab pipeline gets stuck just as described above.

[hyjqdy]

@jspieker Sometimes, you can try to change localhost to 127.0.0.1 to fix the proxy issue. I has the similar issue with you and finally solved using 127.0.0.1.

[andrei9669]

hello,
I'm using something like this

"start": "npm-run-all --parallel open:src lint:watch",
"cy:run": "cypress run",
"cy:test": "start-server-and-test start http-get://localhost:3000 cy:run"

and it doesn't start the test after webpack is built.
I'm kinda new to this stuff so I have no idea what's inside start and does it affect testing, but it probably does.

[AlexeyToksarov]

@andrei9669 I think you could try

"cy:test": "start-server-and-test start http-get://localhost:3000/main.js  cy:run"

Also, I'm not sure why the port is 3000 (it's 4200 by default) but if it's your actual port then it's fine

[andrei9669]

@AlexeyToksarov nope, didn't work :/

[rodoabad]

start-server-and-test won't work well if the webpack dev server is proxying another server e.g. an API server.

#163

[iamgollum]

I can confirm the GET approach works with the latest Create React App (CRA) Build using a Proxy when I run Cypress via cli: test:acceptance.

  "proxy": "http://localhost:3001",

    "start": "react-scripts start",
    "start:cli": "cross-env BROWSER=none react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "test:acceptance": "start-server-and-test start:cli http-get://localhost:3000 cy:run",