BrowserStack Local Testing + Cypress: local HTML file

Question

I have a frontend app, and the final result of the build command is a single HTML file: index.html

I have cypress tests for it, validating the index.html file shows visually perfect: cy.visit('./dist/index.html'). I do not need to serve the index.html file over HTTP to be able to test it. Cypress automatically picks it up and I'm happy with it.

Now I need to do the same test in BrowserStack. So far I had no luck being able to run BrowserStack against local HTML files. I've followed the tutorials and docs, they mostly work when you serve your app over HTTP (e.g. cy.visit('http://localhost:8080')) which works for me too.

But I constantly receive this error:

`cy.visit()` failed trying to load: ./dist/index.html The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false`

error stack on BrowserStack:

`cy.visit()` failed trying to load:

./dist/index.html

The response we received from your web server was:

  > 502: Bad Gateway

This was considered a failure because the status code was not `2xx`.

If you do not want status codes to cause failures pass the option: `failOnStatusCode: false`
    at <unknown> (http://localhost:29070/__cypress/runner/cypress_runner.js:147661:84)
    at visitFailedByErr (http://localhost:29070/__cypress/runner/cypress_runner.js:147069:12)
    at <unknown> (http://localhost:29070/__cypress/runner/cypress_runner.js:147644:13)
    at tryCatcher (http://localhost:29070/__cypress/runner/cypress_runner.js:18744:23)
    at Promise._settlePromiseFromHandler (http://localhost:29070/__cypress/runner/cypress_runner.js:16679:31)
    at Promise._settlePromise (http://localhost:29070/__cypress/runner/cypress_runner.js:16736:18)
    at Promise._settlePromise0 (http://localhost:29070/__cypress/runner/cypress_runner.js:16781:10)
    at Promise._settlePromises (http://localhost:29070/__cypress/runner/cypress_runner.js:16857:18)
    at _drainQueueStep (http://localhost:29070/__cypress/runner/cypress_runner.js:13451:12)
    at _drainQueue (http://localhost:29070/__cypress/runner/cypress_runner.js:13444:9)
    at ../../node_modules/bluebird/js/release/async.js.Async._drainQueues (http://localhost:29070/__cypress/runner/cypress_runner.js:13460:5)
    at Async.drainQueues (http://localhost:29070/__cypress/runner/cypress_runner.js:13330:14)
From Your Spec Code:
    at eval (webpack:///./cypress/e2e/visual-test.cy.js:22:7)
at Array.forEach (<anonymous>)
    at Context.eval (webpack:///./cypress/e2e/visual-test.cy.js:17:13)

simplified test code:

cy.visit(`./test/output/banner/index.html?seek=${time}`);
cy.get('#stage > :nth-child(2)').should('be.visible');
cy.compareSnapshot(`snapshot of page`);

What I tried so far

• I tried copying the result index.html file in different places of my project (root folder, beside cypress test and beside cypress config), did not help
• I tried passing folder ./dist and folder dist/ to YML file and passed that YML file as local_config_file in connection_settings.
• I tried manually running local BrowserStack binary and point to its identifier in connection_settings.local_identifier. And also removing connection_settings.local_identifier when running BrowserStack bimary locally
• running simply ./BrowserStackLocal --key <MY_KEY> also does not allow me to see file:///index.html in BrowserStack live session

Answer 1

Could you try upgrading the BrowserStack Cypress CLi, because I can see that the support for uploading .HTML files was added recently.

Link for reference