Karma error - No captured browser, open http://localhost:9876/
angular, javascript, karma-jasmine, karma-runner
Solution
Some invocations of `fixture.debugElement.query` conflict with later invocations of `expect(...)`, causing a seemingly infinite loop in Jasmine's code.
For example, the following will cause the error when an object that matches `#my-id` exists:
expect(fixture.debugElement.query(By.css('#my-id'))).toBeFalsy();
In your case you had a different combination of calls, but it's the same recipe: `query` plus some `expect` calls.
As a temporary workaround, we can use `queryAll(...).length` instead:
expect(fixture.debugElement.queryAll(By.css('#my-id')).length).toBeFalsy();
This is a bug in Jasmine, and is already reported in these pages:
- Here for Jasmine
- Here for Angular
Problem
I just started to use Karma for first time...Following this tutuorial : https://angular.io/docs/ts/latest/guide/testing.html I am writing simple test to check if the title is correct. I always get this error : "No captured browser, open http://localhost:9876/" .I am using Angular 2 and typescript. These are the versions ``` "@angular/core": "2.4.10" "jasmine-core": "^2.6.2", "karma": "^1.7.0". ``` My folder structure looks like this ``` mydashboard -src -app -welcome -welcome.component.ts -welcome.component.spec.ts -karma.conf.js //karma.conf.js module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine'], files: ["src/app/**/*.spec.ts" ], exclude: [ ], preprocessors: { }, reporters: ['progress'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false, concurrency: Infinity }) } //welcome.component.spec.ts import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; import { WelcomeComponent } from './welcome.component'; describe('WelcomeComponent (inline template)', () => { let comp: WelcomeComponent; let fixture: ComponentFixture<WelcomeComponent>; let de: DebugElement; let el: HTMLElement; beforeEach(() => { TestBed.configureTestingModule({ declarations: [ WelcomeComponent ], // declare the test component }); fixture = TestBed.createComponent(WelcomeComponent); comp = fixture.componentInstance; // WelcomeComponent test instance // query for the title <h1> by CSS element selector de = fixture.debugElement.query(By.css('h1')); el = de.nativeElement; }); it('should display original title', () => { fixture.detectChanges(); expect(el.textContent).toContain(comp.title); }); }); //welcome.component.ts import { Component } from '@angular/core'; @Component({ template: '<h1>{{title}}</h1>' }) export class WelcomeComponent { title = 'Test Tour of Heroes'; } ```