In Azure pipelines, how do you set up X display for headless Chrome testing? - azure

In our Azure Pipeline, we are attempting to run end-to-end tests in our Angular 9 application, using the following task ...
The package.json defines this ...
"scripts": {
...
"e2e": "npm run install-puppeteer && ng e2e"
},
but when the agent runs the above task, it dies with "Unable to open X display" error ...
> npm run install-puppeteer && ng test "--watch=false" "--codeCoverage=true"
> thermo-protect-ui#0.0.0 install-puppeteer /home/vsts/work/1/s
> cd node_modules/puppeteer && npm run install
> puppeteer#5.5.0 install /home/vsts/work/1/s/node_modules/puppeteer
> node install.js
Chromium is already in /home/vsts/work/1/s/node_modules/puppeteer/.local-chromium/linux-818858; skipping download.
08 12 2020 18:54:56.858:INFO [karma-server]: Karma v4.4.1 server started at http://0.0.0.0:9876/
08 12 2020 18:54:56.863:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
08 12 2020 18:54:56.866:INFO [launcher]: Starting browser Chrome
08 12 2020 18:54:57.134:ERROR [launcher]: Cannot start Chrome
[2099:2099:1208/185457.060113:ERROR:browser_main_loop.cc(1439)] Unable to open X display.
08 12 2020 18:54:57.134:ERROR [launcher]: Chrome stdout:
08 12 2020 18:54:57.135:ERROR [launcher]: Chrome stderr: [2099:2099:1208/185457.060113:ERROR:browser_main_loop.cc(1439)] Unable to open X display.
08 12 2020 18:54:57.675:INFO [launcher]: Trying to start Chrome again (1/2).
08 12 2020 18:54:59.035:ERROR [launcher]: Cannot start Chrome
22 error Exit status 1
23 error Failed at the thermo-protect-ui#0.0.0 test script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
Normally this kind of thing is dealt with by installing Xvfb. How do I do that using Azure pipelines?

Really this is #Hugh Lin's answer from the comments but for the benefit of posterity I created a bash task which ran a script in my repository. The script contained
#!/bin/bash
xvfb-run --auto-servernum --server-args='-screen 0, 1920x1080x24' npm run test -- --watch=false --codeCoverage=true
Then the tests ran successfully.

Related

Karma. SyntaxError: Expected an identifier but found ... instead - my version

I've read Karma. SyntaxError: Expected an identifier but found ... instead, and my issue seems the same. But please humor me, it's weirder in my case.
I have 2 Jenkins jobs that runs grunt karma on the same directory, but on 2 different branches, and the only diffs between the two branches is a *.js file that is in a different directory that I'm running grunt karma on. IOW, for all practical purposes on the directory I'm testing, the 2 branches are identical.
On my sandbox job that checks out my master branch, I can issue grunt karma and get
$ grunt karma
Running "karma:unit" (karma) task
08 01 2023 21:12:16.404:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
08 01 2023 21:12:16.406:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
08 01 2023 21:12:16.412:INFO [launcher]: Starting browser PhantomJS
08 01 2023 21:12:16.713:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket Ceegz0CmpJmQjl0uAAAA with id 84751163
PhantomJS 2.1.1 (Linux 0.0.0): Executed 51 of 51 SUCCESS (0.191 secs / 0.2 secs)
Done, without errors.
But on a job that runs grunt karma on a release/* branch I get
$ grunt karma
Running "karma:unit" (karma) task
08 01 2023 21:34:55.619:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
08 01 2023 21:34:55.621:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
08 01 2023 21:34:55.625:INFO [launcher]: Starting browser PhantomJS
08 01 2023 21:34:55.937:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket PeYT79bHxmpbsAj2AAAA with id 65885438
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
SyntaxError: Expected an identifier but found 'jasmineRequire' instead
at src/desktop/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:25
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
ReferenceError: Can't find variable: jasmineRequire
at src/desktop/node_modules/karma-jasmine/lib/boot.js:14
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
ReferenceError: Can't find variable: jasmine
at src/desktop/node_modules/karma-jasmine/lib/adapter.js:405
Warning: Task "karma:unit" failed. Use --force to continue.
On BOTH branches, this is the line in above file
var getJasmineRequireObj = (function(jasmineGlobal) {
let jasmineRequire; // This is the offending line
Here's my karma.conf.js file, also the same on BOTH branches
// karma.conf.js
module.exports = function(config) {
config.set({
frameworks: ['jasmine'],
singleRun: true,
browsers: ['PhantomJS'],
browserConsoleLogOptions: {
terminal: true,
level: ""
},
files: [
'src/common/lib/jquery/jquery-1.9.0.js',
'src/common/lib/jquery/jquery.cookie.js',
'src/common/lib/angular/1.8.2/angular.min.js',
'src/common/lib/angular/1.8.2/*.js',
'src/common/lib/angular-scrollable-table/angular-scrollable-table.js',
'src/desktop/lib/bootstrap/bootstrap.js',
'src/desktop/lib/bootstrap/angular-strap.js',
'src/desktop/node_modules/angular-mocks/angular-mocks.js',
'src/common/lib/hicharts/highcharts.js',
'src/common/lib/localization/sprintf.js',
'src/common/lib/localization/localization.js',
'src/common/js/directives/ZiftDirectives.js',
'src/common/js/modules/*.js',
'src/common/js/controllers/agencyorder/*.js',
'src/common/js/controllers/CampaignActivateController.js',
'src/common/js/services/agencyorder/agencyOrderAssetOrderService.js',
'src/common/js/services/agencyorder/quoteAgencySelectService.js',
'src/common/js/constants.js',
'src/common/js/services.js',
'src/common/js/downloads/*.js',
'src/common/js/services/export/ExportService.js',
'src/common/js/services/leads/*.js',
'test/**/*.js'
]
});
I delete the workspace when I run the jobs. What is my issue? TIA!

