Search code examples
seleniummocha.jskarma-runnerchaibrowserstack

Run Mocha HTML Tests in Browserstack / DOM Testing in Cloud


I'm trying to run DOM tests that I have written using Mocha and Chai for assert on Browserstack.

I have an HTML file test.html that looks like this:

  <body>
    <div id="mocha"></div>

    <script src="https://unpkg.com/chai/chai.js"></script>
    <script src="https://unpkg.com/mocha/mocha.js"></script>

    <script class="mocha-init">
      mocha.setup('bdd');
      mocha.checkLeaks();
      assert = chai.assert;
    </script>
    <script src="MY_DOM_TESTS.js"></script>
    <script class="mocha-exec">
      mocha.run();
    </script>
  </body>

When I open this file in the browser locally, it runs through and shows me that all tests pass. My question now is how I can run it in one of the testing clouds, for example Browserstack.

They seem to have many adapters and plugins, but nothing explains this simple use case of DOM tests in an HTML file. Everything seems to be about js files exclusively, but not for HTML files.

I have tried using Karma with their plugins karma-mocha and karma-browserstack-launcher, to no avail. I tried having Karma run this simple test file but not even that seems to work:

module.exports = function (config) {
    config.set({
        frameworks: ['mocha', 'chai'],
        files: [
            './tests/test.html',
        ],
        client: {
            mocha: {
                reporter: 'html',
                ui: 'bdd',
            },
        },

Question: How can I run DOM tests using above HTML file in Browserstack (or any other Selenium testing cloud for that matter)?


Solution

  • I have figured it out. You need to use their local testing (the name is misleading), which basically opens a local server and pipes through local files to browserstack. I created a minimum example here on how to run mocha dom tests inside an HTML file on browserstack:

    https://github.com/fritzfr/mocha-html-browserstack-bridge