Add Playwright for browser tests, with some tests for the index page

example_site/node_modules
example_site/_site
docs
browser_tests/setup/node_modules
browser_tests/setup/_site

# Playwright
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
/playwright/.auth/

import repoViewer, {beforeHook} from "eleventy-plugin-repoviewer"
import eleventyRss from "@11ty/eleventy-plugin-rss"
import { RenderPlugin } from "@11ty/eleventy"
import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight"

export default async function(eleventyConfig) {
  eleventyConfig.addPlugin(eleventyRss)
  eleventyConfig.addPlugin(RenderPlugin)
  eleventyConfig.addPlugin(syntaxHighlight)

  const reposConfig = {
    baseUrl: "https://localhost:8080",
    path: '/repos',
    repos: {
      "git static site UI": {
        defaultTemplate: {
          homepageButtons: [
            {
              url: "https://example.com",
              text: "Setup Guide",
            }
          ]
        },
        defaultBranch: "main",
        tags: [],
        branches: [
          "**",
        ],
        location: "../../",
        description: "Do you like plain old HTML pages? Want to host git repos on your own site? Cool, me too.",
      },
    }
  }

  eleventyConfig.on("eleventy.beforeConfig", beforeHook(eleventyConfig, reposConfig))
  eleventyConfig.on("eleventy.beforeConfig", async () => {
    eleventyConfig.addPassthroughCopy("test.txt")
  })
  eleventyConfig.addPlugin(repoViewer, reposConfig)
};

{
  "name": "eleventy-repoviewer-example-site",
  "version": "1.0.0",
  "description": "A sample 11ty site that uses eleventy-plugin-repoviewer to display a git repository. In this case, the git repository being displayed is eleventy-plugin-repoviewer itself.",
  "license": "ISC",
  "author": "Tucker McKnight",
  "type": "module",
  "dependencies": {
    "@11ty/eleventy": "^3.1.2",
    "@11ty/eleventy-plugin-rss": "^2.0.4",
    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
    "eleventy-plugin-repoviewer": "file:../../"
  }
}

import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('http://localhost:8081/repos');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle("Repositories");
});

test('has links to repos and shows clone URL', async ({ page }) => {
  await page.goto('http://localhost:8081/repos');

  await expect(
    page.getByText('https://localhost:8080/repos/git-static-site-ui.git')
  ).toBeVisible();

  // Go to the first repo on the page
  await page.getByRole('link', { name: 'Go to site' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'git static site UI' })).toBeVisible();
});

test('the light mode/dark mode switch works', async ({ page }) => {
  await page.goto('http://localhost:8081/repos');

  // click light mode
  (await page.waitForSelector("#dark-mode-switch")).click();
  await page.getByRole('button', { name: /Light/ }).click();

  const body =  await page.locator('body');
  expect(body).toHaveCSS('background-color', "rgb(239, 242, 228)");

  // click dark mode
  (await page.waitForSelector("#dark-mode-switch")).click();
  await page.getByRole('button', { name: /Dark/ }).click();

  expect(body).toHaveCSS('background-color', "rgb(8, 15, 53)");
});

        "mithril-node-render": "^3.0.2"
      },
      "devDependencies": {
        "@playwright/test": "^1.63.0",
        "@types/node": "^24.0.7",
        "bootstrap": "^5.3.8",
        "rollup": "^4.57.1",

        "url": "https://opencollective.com/parcel"
      }
    },
    "node_modules/@playwright/test": {
      "version": "1.63.0",
      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.63.0.tgz",
      "integrity": "sha512-oxMK4vllB9RK5NQ2l1pq1IfOf2AvnEuj/vYGDj0H2nMtmtZpKtCwt/l00GEO6xjGfpBNAvjovvYdCm50dRQkpQ==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
        "playwright": "1.63.0"
      },
      "bin": {
        "playwright": "cli.js"
      },
      "engines": {
        "node": ">=20"
      }
    },
    "node_modules/@popperjs/core": {
      "version": "2.11.8",
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",

        "arm64"
      ],
      "dev": true,
