Encountering an issue with Karma: Unable to open browser with karma-webdriver-launcher

I attempted to use Karma along with karma-webdriver-launcher and karma-selenium-grid-launcher in order to launch Chrome/Firefox for test execution, but I am encountering issues with browser opening.

Could someone kindly provide me with a working code snippet for end-to-end testing using Selenium Webdriver and Karma? I have searched online but only found partial code snippets.

This is my Karma configuration file:


module.exports = function (config) {
    var webdriverConfig = {
        hostname: 'localhost',
        port: 4444,
      }
    
    let customLaunchers = {
    
        firefoxCustom: {
            base: 'WebDriver',
            config: webdriverConfig,
            browserName: 'firefox',
            version:'ANY',
            platform:'ANY'
          },
    
    };
    
    config.set({
      basePath: './',
      frameworks: ["mocha"],
      reporters: ['progress'],
    
      plugins: [
        'karma-webdriver-launcher',
      'karma-selenium-grid-launcher',
      'karma-mocha',
      'selenium-webdriver'
    ],
    
    
      customLaunchers: customLaunchers,
      browsers: [ 'firefoxCustom'],
      files: [
        "tests/*.spec.js"
      ],
      singleRun: true
    });
}

This is my test file:


const {Builder, By, until} = require('selenium-webdriver');

(async function example() {
    const driver = await new Builder().forBrowser('firefox').build();
    
    try {
        await driver.get('https://www.google.com');
        await driver.findElement(By.name('q')).sendKeys('hello');
        await driver.findElement(By.id('tsf')).submit();
    } catch(err) {
        console.log(err)
    } finally {
        await driver.quit();
    }
})();

This is my package.json file:


{
 "name": "karmatest2",
 "version": "1.0.0",
 "main": "index.js",
 "scripts": {
  "test": ""
 },
 "author": "",
 "license": "ISC",
 "description": "",
 "devDependencies": {
 "chai": "^4.2.0",
 "chromedriver": "^77.0.0",
 "geckodriver": "^1.19.0",
 ...
 }
}

I am encountering the following error:


21 10 2019 11:53:49.329:INFO [karma-server]: Karma v4.4.1 server started at http://0.0.0.0:9876/
...

Answer №1

Successfully implemented Selenium and Standalone Chrome integration with Docker.

Note: The setup should also function without Docker, but it requires manual configuration of Chrome, Chromedriver, and Selenium Hub. Setting up Selenium Hub (java) can be particularly challenging.

karma.conf.js

module.exports = function karmaConfig(config) {

    config.set({
        frameworks: ['jasmine'],
        files: [
            // insert source files here
            // insert spec files here
        ],
        exclude: [],
        preprocessors: {},
        reporters: ['dots'],
        port: 9876,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        singleRun: true,

        // RELEVANT SECTION
        browsers: ['ChromeWebDriver'],
        customLaunchers: {
            ChromeWebDriver: {
                base: 'WebDriver',
                browserName: 'chrome',
                version: 'ANY',
                platform: 'ANY',
            }
        },
        captureTimeout: 60000,
        // END OF RELEVANT SECTION
    });

};

package.json (may be slightly outdated):

"karma": "1.3.0",
"karma-jasmine": "0.1.6",
"karma-webdriver-launcher": "1.0.7",

I utilize Docker to run Selenium on the host network:

docker run -d --network=host selenium/standalone-chrome:3
, making accessible on the host machine. I then ensure that Selenium Hub is responsive before executing karma.conf.js.

log:

> karma start tests/javascript/karma.conf.js

20 05 2020 18:42:52.289:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
20 05 2020 18:42:52.298:INFO [launcher]: Launching browser ChromeWebDriver with unlimited concurrency
20 05 2020 18:42:52.317:INFO [launcher]: Starting browser chrome via Remote WebDriver
20 05 2020 18:42:56.024:INFO [Chrome 81.0.4044 (Linux 0.0.0)]: Connected on socket /#BeUqePvSlEC_aYzHAAAA with id 6615338
............................................................
Chrome 81.0.4044 (Linux 0.0.0): Executed 60 of 60 SUCCESS (0.67 secs / 0 secs)
20 05 2020 18:42:57.874:INFO [WebDriver]: Killed Karma test.
2020/05/20 18:42:57 Command finished successfully.

I opt not to set

customLauncher.ChromeWebDriver.config
as I am utilizing the default Selenium Hub location. This aligns with the default in wd, which is the package employed by karma-webdriver-launcher.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to instruct Ajax to choose the specific item clicked within a list?

I am currently working on creating a list of people on vacation and I want to calculate their return date when the "Return Date" link is clicked. I have been able to achieve this, however, whenever I click any of the buttons in the list, it always passes t ...

Learn how to use jQuery to load a text file containing arrays and then format them as