Angular 12 npm run test throws "Couldn't load color-version"

We recently migrated our application from angular 6 to 12 , everything looks good and i am able to run application(npm start is working) and test the UI features but when i run my angular unit tests(npm run test ) on my local it throwing error and this is only happening on my machine(other peers have no issues with unit test run)
03 03 2022 09:17:14.914:DEBUG [reporter]: Trying to load reporter: #angular-devkit/build-angular--event-reporter
03 03 2022 09:17:14.927:DEBUG [reporter]: Trying to load color-version of reporter: #angular-devkit/build-angular--event-reporter (#angular-devkit/build-angular--event-reporter_color)
03 03 2022 09:17:14.930:DEBUG [reporter]: Couldn't load color-version.
03 03 2022 09:17:14.932:DEBUG [reporter]: Trying to load reporter: #angular-devkit/build-angular--sourcemap-reporter
03 03 2022 09:17:14.933:DEBUG [reporter]: Trying to load color-version of reporter: #angular-devkit/build-angular--sourcemap-reporter (#angular-devkit/build-angular--sourcemap-reporter_color)
03 03 2022 09:17:14.942:DEBUG [reporter]: Couldn't load color-version.
I tried re install node/cli/npm install everything.....still no luck
Has anyone seen this error before ? Appreciate your response....
"Couldn't load color-version" is a debug-level message informing you that Karma was unable to find a "colorized" version of the reporter (#angular-devkit/build-angular--event-reporter_color).
One reason you might be seeing this message locally and not elsewhere is that you have set your log level to debug (--log-level debug).

Linux chrome not launching in Jenkins

After chrome latest version auto update, Jenkins karma couldn't launch the chrome browser in linux slave machines.
It is working fine on October 17th 2017. i.e. running by 61.0.3163.100-1 version.
After the version update to 62.0.3202.62-1 chrome doesn't launch.
WARN [karma]: Port 9876 in use
INFO [karma]: Karma v0.13.22 server started at http://localhost:9877/
INFO [launcher]: Starting browser Chrome
ERROR [launcher]: Cannot start Chrome
INFO [launcher]: Trying to start Chrome again (1/2).
ERROR [launcher]: Cannot start Chrome
INFO [launcher]: Trying to start Chrome again (2/2).
ERROR [launcher]: Cannot start Chrome
ERROR [launcher]: Chrome failed 2 times (cannot start). Giving up.
Karma has exited with 1
Reference: https://www.ubuntuupdates.org/package/google_chrome/stable/main/base/google-chrome-stable

Angular Quickstart fails karma testing out of the box

The official Angular quickstart is not able to run karma tests after a clean install on Windows 10. I typed the following 4 commands and nothing else:
C:\projects\temp>git clone https://github.com/angular/quickstart.git
C:\projects\temp>cd C:\projects\temp\quickstart
C:\projects\temp\quickstart>npm install
...install logs omitted for brevity
C:\projects\temp\quickstart>npm start
...app launched successfully, but logs omitted for brevity
C:\projects\temp\quickstart>npm test
...Error shown in complete logs below
The full error message resulting after the final command is as follows:
C:\projects\temp\quickstart>npm test
> angular-quickstart#1.0.0 pretest C:\projects\temp\quickstart
> npm run build
> angular-quickstart#1.0.0 build C:\projects\temp\quickstart
> tsc -p src/
> angular-quickstart#1.0.0 test C:\projects\temp\quickstart
> concurrently "npm run build:watch" "karma start karma.conf.js"
[0]
[0] > angular-quickstart#1.0.0 build:watch C:\projects\temp\quickstart
[0] > tsc -p src/ -w
[0]
[1] 01 06 2017 14:33:49.385:WARN [watcher]: Pattern "C:/projects/temp/quickstart/testing/**/*.js" does not match any file.
[1] 01 06 2017 14:33:49.406:WARN [watcher]: Pattern "C:/projects/temp/quickstart/testing/**/*.ts" does not match any file.
[1] 01 06 2017 14:33:49.407:WARN [watcher]: Pattern "C:/projects/temp/quickstart/testing/**/*.js.map" does not match any file.
[1] 01 06 2017 14:33:49.891:WARN [karma]: No captured browser, open http://localhost:9876/
[1] 01 06 2017 14:33:49.906:WARN [karma]: Port 9876 in use
[1] 01 06 2017 14:33:49.908:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9877/
[1] 01 06 2017 14:33:49.908:INFO [launcher]: Launching browser Chrome with unlimited concurrency
[1] 01 06 2017 14:33:49.958:INFO [launcher]: Starting browser Chrome
[1] 01 06 2017 14:33:51.821:INFO [watcher]: Changed file "C:/projects/temp/quickstart/src/app/app.component.js".
[1] 01 06 2017 14:33:51.843:INFO [watcher]: Changed file "C:/projects/temp/quickstart/src/app/app.component.spec.js".
[1] 01 06 2017 14:33:51.850:INFO [watcher]: Changed file "C:/projects/temp/quickstart/src/app/app.module.js".
[0] 2:33:51 PM - Compilation complete. Watching for file changes.
[1] 01 06 2017 14:33:51.873:INFO [watcher]: Changed file "C:/projects/temp/quickstart/src/main.js".
[1] 01 06 2017 14:33:51.965:INFO [Chrome 58.0.3029 (Windows 10 0.0.0)]: Connected on socket pXysNFDP8RC3agm8AAAA with id 9156960
[1] 01 06 2017 14:33:52.077:INFO [karma]: Delaying execution, these browsers are not ready: Chrome 58.0.3029 (Windows 10 0.0.0)
What needs to change in order for npm test to succeed out of the box on Windows 10?
The Angular quickstart project has largely been superseded by the Angular CLI. I would suggest using the CLI it for any new projects as it not only gives you an initial framework for your application, but it will also generate the additional boilerplate needed as you extend your application.
Before installing Angular CLi, ensure you have an up to date version of Node (6.9.0 or higher) and NPM (3 or higher). Also there may be other prerequisites not listed in the documentation, to install on an Android system I found it also needed Python 2.7 and g++ installed.
Install with:
npm install -g #angular/cli
To create a new project:
ng new PROJECT-NAME
cd PROJECT-NAME
ng serve
ng new will take some time to complete as in addition to building the project structure it also does the npm install.
Run unit tests with ng test and end-to-end tests with ng e2e.
Both ng test and ng serve will run continuously watching for changes and rebuilding the affected code. You can even leave both running in separate windows if you wish.
ng generate BLUEPRINT will generate new code, blueprints include module, component, service, class, directive, enum, guard, interface, pipe
Other useful commands:. You may want to experiment with this a bit before you write a real app: by default each component or service goes into its own subdirectory and is added to the top level app module, but you can explicitly create modules to provide additional structure if you wish.
ng build: builds your application into the output path.
ng doc KEYWORD: opens angular documentation for that keyword.
ng eject: ejects the app and outputs webpack configuration
ng lint: lints the project
ng xi18n: extracts i18n messages from the project.
This is not answer, just give more case to find out root cause.
I followed steps which you described and got this:
D:\Project\temp\quickstart>npm test
> angular-quickstart#1.0.0 pretest D:\Project\temp\quickstart
> npm run build
> angular-quickstart#1.0.0 build D:\Project\temp\quickstart
> tsc -p src/
> angular-quickstart#1.0.0 test D:\Project\temp\quickstart
> concurrently "npm run build:watch" "karma start karma.conf.js"
[0]
[0] > angular-quickstart#1.0.0 build:watch D:\Project\temp\quickstart
[0] > tsc -p src/ -w
[0]
[1] 02 06 2017 22:34:04.733:WARN [watcher]: Pattern
"D:/Project/temp/quickstart/testing/**/*.js" does not match any file.
[1] 02 06 2017 22:34:04.746:WARN [watcher]: Pattern
"D:/Project/temp/quickstart/testing/**/*.ts" does not match any file.
[1] 02 06 2017 22:34:04.747:WARN [watcher]: Pattern
"D:/Project/temp/quickstart/testing/**/*.js.map" does not match any file.
[1] 02 06 2017 22:34:05.103:WARN [karma]: No captured browser, open
http://localhost:9876/
[1] 02 06 2017 22:34:05.120:INFO [karma]: Karma v1.7.0 server started at
http://0.0.0.0:9876/
[1] 02 06 2017 22:34:05.120:INFO [launcher]: Launching browser Chrome with
unlimited concurrency
[1] 02 06 2017 22:34:05.156:INFO [launcher]: Starting browser Chrome
[1] 02 06 2017 22:34:06.742:INFO [Chrome 58.0.3029 (Windows 10 0.0.0)]:
Connected on socket GGConP8Ks64GubSYAAAA with id 70486747
[1] 02 06 2017 22:34:07.822:INFO [watcher]: Changed file
"D:/Project/temp/quickstart/src/app/app.component.js".
[1] 02 06 2017 22:34:07.837:INFO [watcher]: Changed file
"D:/Project/temp/quickstart/src/app/app.component.spec.js".
[1] 02 06 2017 22:34:07.856:INFO [watcher]: Changed file
"D:/Project/temp/quickstart/src/app/app.module.js".
[0] 10:34:07 PM - Compilation complete. Watching for file changes.
[1] 02 06 2017 22:34:07.865:INFO [watcher]: Changed file
"D:/Project/temp/quickstart/src/main.js".
[1] 02 06 2017 22:34:08.084:INFO [karma]: Delaying execution, these browsers
are not ready: Chrome 58.0.3029 (Windows 10 0.0.0)
Chrome 58.0.3029 (Windows 10 0.0.0): Executed 2 of 2 SUCCESS (0.159 secs /
0.149 secs)
Chrome 58.0.3029 (Windows 10 0.0.0): Executed 2 of 2 SUCCESS (0.117 secs /
0.112 secs)

Chrome not captured when using karma with Docker

I am trying to run some karma tests using chrome in a Docker container. My Dockerfile looks like:
FROM node:6-alpine
RUN apk update \
&& apk add --update alpine-sdk \
&& apk add chromium \
&& npm install -g #angular/cli#1.0.0 \
&& ng set --global packageManager=yarn \
&& apk del alpine-sdk \
&& rm -rf /tmp/* /var/cache/apk/* *.tar.gz ~/.npm \
&& npm cache clear \
&& sed -i -e "s/bin\/ash/bin\/sh/" /etc/passwd
ENV CHROME_BIN=/usr/local/bin/my-chrome-build
When I run ng test in this container (having mounted a project which I know works), I get:
$ ng test -sr && yarn run test:server
04 04 2017 10:32:27.896:INFO [karma]: Karma v1.5.0 server started at http://0.0.0.0:9876/
04 04 2017 10:32:27.915:INFO [launcher]: Launching browser Chrome with unlimited concurrency
04 04 2017 10:32:27.985:INFO [launcher]: Starting browser Chrome
04 04 2017 10:33:28.047:WARN [launcher]: Chrome have not captured in 60000 ms, killing.
04 04 2017 10:33:30.053:WARN [launcher]: Chrome was not killed in 2000 ms, sending SIGKILL.
04 04 2017 10:33:32.056:WARN [launcher]: Chrome was not killed by SIGKILL in 2000 ms, continuing.
error Command failed with exit code 1.
I don't really know how to debug this, any ideas what might be wrong or how I can find out more?
I'm using Chrome headless unstable in a Docker container with the following Karma browser config (excerpt):
...
browsers: ['Chrome_in_Docker'],
customLaunchers: {
Chrome_in_Docker: {
base: 'ChromeHeadless',
flags: [
'--disable-web-security',
'--no-sandbox',
'--disable-setuid-sandbox',
'--disable-dev-shm-usage',
'--remote-debugging-port=9223',
'--headless',
'--disable-gpu'
]
}
},
...

Resources