⁣
⁣
⁣
      "license": "MIT",
      "optional": true,
      "os": [

        "arm64"
      ],
      "dev": true,
⁣
⁣
⁣
      "license": "MIT",
      "optional": true,
      "os": [

        "ppc64"
      ],
      "dev": true,
⁣
⁣
⁣
      "license": "MIT",
      "optional": true,
      "os": [

        "s390x"
      ],
      "dev": true,
⁣
⁣
⁣
      "license": "MIT",
      "optional": true,
      "os": [

        "x64"
      ],
      "dev": true,
⁣
⁣
⁣
      "license": "MIT",
      "optional": true,
      "os": [

        "x64"
      ],
      "dev": true,
⁣
⁣
⁣
      "license": "MIT",
      "optional": true,
      "os": [

        "arm64"
      ],
      "dev": true,
⁣
⁣
⁣
      "license": "MPL-2.0",
      "optional": true,
      "os": [

        "arm64"
      ],
      "dev": true,
⁣
⁣
⁣
      "license": "MPL-2.0",
      "optional": true,
      "os": [

        "x64"
      ],
      "dev": true,
⁣
⁣
⁣
      "license": "MPL-2.0",
      "optional": true,
      "os": [

        "x64"
      ],
      "dev": true,
⁣
⁣
⁣
      "license": "MPL-2.0",
      "optional": true,
      "os": [

        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
    "node_modules/playwright": {
      "version": "1.63.0",
      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.63.0.tgz",
      "integrity": "sha512-+7ziBLidS4NaNCdt57SUDT+wYmmd5fmiQejUic/kb+YsYSCPyOOE9sebzMjNmQrsnNpDJqd4WHvV/8lfKfUDUg==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
        "playwright-core": "1.63.0"
      },
      "bin": {
        "playwright": "cli.js"
      },
      "engines": {
        "node": ">=20"
      }
    },
    "node_modules/playwright-core": {
      "version": "1.63.0",
      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.63.0.tgz",
      "integrity": "sha512-rYCsBF/M5HjUch52bbtVONEFjv6Xu8sm8h72dNlR5bzIE1fvC/bxgspzkjSfU+MweEMmPM8KJebG6nnyxo5mCg==",
      "dev": true,
      "license": "Apache-2.0",
      "bin": {
        "playwright-core": "cli.js"
      },
      "engines": {
        "node": ">=20"
      }
    },
    "node_modules/postcss": {
      "version": "8.5.26",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",

  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@playwright/test": "^1.63.0",
    "@types/node": "^24.0.7",
    "bootstrap": "^5.3.8",
    "rollup": "^4.57.1",

import { defineConfig, devices } from '@playwright/test';

/**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
 */
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });

/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig({
  testDir: './browser_tests/tests',
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Base URL to use in actions like `await page.goto('')`. */
    // baseURL: 'http://localhost:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },

    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },

    /* Test against mobile viewports. */
    // {
    //   name: 'Mobile Chrome',
    //   use: { ...devices['Pixel 5'] },
    // },
    // {
    //   name: 'Mobile Safari',
    //   use: { ...devices['iPhone 12'] },
    // },

    /* Test against branded browsers. */
    // {
    //   name: 'Microsoft Edge',
    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
    // },
    // {
    //   name: 'Google Chrome',
    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    // },
  ],

  /* Run your local dev server before starting the tests */
  // webServer: {
  //   command: 'npm run start',
  //   url: 'http://localhost:3000',
  //   reuseExistingServer: !process.env.CI,
  // },
});

    "module": "node18",
    "target": "es6",
    "lib": ["esnext", "dom"],
⁣
    "outDir": "dist"
  },
  "include": ["**/*.ts"],
  "exclude": [
    "dist/**/*",
    "ts/frontend/**/*",
    "browser_tests/**/*"
  ],
}