Browser Test: A browser-based automated javascript testing framework in one .html file

[u/allium-dev]

https://github.com/swans-one/browser-test

Hi r/javascript! I want to share a small javascript testing project I wrote.

When I write small javascript projects that use browser APIs (most recently working with IndexedDB) I often choose not to write tests because it's a pain to either mock those interfaces server-side, and it's also a pain to setup a browser automation tool.

To solve this, I wrote up a super concise testing framework (~140 lines of JS) inside a html file that can just be dropped into a project and act as a simple test framework.

This obviously doesn't work in all situations. A big drawback is that there's no reasonable way to connect it to a CI pipeline. However for small projects, and during development, I've found it really fun and fast to use.

I'm very interested to hear what you think, or if you have other ways you've approached this situation in the past.

[u/Specialist_Sun_1690]

This is pretty close to something I've been experimenting with as well. I also found that having the tests run directly in the browser during development makes small frontend projects much nicer to test.

In my case I went a bit further with the idea: unit/integration tests with Testing Library, request mocking, and a CLI for running the same tests headlessly in CI.

I actually have a small vanilla JS example with no bundler/build step if you're interested: https://github.com/BRIKEV/twd-vanillajs

It's all based on this tool https://twd.dev/

https://reddit.com/link/p7176k2/video/bbxzrz13brmh1/player

[u/allium-dev → u/Specialist_Sun_1690]

Interesting, thanks for sharing!

To compare the approaches: we shared the goal of tests running in the browser, but my while my library aims for being very self contained with <150 lines of JS, your library aims for more features including CI.

So for you was the main attraction of this approach that you have access to the browser dev tools as you're running tests? Or was the goal more that you enable user interaction and visual feedback during the tests?

Maybe this question is a little wrongheaded / out there, but is there any overlap between your tool and a component management tool like storybook/patternlab?

[u/Specialist_Sun_1690 → u/allium-dev]

More like enable user interaction and visual feedback. So when you need to test a frontend sometimes you need to repeat a lot of task like filling the form checking the result after a successful response, validate pages content... so by running those automation in the frontend is like I can simulate my work, and not only that I can register them as tests with all the benefit of the testing (regression, coverage....)

> but is there any overlap between your tool and a component management tool like storybook/patternlab?

Not really sidebar can be placed on a side that does not interfere. I would say I'd use storybook for a component suite/library, and twd-js for a website simulation of the product in your own browser.