# html-browser-tester

> HTML Based browser tester without Node.js, Especially for HTML, CSS tests

Latest version **0.0.24** (published 2024-01-05) · 0 weekly downloads

## Install

```sh
npm install html-browser-tester
pnpm add html-browser-tester
yarn add html-browser-tester
bun add html-browser-tester
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.24 |
| Published | 2024-01-05 |
| First published | 2022-11-12 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 31 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Maintainers | steelydylan |

## Links

- npm: https://www.npmjs.com/package/html-browser-tester
- Repository: https://github.com/steelydylan/html-browser-tester
- Issues: https://github.com/steelydylan/html-browser-tester/issues
- npm.io page: https://npm.io/package/html-browser-tester

## Recent versions

- 0.0.24 (latest) — 2024-01-05
- 0.0.23 — 2024-01-05
- 0.0.22 — 2024-01-05
- 0.0.21 — 2023-09-19
- 0.0.20 — 2023-09-19
- 0.0.19 — 2023-08-11
- 0.0.18 — 2023-07-02
- 0.0.17 — 2023-07-01
- 0.0.16 — 2023-06-25
- 0.0.15 — 2022-12-08
- 0.0.14 — 2022-11-22
- 0.0.13 — 2022-11-22
- 0.0.12 — 2022-11-15
- 0.0.11 — 2022-11-15
- 0.0.10 — 2022-11-12
- … 9 more at https://npm.io/package/html-browser-tester/versions

## README

# HTML Browser Tester

HTML Based browser tester without Node.js, Especially for HTML, CSS tests

## Install

```
npm install html-browser-tester
```

## Example

```js
import { BrowserTester } from 'html-browser-tester'

const html = `
  <!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
    <style>
      h1 {
        color: #000;
      }
    </style>
  </head>
  <body>
    <h1>Title1</h1>
    <h2>Title2</h2>
  </body>
  </html>
`

const main = async () => {
  const browserTester = new BrowserTester({ html, width: 980, height: 980 })

  browserTester.test('h1,h2 textContent should have right textContent', async (_, doc) => {
    const h1 = doc.querySelector('h1')
    const h2 = doc.querySelector('h2')
    browserTester.expect(h1?.textContent).toBe('Title1')
    browserTester.expect(h2?.textContent).toBe('Title2')
  })

  browserTester.test('title should have right textContent', async (_, doc) => {
    const title = doc.querySelector('title')
    browserTester.expect(title?.textContent).toBe('Hello')
  })

  browserTester.test('h2 should have red text', async (window, doc) => {
    const h2 = doc.querySelector('h2')
    browserTest.expect(window.getComputedStyle(h2).color).toBe('rgb(255, 0, 0)')
  })

  const results = await browserTester.run()

  console.log(results)
  /*
   [
    { description: 'h1,h2 textContent should have right textContent', result: true },
    { description: 'title should have right textContent', result: true },
    { description: 'h2 should have red text', result: true }
   ]
  */
}

main()
```

### Evaluate

You can also evaluate template literals to run tests

```js
browserTest.evaluate(`
  test('h1,h2 textContent should have right textContent', async (_, doc) => {
    const h1 = doc.querySelector('h1')
    const h2 = doc.querySelector('h2')
    expect(h1?.textContent).toBe('Title1')
    expect(h2?.textContent).toBe('Title2')
  })

  test('title should have right textContent', async (_, doc) => {
    const title = doc.querySelector('title')
    expect(title?.textContent).toBe('Hello')
  })

  test('h2 should have red text', async (window, doc) => {
    const h2 = doc.querySelector('h2')
    expect(window.getComputedStyle(h2).color).toBe('rgb(255, 0, 0)')
  })
`)
const results = await browserTester.run()
```

---
_Source: https://npm.io/package/html-browser-tester · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._