I'm attempting to load a .txt file containing multidimensional arrays using AJAX, and then sort through the data to display it on my website. However, I'm facing an issue where the data is only returning as plain text, even after trying to use JS ...

Designing a Curved Stepper Component in the Shape of an S

I've been attempting to create a custom stepper component with an S-curve shape using React, but so far I haven't been successful. I even tried utilizing the MUI Stepper component and experimented with pure HTML and CSS, but couldn't achieve ...

Secure WebSocket connectivity

I'm currently attempting to test a secure websocket connection, but I'm encountering some difficulties. Below is the code snippet of my test scenario: var WebSocket = require('ws'); describe('testing Web Socket', function() ...

Using Angular $resources in the query() function often results in the error message "Undefined is not a function

When I try to call the query() function using ngResource, I keep getting an error message saying "Undefined is not a function." [demo.js] var app = angular.module('StarterApp', ['ngResource']); app.factory("resourceFactory", function ...

Error: The promise was not caught due to a network issue, resulting in a creation error

I'm trying to use Axios for API communication and I keep encountering this error. Despite researching online and attempting various solutions, I am still unable to resolve the problem. Can someone please assist me? All I want is to be able to click on ...

The <a> tag does not lead to a different webpage and cannot be clicked on

I have developed a web component that includes a method to generate a copyright string: '<p>Copyright © 2020 John Doe<a href="https://www.example.com">. Terms of Use</a></p>' After creating the string, I conver ...

Adding or removing rows within an array in a hybrid Vue project - a step-by-step guide

Recently, I created a small web application to assist in organizing my project ideas. Check it out here: https://codepen.io/aibrindley/pen/ELXajM Now, I am working on enabling users to add items to the array directly from the interface. It would also be c ...

Vue JS Image Path

I have a Vue.js structure file that looks like this: --assets ----image ------my-image.png ------my-image2.png --components ----user ------userStart.vue To display the images using an array object, my code in userStart.vue is as follows: ...

Discovering if an input field is read-only or not can be achieved by using Selenium WebDriver along with Java

Currently, I am utilizing selenium webdriver along with Java to create a script. One issue we are encountering is that certain fields become disabled after clicking on a button. We need to determine if these fields are transitioning into readonly mode or ...

Ways to differentiate between an angular element and a jQuery element

In order to implement a feature where clicking outside of a dropdown hides it within a directive, I have the following code: $(document).click(function(e) { var selector = $(e.target).closest('.time-selector'); if (!selector. ...

Is there a way to eliminate the surplus 2 download icons from this Angular code when there are a total of 3 users?

Here is some HTML code snippet: <tr *ngFor="let user of users"> <td> <h6 class="font-medium">{{user.id}}</h6> </td> <td> <h ...

Concealing overflow for text content through CSS styling

I am currently working with an element that contains both an image and text. View the Fiddle here Note: To see the full grid, resize the preview accordingly. The CSS I have written is as follows: .gridster .gs-w .item{ position: relative; wi ...

The initial click may not gather all the information, but the subsequent click will capture all necessary data

Issue with button logging on second click instead of first, skipping object iteration function. I attempted using promises and async await on functions to solve this issue, but without success. // Button Code const btn = document.querySelector("button") ...

I'm not sure where the best place to include the $(document).ready() function

I have been attempting to incorporate JavaScript into my HTML/CSS, but have found myself going in circles. At the moment, I have my HTML, CSS, and JavaScript files all separated, but connected via the HTML page. Now, here are my inquiries: 1) Should I p ...

Is there a way in JavaScript to launch a link in a new tab and overlay a div on top of the existing content of the page?

Is there any method in JavaScript to open a link in a new tab and add a div element on that page? Let's say I have a page called page1.html which has a div containing a link and two radio buttons "yes" and "no". I want to open the link in a separate t ...

What is the most effective way to use Javascript to update an image depending on the selected value in a dropdown

My JavaScript skills are limited, but I have successfully created a form with 4 drop-down selection boxes on the left side for users to choose from (State, Car, Year, Condition). After making their selections, users can click a 'calculate' butto ...

Combining two variables in AngularJS seamlessly, without explicit instruction

In the realm of Controllers resides my beloved home.js: angular.module("HomeApp", ["BaseApp"]) .controller("MainCtrl", ["$http", "$window", "BaseService", function($http, $window, BaseService) { var self = this; self.posts = BaseServ ...

What is the best way to stop a UL element from inheriting the height properties of a drop down menu?

My sticky navigation bar is almost finished in terms of appearance and functionality. However, I encountered an issue when adding a drop-down menu within the links – it creates an invisible field that hides nearby text. Upon investigation, I found that t ...

Adding a child node before an empty node in Chrome with JavaScript Rangy

When attempting to insert a node before an empty element at the start of another element, a problem was noticed. Here is the initial setup: <p>|<span />Some text</p> By using range.insertNode() on a Rangy range to add some text, Chrome ...