How to Run Protractor End to End Tests in Microsoft Edge (Chromium)

Microsoft’s new version of Chromium-based Edge has been released. If you’re a Windows user, you might be excited or perhaps indifferent to have a new browser available to you. If you’re a developer, however, you know this new browser represents a new requirement.

Perhaps you were just days from finalizing the testing effort on your project when this new browser came into existence. After all the trouble that the old version of Edge gave you when trying to run your Protractor E2E tests, the news of this new browser might be more than your heart can bear.

But fear not! You have come to the right place. I too went through this and am here to help.

Let’s start from scratch with a new angular 8 project. We’ll adapt this setup so that it can run its Protractor E2E tests in Chrome, old Edge, and new Edge.

Refactor For Multiple Browsers

Each browser requires some unique code, of course, but a lot of it can be consolidated into a shared file. We’ll use the existing protractor.conf.js to hold the common code that each browser will use.

1. Replace the contents of protractor.conf.js with the following:

   const { SpecReporter } = require('jasmine-spec-reporter');const generateConfiguration = () => ({  allScriptsTimeout: 11000,  specs: [    './src/**/*.e2e-spec.ts'  ],  baseUrl: 'https://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 } }));  }})module.exports = {  generateConfiguration,};

Chrome

1. Add a new file called protractor-chrome.conf.js to the e2e folder with the following contents:

   'use strict';const { generateConfiguration } = require('./protractor.conf');const config = generateConfiguration();config.capabilities = {  browserName: 'chrome'};config.directConnect = true;exports.config = config;

2. Replace the “e2e” command in package.json with:

   "e2e-chrome": "ng e2e --protractorConfig=e2e/protractor-chrome.conf.js",

3. Run npm run e2e-chrome

Edge (Old and New)

In order to run these default tests, new Edge and old Edge can actually just use the same config file. With more complex tests or just more tests, however, they may need individual config files in order to set up different timeouts, flags, etc.

1. Add a new file called protractor-edge.conf.js to the e2e folder with the following contents:

   'use strict';const { generateConfiguration } = require('./protractor.conf');const config = generateConfiguration();config.capabilities = {  'browserName': 'MicrosoftEdge',  'platform': 'windows',  'maxInstances': 1,  'nativeEvents': false,};config.seleniumAddress = 'https://localhost:4444/wd/hub';exports.config = config;

2. Add this command to package.json:

   "e2e-edge": "ng e2e --protractorConfig=e2e/protractor-edge.conf.js",

Note: You’ll need to make sure you have Java installed on your machine and added to your PATH because webdriver-manager needs it for Edge (both old and new).

Old Edge

Warning: In my experience, getting a full test suite to run consistently in old Edge has always proven to be a difficult and time-consuming task. Then even after putting in that work, chrome still executes the tests nearly 10 times faster than old Edge.

1. In app.e2e-spec.ts this afterEach block will cause the tests to fail in old edge when trying to get the browser logs, so you will have to remove or disable it. (It can be useful to have this in Chrome and new Edge, so you might consider setting a flag to disable it for only old Edge)

   afterEach(async () => {    // Assert that there are no errors emitted from the browser    const logs = await browser.manage().logs().get(logging.Type.BROWSER);    expect(logs).not.toContain(jasmine.objectContaining({      level: logging.Level.SEVERE,    } as logging.Entry));});

2. Add this command to package.json:

   "webdriver-manager-start-edge-old": "cd ./node_modules/protractor && npm i webdriver-manager@latest && webdriver-manager update --gecko=false && webdriver-manager start --edge",

3. Download the Microsoft Webdriver for old Edge that matches your version of Edge by follow the instructions here
4. Open and bash prompt and run npm run webdriver-manager-start-edge-old
5. Open another bash prompt and run npm run e2e-edge

Note: if you already have new Edge installed on your machine, you’ll need to jump ahead to How to Use Old Edge Now That You Have New Edge in order to get old Edge working again.

New Edge

1. Add this command to package.json:

   "webdriver-manager-start-edge-new": "cd ./node_modules/protractor && npm i webdriver-manager@latest && webdriver-manager update --gecko=false && webdriver-manager start --edge ../../msedgedriver.exe"

2. If you don’t have it already installed, you can get new Edge from here
3. Open new Edge and identify the version by navigating to edge://settings/help
4. On this page, download the webdriver in the Microsoft Edge (Chromium) column that corresponds to the version of Edge installed.
5. After unpacking the download, move the msedgedriver.exe file to the project folder.
6. Open a bash prompt and run npm run webdriver-manager-start-edge-new
7. Open another bash prompt and run npm run e2e-edge

How to Use Old Edge Now That You Have New Edge

1. On this page select the proper stable build and platform and then select Get Policy Files.
2. unzip the folder inside the download.
3. From inside the unzipped folder, copy the windows\admx\msedgeupdate.admx file to C:\Windows\PolicyDefinitions on your computer.
4. From inside the unzipped folder, copy the windows\admx\en-US\msedgeupdate.adml file to C:\Windows\PolicyDefinitions\en-US on your computer.
5. Open Local Group Policy Editor using the windows search menu.
6. Find the Allow Microsoft Edge Side by Side browser experience setting located at Computer Configuration->Administrative Templates->Microsoft Edge Update->Applications
7. Double click the setting and select Enabled and click OK
8. Re-run the installer for new Edge for the policy changes to take effect
9. Open a bash prompt and run npm run webdriver-manager-start-edge-old
10. Open another bash prompt and run npm run e2e-edge-html.

You Might Also Like

• Angular – Dynamically Loading External Libraries
• Powerful Visual Testing with Applitools