Setting up web-test-runner

button_click.test.js

// test/button_click.js

import { fixture, assert, aTimeout, html as testhtml } from "@open-wc/testing"

// Custom elements could go here, or be imported

describe("button click", () => {
  it("handles click properly", async () => {
    const el = await fixture(testhtml`
      <test-element>
        <article>
          <button onclick="this.textContent='clicked!'">Button</button>
        </article>
      </test-element>
    `)

    el.querySelector("button").click()
    assert.equal(el.shadowRoot.querySelector("test-msg").textContent, "clicked!")
  })
})

ci.yml

# .github/workflows/ci.yml

name: CI Test

on:
  pull_request:
    branches:
      - "*"
  push:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Set up Node
      uses: actions/setup-node@v3
      with:
        node-version: '20'
        cache: 'npm'

    - name: Install packages
      run: npm ci

    - name: Set up Playwright
      run: npx playwright install --with-deps

    - name: Run tests
      run: npm run test

package.json

  "scripts": {
    "test": "web-test-runner --node-resolve",
    "test:dev": "npm run test -- --watch"
  },
  "devDependencies": {
    "@open-wc/testing": "^3.2.0",
    "@web/test-runner": "^0.17.1",
    "@web/test-runner-playwright": "^0.10.1",
  }

web-test-runner.config.mjs

import { playwrightLauncher } from "@web/test-runner-playwright"

export default {
  browsers: [
    playwrightLauncher({ product: "chromium" }),
    playwrightLauncher({ product: "firefox" }),
    playwrightLauncher({ product: "webkit" }),
  ],
  files: "test/**/*.test.js",
}