Automating front end testing is often difficult and labor-intensive task. The user interface is fluid and often changed by designers. We have to do manual exploration testing in order to cover all code paths. If we test the web application manually, can we tell what code have been executed?
To install the proxy, use
npm install -g was-tested.
Start was-tested by specifying target url and which urls to instrument.
was-tested --target <server url> --reset --instrument "app*.js"
Open the proxy url in the browser, the website should be fully functioning (except for web sockets).
The updated code coverage is sent back to the proxy, where is accumulates. You can see HTML report
by browsing to
<proxy url>/__report/. The complete coverage collected so far can be downloaded as a json
<proxy url>/__coverage/. The coverage file is generated using istanbul.
You can see the code coverage in action using an example included in the was-tested repo. Run the example using a static webserver, I recommend http-server.
npm install -g http-server git clone https://github.com/bahmutov/was-tested.git cd was-tested/test/button-click http-server -p 3003
You should see the original application by browsing to
localhost:3003. Now start the proxy
was-tested --target http://localhost:3003 --reset --instrument "app.js"
localhost:5050 and you should see the same example. If you open the DevTools and look at
you should see instrumented code.
The network log shows the coverage information sent back to the proxy.
Every 5 seconds the script injected by the proxy into the
app.js checks if the coverage has changed.
If code coverage object has changed, it is sent back to the proxy. You can see the initial code coverage
as a report by opening
Now click the button "Click Me" on the page. It should pop an alert. Click "Ok" and then see the updated code coverage information sent to the proxy.
If you reload the HTML code coverage report, you should see that all code lines are covered now.