Add a Playwright e2e test

[msabramo]

Write a Playwright test that tests the app end-to-end (e2e).

Motivation and Context

Ensure things don't get broken

How Has This Been Tested?

abramowi at marcs-mbp-3 in ~/Code/OpenSource/inspector (playwright-test●)
$ npx playwright test client/e2e/transport-type-dropdown.spec.ts

Running 1 test using 1 worker

  ✓  1 … Type Dropdown › should have options for STDIO, SSE, and Streamable HTTP (764ms)

  1 passed (1.5s)

Breaking Changes

No

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update

Checklist

• I have read the MCP Documentation
• My code follows the repository's style guidelines
• New and existing tests pass locally
• I have added appropriate error handling
• I have added or updated documentation as needed

Additional context

[msabramo]

Related PR (which has perhaps fallen into some disrepair): #354

[olaservo]

Thanks for setting this up. My draft PR I'd opened for feedback has been getting pretty moldy. A couple questions about this e2e setup:

• Are you thinking these should just be run locally during development? Originally I assumed that we should have these run as part of CI so we're not relying on that. I think it would also be OK to work that in as separate PRs.
• I'm making a similar assumption with adding Playwright configs - my original PR had some settings for browser, timeouts, etc. which we can add as we need them.
• How do you think we should approach adding tests for different transports? In my original tests I was duplicating a lot of code.

Thanks again for working on this, it should help bridge some gaps with testing basic stuff efficiently.

[cliffhall]

The test ran successfully, but only after

1. I downloaded the browsers (additional step required beyond just npm install)
2. Launching the inspector (you can't just run test:e2e, you have to run start then test:e2e)

Just thinking about how to handle this in CI. We'd need to use caching to install playwright and browsers only if they aren't cached. And start the server, then wait for it to be up before running the tests.

name: Playwright Tests

on:
  push:
    branches: [ main ] 
  pull_request:
    branches: [ main ]

jobs:
  test:
    timeout-minutes: 5
    runs-on: ubuntu-latest 

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 18 

      # Cache Playwright browsers
      - name: Cache Playwright browsers
        id: cache-playwright
        uses: actions/cache@v4 
        with:
          path: ~/.cache/ms-playwright # The default Playwright cache path
          key: ${{ runner.os }}-playwright-${{ hashFiles('package-lock.json') }} # Cache key based on OS and package-lock.json
          restore-keys: |
            ${{ runner.os }}-playwright-

      - name: Install dependencies
        run: npm ci 

      - name: Install Playwright and browsers unless cached
        run: npx playwright install --with-deps
        if: steps.cache-playwright.outputs.cache-hit != 'true' 

      - name: Start Server
        run: npm run start 

      - name: Wait for server to start
        run: npx wait-on http://localhost:6274

      - name: Run Playwright tests
        run: npm run test:e2e 

[msabramo]

@olaservo: I had been thinking that this would mainly be run in CI but I like to do things in baby steps so that I don't get overwhelmed and so reviewing is easier. My plan was to do the CI in a separate PR.

Though now I'm wondering if we should just go for it since @cliffhall points out that it's not trivial to set up the tests locally and a lot of people will simply not bother, so maybe it's not of much use if it's not also run in CI.

I probably should look at your PR and see what good stuff I can borrow re: config, timeouts, etc.

[msabramo]

Added .github/workflows/e2e_tests.yml (from @cliffhall) in 8a8212c. I guess a maintainer needs to approve the workflow to run so we can see how it works?

[cliffhall]

Added .github/workflows/e2e_tests.yml (from @cliffhall) in 8a8212c. I guess a maintainer needs to approve the workflow to run so we can see how it works?

@msabramo I tried but it failed on format check. Need to run prettier-fix to pass CI.

[msabramo]

@msabramo I tried but it failed on format check. Need to run prettier-fix to pass CI.

Done in df4c372.

[msabramo]

I added support for https://github.com/daun/playwright-report-summary in cdb9180.

As a result, at https://github.com/modelcontextprotocol/inspector/actions/runs/15509171521?pr=460 you can see a nice Playwright test report:

[msabramo]

@olaservo @cliffhall