Update e2e tests for deephaven.ui

- Now it will check that the error cases are displayed correctly

README.md

@@ -57,6 +57,7 @@ pre-commit run --all-files
 All steps should pass.
 
 To bypass the pre-commit hook, you can commit with the `--no-verify` flag, for example:
+
 ```shell
 git commit --no-verify -m "commit message"`
 ```
@@ -67,7 +68,7 @@ We use [Playwright](https://playwright.dev/) for end-to-end tests. We test again
 
 You should be able to pass arguments to these commands as if you were running Playwright via CLI directly. For example, to test only `matplotlib.spec.ts` you could run `npm run e2e:docker -- ./tests/matplotlib.spec.ts`, or to test only `matplotlib.spec.ts` in Firefox, you could run `npm run e2e:docker -- --project firefox ./tests/matplotlib.spec.ts`. See [Playwright CLI](https://playwright.dev/docs/test-cli) for more details.
 
-It is highly recommended to use `npm run e2e:docker` (instead of `npm run e2e`) as CI also uses the same environment. You can also use `npm run e2e:update-snapshots` to regenerate snapshots in said environment.
+It is highly recommended to use `npm run e2e:docker` (instead of `npm run e2e`) as CI also uses the same environment. You can also use `npm run e2e:update-snapshots` to regenerate snapshots in said environment. Run Playwright in [UI Mode](https://playwright.dev/docs/test-ui-mode) with `npm run e2e:ui` when creating new tests or debugging, as this will allow you to run each test individually, see the browser as it runs it, inspect the console, evaluate locators, etc.
 
 ### Running Python tests
 
@@ -229,6 +230,6 @@ After you have successfully run `tools/release.sh` once, you should be able to d
 
 As part of the release process, `cog` will, per our `cog.toml` configuration, invoke `tools/update_version.sh <packageName> <newVersion>`, which is a script that uses `sed` to update a plugin's version number in whatever source file we happen to use as the source of truth for version information in the given plugin.
 
-*[WARNING]* If you change where the source of truth for a plugin's version is located, you must update `tools/update_version.sh` to update the correct file with a new version number.
+_[WARNING]_ If you change where the source of truth for a plugin's version is located, you must update `tools/update_version.sh` to update the correct file with a new version number.
 
 We use `tools/update_version.sh` to remove any `.dev0` "developer version" suffix before creating a release, and to put the `.dev0` version suffix back after completing the release.

package.json

@@ -16,7 +16,8 @@
     "test:ci": "run-p test:ci:*",
     "test:ci:unit": "jest --config jest.config.unit.cjs --ci --cacheDirectory $PWD/.jest-cache",
     "test:ci:lint": "jest --config jest.config.lint.cjs --ci --cacheDirectory $PWD/.jest-cache",
-    "e2e": "playwright run",
+    "e2e": "playwright test",
+    "e2e:ui": "playwright test --ui",
     "e2e:docker": "DEEPHAVEN_PORT=10001 ./tools/run_docker.sh e2e-tests",
     "e2e:update-snapshots": "./tools/run_docker.sh update-snapshots",
     "update-dh-packages": "lerna run --concurrency 1 update-dh-packages"

tests/ui.spec.ts

@@ -11,5 +11,39 @@ test('boom component shows an error in a panel', async ({ page }) => {
   await gotoPage(page, '');
   await openPanel(page, 'ui_boom', '.dh-react-panel');
   await expect(page.locator('.dh-react-panel')).toBeVisible();
-  await expect(page.locator('.ui-error-view')).toHaveText('Boom!');
+  await expect(
+    page.locator('.dh-react-panel').getByText('Exception', { exact: true })
+  ).toBeVisible();
+  await expect(
+    page
+      .locator('.dh-react-panel')
+      .getByText('BOOM! Traceback (most recent call last)')
+  ).toBeVisible();
+  await expect(page.locator('.dh-react-panel-overlay')).not.toBeVisible();
+});
+
+test('boom counter component shows error overlay after clicking the button twice', async ({
+  page,
+}) => {
+  await gotoPage(page, '');
+  await openPanel(page, 'ui_boom_counter', '.dh-react-panel');
+
+  const panelLocator = page.locator('.dh-react-panel');
+
+  let btn = await panelLocator.getByRole('button', { name: 'Count is 0' });
+  await expect(btn).toBeVisible();
+  btn.click();
+
+  btn = await panelLocator.getByRole('button', { name: 'Count is 1' });
+  await expect(btn).toBeVisible();
+  btn.click();
+
+  const overlayLocator = page.locator('.dh-react-panel-overlay');
+
+  await expect(
+    overlayLocator.getByText('ValueError', { exact: true })
+  ).toBeVisible();
+  await expect(
+    overlayLocator.getByText('BOOM! Traceback (most recent call last)')
+  ).toBeVisible();
 });