Docker image & e2e

[dorianboulch]

Hello,

I'm making a docker image to build and test angular cli based applications.
For now my Dockerfile is :

FROM node:7

# Install angular-cli
# https://www.npmjs.com/package/angular-cli
RUN npm install -g @angular/cli@1.0.0-rc.0

# Install watchman
# https://ember-cli.com/user-guide/#watchman
RUN npm install -g watchman

# Install typings
# https://github.com/typings/typings
RUN npm install -g typings

# Install Yarn
# https://yarnpkg.com/en/docs/install
RUN apt-key adv --fetch-keys http://dl.yarnpkg.com/debian/pubkey.gpg && \
echo "deb http://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
apt-get update && apt-get install yarn

WORKDIR /workspace

It works pretty fine but ng e2e doesn't work, I've got this message for chrome :

webpack: Compiled successfully.
[14:41:30] I/direct - Using ChromeDriver directly...
[14:41:30] I/launcher - Running 1 instances of WebDriver
[14:41:30] E/launcher - Server terminated early with status 127
[14:41:30] E/launcher - Error: Server terminated early with status 127
    at /workspace/node_modules/selenium-webdriver/remote/index.js:242:20
    at ManagedPromise.invokeCallback_ (/workspace/node_modules/selenium-webdriver/lib/promise.js:1379:14)
    at TaskQueue.execute_ (/workspace/node_modules/selenium-webdriver/lib/promise.js:2913:14)
    at TaskQueue.executeNext_ (/workspace/node_modules/selenium-webdriver/lib/promise.js:2896:21)
    at asyncRun (/workspace/node_modules/selenium-webdriver/lib/promise.js:2775:27)
    at /workspace/node_modules/selenium-webdriver/lib/promise.js:639:7
    at process._tickCallback (internal/process/next_tick.js:103:7)
From: Task: WebDriver.createSession()
    at Function.createSession (/workspace/node_modules/selenium-webdriver/lib/webdriver.js:329:24)
    at Driver (/workspace/node_modules/selenium-webdriver/chrome.js:778:38)
    at Direct.getNewDriver (/workspace/node_modules/protractor/built/driverProviders/direct.js:70:26)
    at Runner.createBrowser (/workspace/node_modules/protractor/built/runner.js:198:43)
    at /workspace/node_modules/protractor/built/runner.js:277:30
    at _fulfilled (/workspace/node_modules/q/q.js:834:54)
    at self.promiseDispatch.done (/workspace/node_modules/q/q.js:863:30)
    at Promise.promise.promiseDispatch (/workspace/node_modules/q/q.js:796:13)
    at /workspace/node_modules/q/q.js:556:49
    at runSingle (/workspace/node_modules/q/q.js:137:13)
    at flush (/workspace/node_modules/q/q.js:125:13)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
[14:41:30] E/launcher - Process exited with error code 199

And for firefox I have :

webpack: Compiled successfully.
[14:44:40] I/direct - Using FirefoxDriver directly...
[14:44:40] I/launcher - Running 1 instances of WebDriver
[14:44:41] I/update - chromedriver: file exists /workspace/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_2.26linux64.zip
[14:44:41] I/update - chromedriver: unzipping chromedriver_2.26linux64.zip
[14:44:41] I/update - chromedriver: setting permissions to 0755 for /workspace/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_2.26
[14:44:41] I/update - chromedriver: v2.26 up to date
[14:44:41] E/launcher - Could not locate Firefox on the current system
[14:44:41] E/launcher - Error: Could not locate Firefox on the current system
    at found.then.found (/workspace/node_modules/selenium-webdriver/firefox/binary.js:115:11)
From: Task: WebDriver.createSession()
    at Function.createSession (/workspace/node_modules/selenium-webdriver/lib/webdriver.js:329:24)
    at Driver (/workspace/node_modules/selenium-webdriver/firefox/index.js:386:38)
    at Direct.getNewDriver (/workspace/node_modules/protractor/built/driverProviders/direct.js:76:26)
    at Runner.createBrowser (/workspace/node_modules/protractor/built/runner.js:198:43)
    at /workspace/node_modules/protractor/built/runner.js:277:30
    at _fulfilled (/workspace/node_modules/q/q.js:834:54)
    at self.promiseDispatch.done (/workspace/node_modules/q/q.js:863:30)
    at Promise.promise.promiseDispatch (/workspace/node_modules/q/q.js:796:13)
    at /workspace/node_modules/q/q.js:556:49
    at runSingle (/workspace/node_modules/q/q.js:137:13)
    at flush (/workspace/node_modules/q/q.js:125:13)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
