Testing JavaScript can be a pain. A lot of tools, techniques, and frameworks have been developed to make the process as painless as possible. While some of these tools like Mocha, Jasmine and Jest provide a testing structure, some others like Istanbul and Blanket generate code coverage reports too. Different methods of testing JavaScript code in a browser have different prospects and consequences. It is hard to narrow down on one tool or technique for all solutions!
Let us have a quick look at some of the most popular ways to test JavaScript code in a browser.
1. JSFiddle
Whether you are working with JavaScript or frameworks like React and Vue, JSFiddle is the tool for you. It is an online tool to write and test JavaScript code in a browser. It was launched as "Mooshell" in 2009. If your working on a web application and using any kind of JavaScript library then JSFiddle is something worth a look. The interface is extremely simple and you just need to type some JavaScript or even add some HTML and CSS to it and instantly see the results. Test your JavaScript code snippets before adding them to your project using JSFiddle!
2. Cross Browser Testing Tools
Although you can easily use tools like JSFiddle and CodePen to test your JavaScript code, these won’t show you how your code outputs in different browsers or mobile browsers. In case you want to test your code for cross-browser compatibility you need to use online cross-browser testing tools like LambdaTest. It enables live interactive browser testing, automated screenshot testing, responsive layout testing, and smart visual UI testing. The tool will speed up your testing cycles a lot and help you with browser specific issues in your code.
3. Karma + Jasmine + Google Chrome
Karma is a tool that lets you test JavaScript code in a browser for a lot of testing purposes. However, it does not test the code itself. It executes the code but relies on third-party libraries like Jasmine and Mocha for testing. Apart from that, it requires a real browser. Thus Google Chrome must be installed on your local machine for this method of JavaScript to work. It launches Google Chrome in headless mode for its operation.
4. CodePen
CodePen is one of the best online tools to test your HTML, CSS and JavaScript code online. This community of developers has a lot to teach! This open-source learning environment probably has probably the largest community of developers with a whopping 330000 registered users constantly working towards developing amazing front-end applications. It is one of the best platforms to build and deploy a website, show the world your work and build test cases.
5. JSBin
JSBin is a neat and clean alternative to JSFiddle. If you want something with an easier to understand and less cluttered interface, then JSBin is the tool for you. The platform has a free and a pro-access. For advanced features like private bins and unlimited dropbox sync you need to go pro, however, you can easily test any combination of HTML, CSS, and JavaScript using JSBin general access.
6. Liveweave
Liveweave is yet another coding playground where you can test your JavaScript code. It has live preview capabilities and comes equipped with a ruler to help you with responsive designing. Its code-hinting feature for HTML, CSS, and JavaScript makes it easy for beginners to type the code. Apart from that, you can download your project as a .zip file using Liveweave and also add and use external libraries such as jQuery, AngularJS, Bootstrap etc. quite easily in your code.
These were some of the most popular ways to test your JavaScript code in a browser. Apart from this, you may even use tools like CSSDeck and Dabblet too. These are equally good and easy to use. Apart from that, Firebug and Chrome Developer Tools have Javascript console, where you can type JavaScript code for execution. Same applies to Internet Explorer 8+, Opera, Safari and potentially a lot of other modern browsers.
Source: dzone.com
Top comments (6)
There's another browser testing tool called Cypress which is quite useful and interesting for front-end testing that I would like to explore in the future.
Cypress currently only supports Chromium and electron. Testcafe will support almost every browser.
Interesting I had never heard of TestCafe till you had just suggested to me. I'll look it up to see if it's a useful alternative to Selenium or Cypress.
Selenium is more a heavy-weight solution for end to end testing, whereas testcafe is meant for in-browser integration testing.
Our testing pyramid currently looks like this:
While Cypress is an awesome tool no doubt, it still lacks browser compatibility testing features. The work is on going on it though and once this feature gets launched, it's gonna become a very serious competitor for Selenium.
But till then selenium will remain a widely preferred platform.
Hi @jaswantkaur ,
If you don't mind, I would request you adding JSitor as well in this list.
JSitor, an alternative of CodePen, JSBin and JSFiddle
Ashvin Kumar Suthar ・ Sep 12 ・ 3 min read