webchat-html-tests

$npx mdskill add microsoft/BotFramework-WebChat/webchat-html-tests

Runs Bot Framework Web Chat HTML tests using Docker and Selenium Grid

  • Solves the task of testing and debugging Web Chat HTML and snapshot tests
  • Relies on Docker, Selenium Grid, and Jest for test execution
  • Uses regex to filter tests and environment variables to scale grid nodes
  • Delivers test results and grid health status through console output
SKILL.md
.github/skills/webchat-html-testsView on GitHub ↗
---
name: webchat-html-tests
description: 'Run Bot Framework Web Chat HTML tests in Docker/Selenium Grid. Use when: running __tests__/html2, debugging failing HTML tests, updating snapshots, checking grid health, or cleaning leaked Selenium sessions.'
argument-hint: 'Optional HTML test regex'
---

# Web Chat HTML Tests

Run the HTML test harness, keep Selenium Grid healthy, and debug failures without keeping all of the operational detail in the skill body.

## When to Use

- Running `__tests__/html2` for a branch or PR
- Debugging a failing HTML or snapshot test
- Updating snapshots after an intentional visual change
- Checking whether Selenium Grid is ready or leaking sessions

## Procedure

### 1. Start Selenium Grid

Use the bundled script instead of pasting long Docker commands.

For a focused test run, keep the default scale of 2 Chrome nodes:

```sh
./.github/skills/webchat-html-tests/scripts/start-grid.sh
```

For a full run, match Jest's 4 workers:

```sh
CHROME_SCALE=4 ./.github/skills/webchat-html-tests/scripts/start-grid.sh
```

### 2. Wait for Grid Readiness

```sh
python3 ./.github/skills/webchat-html-tests/scripts/wait-for-grid.py
```

Stop if the script times out or if the node summary does not show ready nodes.

### 3. Run Tests

Run the full suite:

```sh
./.github/skills/webchat-html-tests/scripts/run-html-tests.sh
```

Run a focused HTML test with a regex anchored to the exact file:

```sh
./.github/skills/webchat-html-tests/scripts/run-html-tests.sh "__tests__/html2/activity/message-status\.html$"
```

Update snapshots for an expected visual change:

```sh
./.github/skills/webchat-html-tests/scripts/run-html-tests.sh --update "__tests__/html2/activity/message-status\.html$"
```

### 4. Clean Grid Sessions After Every Run

```sh
python3 ./.github/skills/webchat-html-tests/scripts/cleanup-grid-sessions.py
```

If leaked sessions remain, clean them before the next Jest run or the grid can stall.

### 5. Recover Common Infra Problems

If dist files return 404s after a local build, restart `webchat2`:

```sh
docker compose -f docker-compose-wsl2.yml restart webchat2
```

If a failure is not obvious, load the reference docs before changing code:

- [Architecture and test layout](./references/architecture.md)
- [Failure modes and snapshot workflow](./references/failure-modes.md)

### 6. Tear Down

```sh
docker compose -f docker-compose-wsl2.yml down
```

## Checklist

- [ ] Grid is ready before running Jest
- [ ] Focused tests use an anchored regex when targeting one HTML file
- [ ] Sessions are cleaned after every run
- [ ] Snapshot updates are rerun without `--update`
- [ ] `npm run precommit` passes before opening the PR