[14:44:41] E/launcher - Process exited with error code 199

What am I missing ? For firefox, I guess I'm supposed to install it but node image is based on debian so there is iceweasel package instead of firefox.
What do you suggest ?

Thanks !

[dasch8]

I used to have a Docker image (also based on node:7) with iceweasel installed. This worked with CLI versions up to beta.30. Since version 5 (which is the version used since beta.31) protractor uses the marionette driver by default for firefox which is not compatible with iceweasel. Also the webdriver update run by the CLI does not install the marionette driver (it's run with flag --gecko=false). Protractor has a config flag to use the legacy driver but it cannot be used together with a custom command executor, which the CLI requires.
My fix is to install chrome in the image and configure protractor to run it with the --no-sandbox flag (see https://hub.docker.com/r/weboaks/node5-karma-protractor-chrome/). My Dockerfile is

FROM node:7

# Install yarn
RUN \
  wget -q -O - https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
  echo "deb http://dl.yarnpkg.com/debian/ stable main" > /etc/apt/sources.list.d/yarn.list && \
  apt-get update && \
  apt-get install -y yarn

# Install Chromium & Xvfb
RUN \
  wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \
  echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list && \
  apt-get update && \
  apt-get install -y google-chrome-stable xvfb && \
  rm -rf /var/lib/apt/lists/*

 # Install Angular CLI
 RUN yarn global add @angular/cli

Then there is also the issue that ng e2e does currently not work with yarn (see #4597 (comment) for workaround).

[dorianboulch]

I tried to use your chromium install but now I have this message :

webpack: Compiled successfully.
[08:31:08] I/direct - Using ChromeDriver directly...
[08:31:08] I/launcher - Running 1 instances of WebDriver
[08:31:08] I/update - chromedriver: file exists /workspace/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_2.26linux64.zip
[08:31:08] I/update - chromedriver: unzipping chromedriver_2.26linux64.zip
[08:31:08] E/launcher - ENOENT: no such file or directory, rename '/workspace/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver' -> '/workspace/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_2.26'
[08:31:08] E/launcher - Error: ENOENT: no such file or directory, rename '/workspace/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver' -> '/workspace/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_2.26'
    at Object.fs.renameSync (fs.js:774:18)
    at unzip (/workspace/node_modules/protractor/node_modules/webdriver-manager/lib/cmds/update.ts:229:6)
    at /workspace/node_modules/protractor/node_modules/webdriver-manager/lib/cmds/update.ts:199:7
    at _fulfilled (/workspace/node_modules/q/q.js:834:54)
    at self.promiseDispatch.done (/workspace/node_modules/q/q.js:863:30)
    at Promise.promise.promiseDispatch (/workspace/node_modules/q/q.js:796:13)
    at /workspace/node_modules/q/q.js:604:44
    at runSingle (/workspace/node_modules/q/q.js:137:13)
    at flush (/workspace/node_modules/q/q.js:125:13)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
[08:31:08] E/launcher - Process exited with error code 199

[dasch8]

There is an issue with ng e2e when using yarn to install dependencies. It's fixed in 97bfb12 and I guess it will be in RC1. Meanwhile you have to do yarn run webdriver-manager -- update --standalone false --gecko false first and then run your e2e tests with ng e2e --webdriver-update false.

[dorianboulch]

I tried to use your image, I've got this message :

webpack: Compiled successfully.
[23:34:48] I/direct - Using ChromeDriver directly...
[23:34:48] I/launcher - Running 1 instances of WebDriver
[23:35:49] E/launcher - unknown error: Chrome failed to start: exited abnormally
  (Driver info: chromedriver=2.26.436382 (70eb799287ce4c2208441fc057053a5b07ceabac),platform=Linux 4.9.8-moby x86_64)
[23:35:49] E/launcher - WebDriverError: unknown error: Chrome failed to start: exited abnormally
  (Driver info: chromedriver=2.26.436382 (70eb799287ce4c2208441fc057053a5b07ceabac),platform=Linux 4.9.8-moby x86_64)
    at Object.checkLegacyResponse (/workspace/node_modules/selenium-webdriver/lib/error.js:639:15)
    at parseHttpResponse (/workspace/node_modules/selenium-webdriver/http/index.js:538:13)
    at client_.send.then.response (/workspace/node_modules/selenium-webdriver/http/index.js:472:11)
    at ManagedPromise.invokeCallback_ (/workspace/node_modules/selenium-webdriver/lib/promise.js:1379:14)
    at TaskQueue.execute_ (/workspace/node_modules/selenium-webdriver/lib/promise.js:2913:14)
    at TaskQueue.executeNext_ (/workspace/node_modules/selenium-webdriver/lib/promise.js:2896:21)
    at asyncRun (/workspace/node_modules/selenium-webdriver/lib/promise.js:2820:25)
    at /workspace/node_modules/selenium-webdriver/lib/promise.js:639:7
    at process._tickCallback (internal/process/next_tick.js:103:7)
From: Task: WebDriver.createSession()
    at Function.createSession (/workspace/node_modules/selenium-webdriver/lib/webdriver.js:329:24)
    at Driver (/workspace/node_modules/selenium-webdriver/chrome.js:778:38)
    at Direct.getNewDriver (/workspace/node_modules/protractor/built/driverProviders/direct.js:70:26)
    at Runner.createBrowser (/workspace/node_modules/protractor/built/runner.js:198:43)
    at /workspace/node_modules/protractor/built/runner.js:277:30
    at _fulfilled (/workspace/node_modules/q/q.js:834:54)
    at self.promiseDispatch.done (/workspace/node_modules/q/q.js:863:30)
    at Promise.promise.promiseDispatch (/workspace/node_modules/q/q.js:796:13)
    at /workspace/node_modules/q/q.js:556:49
    at runSingle (/workspace/node_modules/q/q.js:137:13)
    at flush (/workspace/node_modules/q/q.js:125:13)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
[23:35:49] E/launcher - Process exited with error code 199

I changed protractor.conf, i put :

capabilities: {
    'browserName': 'chrome',
    'chromeOptions': {
      args: ['--no-sandbox']
    }
}

In my package.json I have :

"scripts": {
    "e2e": "ng e2e --webdriver-update false",
    "pree2e": "yarn run webdriver-manager -- update --standalone false --gecko false"
}

And I run the command npm run e2e
Did I miss something ?

[dasch8]

To launch Chrome in a headless environment you need a virtual display (sorry forgot about that...). You need to install Xvfb (which is done together with Chrome in my Dockerfile). You then do xvfb :99 -ac & and export DISPLAY=:99.0 before launching the tests. See https://github.com/hoatle/docker-angular-cli for a way to start Xvfb at container startup (they add an init.d script for Xvfb and start the deamon via a Docker entrypoint script).

[filipesilva]

Good answer by @dasch8, thanks!

[Tenmak]

@dasch8 This is not true anymore : https://developers.google.com/web/updates/2017/04/headless-chrome

So I still need Xvfb?

No. Headless Chrome doesn't use a window so a display server like Xvfb is no longer needed. You can happily run your automated tests without it.

What is Xvfb? Xvfb is an in-memory display server for Unix-like systems that enables you to run graphical applications (like Chrome) without an attached physical display. Many people use Xvfb to run earlier versions of Chrome to do "headless" testing.

No need for Xvfb now.

[dasch8]

@Tenmak Thanks for the info!

For anyone interested, I built a relatively small Angular CI Docker image based on node:8-alpine.
The repo is here and the image is on GitLab's Docker registry: registry.gitlab.com/dasch8/angular-ci.

[manofthelionarmy]

@Tenmak Thanks for the info!

For anyone interested, I built a relatively small Angular CI Docker image based on node:8-alpine.
The repo is here and the image is on GitLab's Docker registry: registry.gitlab.com/dasch8/angular-ci.

You're awesome. Thank you :)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}