Cypress initial cleanup pass (airbytehq#16189)

* Update README with instructions

* Prevent test failures from intentionally-thrown errors

* Rephrase cypress open instructions in README

* Add CI repro documentation

airbyte-webapp-e2e-tests/README.md

@@ -1,5 +1,28 @@
-## Start Cypress
+## Running an interactive Cypress session with `npm run cypress:open`
+The most useful way to run tests locally is with the `cypress open` command. It opens a dispatcher window that lets you select which tests and browser to run; the Electron browser (whose devtools will be very familiar to chrome users) opens a child window, and having both cypress windows grouped behaves nicely when switching between applications. In an interactive session, you can use `it.skip` and `it.only` to focus on the tests you care about; any change to the source file of a running test will cause tests to be automatically rerun. At the end of a test run, the web page is left "dangling" with all state present at the end of the last test; you can click around, "inspect element", and interact with the page however you wish, which makes it easy to incrementally develop tests.
 
-### `npm install`
+By default, this command is configured to visit page urls from port 3000 (as used by a locally-run dev server), not port 8000 (as used by docker-compose's `webapp` service). If you want to run tests against the dockerized UI instead, leave the `webapp` docker-compose service running in step 4) and start the test runner with `CYPRESS_BASE_URL=http://localhost:8000 npm run cypress:open` in step 8).
 
-### `npm run cypress:open`
+Except as noted, all commands are written as if run from inside the `airbyte-webapp-e2e-tests/` directory.
+
+Steps:
+1) If you have not already done so, run `npm install` to install the e2e test dependencies.
+2) Build the OSS backend for the current commit with `SUB_BUILD=PLATFORM ../gradlew clean build`.
+3) Create the test database: `npm run createdb`.
+4) Start the OSS backend: `VERSION=dev docker-compose --file ../docker-compose.yaml up`. If you want, follow this with `docker-compose stop webapp` to turn off the dockerized frontend build; interactive cypress sessions don't use it.
+5) The following two commands will start a separate long-running server, so open another terminal window. In it, `cd` into the `airbyte-webapp/` directory.
+6) If you have not already done so, run `npm install` to install the frontend app's dependencies.
+7) Start the frontend development server with `npm start`.
+8) Back in the `airbyte-webapp-e2e-tests/` directory, start the cypress test runner with `npm run cypress:open`.
+
+## Reproducing CI test results with `npm run cypress:ci` or `npm run cypress:ci:record`
+Unlike `npm run cypress:open`, `npm run cypress:ci` and `npm run cypress:ci:record` use the dockerized UI (i.e. they expect the UI at port 8000, rather than port 3000). If the OSS backend is running but you have run `docker-compose stop webapp`, you'll have to re-enable it with `docker-compose start webapp`. These trigger headless runs: you won't have a live browser to interact with, just terminal output.
+
+Except as noted, all commands are written as if run from inside the `airbyte-webapp-e2e-tests/` directory.
+
+Steps:
+1) If you have not already done so, run `npm install` to install the e2e test dependencies.
+2) Build the OSS backend for the current commit with `SUB_BUILD=PLATFORM ../gradlew clean build`.
+3) Create the test database: `npm run createdb`.
+4) Start the OSS backend: `VERSION=dev docker-compose --file ../docker-compose.yaml up`.
+5) Start the cypress test run with `npm run cypress:ci` or `npm run cypress:ci:record`.

airbyte-webapp-e2e-tests/cypress/integration/base.spec.ts

@@ -8,6 +8,8 @@ describe("Error handling view", () => {
       },
     });
 
+    cy.on("uncaught:exception", () => false);
+
     cy.visit("/");
 
     cy.get("div").contains("Version mismatch between 0.0.1-ci and 0.0.2-ci.").should("exist");
@@ -19,6 +21,8 @@ describe("Error handling view", () => {
       body: "Failed to fetch",
     });
 
+    cy.on("uncaught:exception", () => false);
+
     cy.visit("/");
 
     cy.get("div").contains("Cannot reach server. The server may still be starting up.").should("exist");