Protractor browser is undefined in onPrepare

Question

I'm using angular 9 and trying to setup some e2e testing. I've seen many onPrepare examples where they get a hand on the browser. Even their comment documentation shows an example which doesn't work.

Any idea as to why the browser is undefined?

Here is the protractor.config.js

// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require('jasmine-spec-reporter');
const { browser } = require('protractor');

/**
 * @type { import("protractor").Config }
 */
exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './src/**/*.e2e-spec.ts'
  ],
  capabilities: {
    browserName: 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.json')
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));

    // this code is an example from the documentation of onPrepare
    // but browser is undefined
    return browser.getProcessedConfig().then(function(config) {
      console.log('Executing capability', config.capabilities);
    });
  }
};

Here is some info about angular

Angular CLI: 9.0.7                                                       
Node: 10.19.0                                                            
OS: win32 x64                                                            
                                                                         
Angular: 9.0.7                                                           
... animations, cli, common, compiler, compiler-cli, core, forms         
... language-service, platform-browser, platform-browser-dynamic         
... router                                                               
Ivy Workspace: Yes                                                       
                                                                         
Package                           Version                                
-----------------------------------------------------------              
@angular-devkit/architect         0.900.7                                
@angular-devkit/build-angular     0.900.7                                
@angular-devkit/build-optimizer   0.900.7                                
@angular-devkit/build-webpack     0.900.7                                
@angular-devkit/core              9.0.7                                  
@angular-devkit/schematics        9.0.7                                  
@ngtools/webpack                  9.0.7                                  
@schematics/angular               9.0.7                                  
@schematics/update                0.900.7                                
rxjs                              6.5.5                                  
typescript                        3.7.5                                  
webpack                           4.41.2                                 
                                                                         

package.json

{
  "name": "myapp3",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.0.2",
    "@angular/common": "~9.0.2",
    "@angular/compiler": "~9.0.2",
    "@angular/core": "~9.0.2",
    "@angular/forms": "~9.0.2",
    "@angular/platform-browser": "~9.0.2",
    "@angular/platform-browser-dynamic": "~9.0.2",
    "@angular/router": "~9.0.2",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.3",
    "@angular/cli": "~9.0.3",
    "@angular/compiler-cli": "~9.0.2",
    "@angular/language-service": "~9.0.2",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5"
  }
}

Answer 1

It's happening because you have imported the browser from the 'protractor' and it's undefined. There is no need to import it, the browser is accessible inside the 'onPrepare' method by default.

So you need to remove the import, and it will work.

const { browser } = require('protractor'); // This line should be removed