https://github.com/steelydylan/html-browser-tester
Run e2e tests on browsers without Node.js
https://github.com/steelydylan/html-browser-tester
Last synced: about 1 year ago
JSON representation
Run e2e tests on browsers without Node.js
- Host: GitHub
- URL: https://github.com/steelydylan/html-browser-tester
- Owner: steelydylan
- License: mit
- Created: 2022-11-12T00:52:34.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-05-03T11:53:11.000Z (about 2 years ago)
- Last Synced: 2025-03-17T16:55:29.098Z (about 1 year ago)
- Language: TypeScript
- Size: 67.4 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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 = `
Hello
h1 {
color: #000;
}
Title1
Title2
`
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()
```